先日、自前でソーシャルサービスのシェアボタンの外観のつくり方を書きました。
上記の記事では以下のシェアボタンを作成しています。(Pocket、Evernote、feedlyが果たしてシェアになるのか?という問題は置いといてください。)
- Google+
- はてブ
- LINE
- Evernote
- feedly
ただ、外観だけではページをシェアすることはできません。アンカーリンクなどを適切に設定して、シェアアクションできるようにしなければなりません。
そこで今回は、ソーシャルボタンの独自カスタマイズ用に、通常の<A></A>タグなどで使用する、リンクアクションの書き方をまとめて紹介したいと思います。
目次
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でいいね!する
リンクを作成するには、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する
+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を利用する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でシェアする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でクリップするには、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は、アプリの仕様を推奨しているようなので、こういったブログパーツの配布は無くなりました。この方法も、いずれ使えなくなる可能性があるかもしれません。
feedlyで購読する
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>
リンク動作は以下のようになります。
バルーンの作成方法などは、以下に書いてあります。
まとめ
こんな感じで、思ったよりもシンプルにシェアリンクを作成することができます。(Evernote以外)
モバイルなどは、ソーシャルサービス純正の重たいシェアボタンを表示するよりは、アイコンフォントなどで簡単なシェアリンクを作った方が、表示も早く、ユーザーにもやさしいと思います。
もし、シェアボタンを自作する方の参考になれば幸いです。(というかまとめといて、後から自分で参考にするために書きました。)
シェアカウント数の取得方法は、以下などに書いています。