WordPressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ

先日、自前でソーシャルサービスのシェアボタンの外観のつくり方を書きました。

先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。 ソーシャルサービス純正のバルーン型シェ...

上記の記事では以下のシェアボタンを作成しています。(Pocket、Evernote、feedlyが果たしてシェアになるのか?という問題は置いといてください。)

  1. Twitter
  2. Facebook
  3. Google+
  4. はてブ
  5. Pocket
  6. LINE
  7. Evernote
  8. feedly

ただ、外観だけではページをシェアすることはできません。アンカーリンクなどを適切に設定して、シェアアクションできるようにしなければなりません。

そこで今回は、ソーシャルボタンの独自カスタマイズ用に、通常の<A></A>タグなどで使用する、リンクアクションの書き方をまとめて紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Twitterでツイートする

Twitter

Aタグでツイートするリンクを作成するには、リンクのURL部分を以下のように書きます。

http://twitter.com/share?text=[ページのタイトルなど]&url=[ページのURL]

これを、Wordpressで使用するとすると以下のように書きます。

http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>

あとは、普通にリンクタグを作ります。

<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="_blank">ツイート</a>

リンク動作は、以下のようになります。

アンカーテキスト部分は、画像やアイコンフォントにしても良いですし、リンク自体のスタイルを変更してボタン形式にしても良いと思います。

以下で紹介するリンク方法でも同様に自由に装飾をしてください。

Facebookでいいね!する

Topic - Facebook

リンクを作成するには、URL部分を以下のようにします。

https://www.facebook.com/sharer/sharer.php?u=[ページのURL]&t=[ページのタイトル]

WordPressで使用するには、以下のように書きます。

https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>

リンクタグは以下のようになります。

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>"  target="_blank">いいね!</a>

リンク動作は、以下のようになります。

スタイルなどは自由に変更してください。

Google+で+1する

Google+

+1するためのページに移動するには、以下のようなURLを使用します。

https://plus.google.com/share?url=[ページのURL]

WordPressで使用するには、以下のように書きます。

https://plus.google.com/share?url=<?php the_permalink() ?>

リンクタグは以下のようになります。

<a href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank">Google+1</a>

リンク動作は以下のようになります。

はてなではてブする

はてなブックマーク

はてブするためのURLは、以下のようになります。

http://b.hatena.ne.jp/entry/[ページのURL]

WordPressで利用する場合は、以下のように書きます。

http://b.hatena.ne.jp/entry/<?php the_permalink() ?>

リンクタグは以下のようになります。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" target="_blank">はてブ</a>

リンク動作は以下のようになります。

ダイアログを表示してはてブする

はてなが公開しているはてブボタンのように、クリックすると、ダイアログが表示されます。

ダイアログからはてブ

公式同様のはてブができるようにするには以下のように書きます。

<?php 
//はてブするときに使用するエンコードしたURL
function get_encoded_url($url){
  return urlencode(mb_convert_encoding($url, "UTF-8"));
}

//はてブするときに使用するエンコードしたタイトル
function get_encoded_title($title){
  return urlencode(mb_convert_encoding($title, "UTF-8"));
}
 ?>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_encoded_url(get_permalink()); ?>&title=<?php echo get_encoded_title(get_the_title()); ?>">ダイアログからはてブ</a>

ダイアログではてブをするには、エンコードしたURLと、エンコードしたタイトルが必要なので、関数化しています。

関数などは、functions.phpなどに書いておくと良いかもしれません。

リンク動作は以下のようになります。

Pocketからページをストックする

Pocket

Pocketを利用するURLは、以下のようになります。

https://getpocket.com/edit?url=[ページのURL]

WordPressで使用するには、以下のように書きます。

https://getpocket.com/edit?url=<?php the_permalink() ?>

リンクタグは以下のようになります。

<a href="https://getpocket.com/edit?url=<?php the_permalink() ?>" target="_blank">Pocket</a>

リンク動作は以下のようになります。

LINEでシェアする

LINE

LINEでシェアするURLは、以下のようになります。

http://line.me/R/msg/text/?[ページタイトル]%0D%0A[ページURL]

WordPressで使用するには、以下のように書きます。

http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>

リンクタグは以下のようになります。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank">ラインでシェア</a>

リンク動作は以下のようになります。

ラインでシェア

Evernoteでクリップする

Evernote

Evernoteでクリップするには、JavaScriptを使う必要があります。

以下のように記入します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({url:'<?php the_permalink();?>',
    providerName:'<?php bloginfo('name'); ?>',
    title:'<?php the_title();?>',
    contentId:'the-content',
    }); return false;" class="evernote-btn-icon-link"><span class="icon-evernote"></span></a>

先頭で、JavaScriptコードが読み込まれ、それをAタグ内で使用しています。JavaScriptの読み込みコードは、<head></head>内などに書いても良いと思います

そして、クリックする範囲をcontentIdで指定したIDで囲みます。page.phpや、single.phpなどにある、the_content()を囲むと綺麗にクリップされます。

<div id="the-content">
<?php the_content(); ?>
</div>

詳しい解説は、以前書いた記事を参照してください。

Evernoteて便利ですよね。 あまりにも便利なので、僕も毎日結構な頻度でメモやらスクラップやらで使用しています。 そ...

※現在Evernoteは、アプリの仕様を推奨しているようなので、こういったブログパーツの配布は無くなりました。この方法も、いずれ使えなくなる可能性があるかもしれません。

feedlyで購読する

feedly-logo

feedly購読を利用するURLは、以下のようになります。

http://feedly.com/index.html#subscription%2Ffeed%2F[URLエンコードしたフィードのURL]

WordPressで使用するには、以下のように書きます。

http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>

リンクタグは以下のようになります。

<a href="http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>" target="_blank">feedlyを購読</a>

リンク動作は以下のようになります。

feedlyを購読

バルーンの作成方法などは、以下に書いてあります。

feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。 Wordp...

まとめ

こんな感じで、思ったよりもシンプルにシェアリンクを作成することができます。(Evernote以外)

モバイルなどは、ソーシャルサービス純正の重たいシェアボタンを表示するよりは、アイコンフォントなどで簡単なシェアリンクを作った方が、表示も早く、ユーザーにもやさしいと思います。

もし、シェアボタンを自作する方の参考になれば幸いです。(というかまとめといて、後から自分で参考にするために書きました。)

シェアカウント数の取得方法は、以下などに書いています。

昨日、試しに作っているカスタマイズテーマに直接APIなどから取得した、ツイートカウント数などを表示させたくなりました。 それで...