簡単な手順
- 公式サイトでコードを取得してコピー。プレビューできるならその場でプレビューして共有ページのURLをそこでコピー。FacebookとGoogle+は『いいね！』や『+1』ではなく『共有』ボタンのコードを取得します。その方が簡単です。
例：twitterならhttps://about.twitter.com/ja/resources/buttons#tweetにアクセスして必要な項目を入れて作成します。Twitterにログインしていたら自分のユーザーアカウントが入力された状態になってます。
<a href="https://twitter.com/share" class="twitter-share-button" data-via="アカウント">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>公式ツイートボタンのコード
- その他主なサイトの共有ボタン作成ページ
-
- Facebook シェアボタン作成はこちら(Facebookのボタンをサイトに貼るのにはアプリ作成が必須です。)
- Google+ シェアボタン作成はこちら
- Pinterest PinItボタン作成はこちら
- 1.でプレビューできなかったら取得したコードをブログテンプレートやHTMLファイルに貼付けて必要なら自サイトに合った設定に書き直して保存(WordPressならURLをテンプレートタグに置き換えるなど)
- 貼付けたボタンをクリックして開いたページのURLをコピー。
url=記事ページURLやtext=記事のタイトル等をお使いのブログのテンプレートタグとか設定に合わせてからaタグでリンクします。
2.で取得したページのURL
Tweetボタンを押して移動するページのURL
https://twitter.com/intent/tweet?original_referer=シェアしたい記事ページのURL&text=Tweetする文字列(ブログ記事のタイトルとか)&tw_p=tweetbutton&url=ページのURL&via=Twitterアカウント
Facebook シェアボタンを押して移動するページのURL
https://www.facebook.com/sharer/sharer.php?u=シェアしたい記事ページのURL&t=その記事のタイトル等
Google+ 共有ボタンを押して移動するページのURL
https://plus.google.com/share?url=記事ページのURL
はてなブックマーク B!ボタンを押して移動するページのURL
http://b.hatena.ne.jp/entry/シェアしたい記事ページのURL
日本人ブロガーの多くがボタンを設定してる四大ボタンはこんな感じです。それと画像メインのブログにもってこいのPinterstのPinIt!(当サイトではカスタム投稿タイプの馬絵用のテンプレートに設置)は以下です。
PinIt!(ピン)ボタンを押して移動するページのURL
http://www.pinterest.com/pin/create/button/?url=画像が掲載されているページのURL&media=画像のURL
SNSやブックマークではないけど現在ブロガーに大人気のRSSリーダーサービスFeedlyの登録ボタンも付けてみます。公式のFollowボタンジェネレータでコピーするコードの中にあります。
FeedlyのFollowボタンを押して移動するページのURL
http://cloud.feedly.com/#subscription%2Ffeed%2FエンコードしたRSSフィードのURL
- 共有ページのURL内のシェアの対象になるURLやサイト名、ページタイトルが入る箇所をサイトに合わせてテンプレートタグなどに書き換えます。WordpressならページURLは
<?php the_permalink();?>、タイトルは<?php the_title();?>とテンプレートタグに書き換えます。
だいたいこの方法で『このページを共有(追加)する』というページのURLがわかります。それにaタグを付けて別窓で開くようにして、好きな画像、Webフォント、
テキスト等でaタグを挟むと共有するリンクが簡単に出来上がります。Wordpressの場合、4.のテンプレートタグはループ内でしか使えないのでsingle.phpの<?php if(have_posts():while(have_posts()):the_post();?>と<php endwhile:endif;?>の中に書きます。
PocketとEvernoteは難しい
Pocketはこの方法では不可能なのでいろいろ調べ回りました。有名ブログmbdbさんの記事のサンプル(下記にリンクあり)でためしてみたらあっさりと取得できました。
Pocketボタンを押して移動するページのURL
https://getpocket.com/edit?url=記事ページのURL
せっかくだからEvernoteのクリップボタンも付けてみようと思い公式サイトを探してみたのですがとうの昔に廃止されてたようです。今はブラウザの拡張機能『Webクリッパー』を使えということみたいです。でも諦めきれなくてコードを探すべくGoogle先生に聞いてみましたが殆どの記事が、
『かつて存在したサイトメモリー作成ページの使い方の説明』とかWordpressプラグインの説明に過ぎなかったのです。ただ一つだけそのサイトメモリーで取得したコードを残してくれてる記事を見つけました。そのページはMovableType向けのページなのでコード内にMovableType(以下MT)のテンプレートに書かれてました。そのMTのテンプレートタグをWordpressのに書き直せば我がWordpressなブログでもちゃんと動きました。
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({url:'<?php the_permalink();?>',
providerName:'サイトの名前',
title:'記事のタイトル',
contentId:'記事を囲むコンテナ(<div id="container">だったらcontainerを入れる)',
}); return false;" >ボタン画像、テキスト、HTML等</a>
2014年8月現在このコードは生きてます。非公式かつ非推奨なものなのでいずれは完全に姿を消す可能性があります。使うなら今のうちです。これならiPhoneにEvernoteクリップするためのアプリを買わなくてもSafariクリップを試してみたらできました
- [参考ページ]
-
Pinterestの自作ボタンについて詳しく書かれていて、必要なURL等も公開されてます。
-
このページの記事の真ん中ぐらいにあるサンプルボタンをクリックすると保存ページのURLが一発でわかります。
-
数少ない、Evernoteクリップボタン(サイトメモリー)のコードを公開しているページです。
-
twitterとfacebookはもちろん、日本人ブロガーなら押さえておきたいhatenabookmarkはてブとmiximixiのボタンのURLも押さえていらっしゃいます。
最後にまとめ
WordPress仕様の各種コード
WordPressテンプレートタグを入れてWordpressで使うコードに書き換え、コピペですぐ使えるようにしてみました。aタグの間の『リンクテキスト、画像、HTML』は好きなものを使ってください。私はアイコンフォントを使ってます。
- [Twitter]
-
<a href="https://twitter.com/intent/tweet?original_referer=<?php the_permalink();?>&text=<?php the_title();?> - <?php bloginfo('name');?>&tw_p=tweetbutton&url=<?php the_permalink();?>&via=@your_account" target="_blank" rel="nofollow" title="このページをツイート">リンクテキスト、画像、HTML</a> - [Facebook]
-
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>&t=<?php the_title();?>" target="_blank" rel="nofollow" title="Facebookでシェアする">リンクテキスト、画像、HTML</a>
- [Google+]
-
<a href="https://plus.google.com/share?url=<?php the_permalink();?>" target="_blank" rel="nofollow" title="Google+でシェアする">リンクテキスト、画像、HTML</a>
- [はてなブックマーク]
-
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" target="_blank" rel="nofollow" title="はてなブックマークに追加">リンクテキスト、画像、HTML</a>
- [Feedly]
-
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php bloginfo('rss_url');?>%2F" target="_blank" rel="nofollow" title="このブログをFeedlyで購読">リンクテキスト、画像、HTML</a> - [Pinterest]
-
<a href="http://www.pinterest.com/pin/create/button/?url=<?php the_permalink();?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?> &description=<?php the_title();?>" target="_blank" rel="nofollow" title="画像をピン">リンクテキスト、画像、HTML</a>
wp_get_attachment_url( get_post_thumbnail_id() );でアイキャッチ画像のURLを取得してます。 - [Pocket]
-
<a href="https://getpocket.com/edit?url=<?php the_permalink();?>" target="_blank" rel="nofollow" title="Pocketに保存">リンクテキスト、画像、HTML</a>
- [Evernote]
-
<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:'post<?php the_ID();?>', }); return false;" class="evernote-clip"title="Evernoteにクリップ">リンクテキスト、画像、HTML</a>contentIDは使用テーマによって異なります。記事を囲むタグのIDを指定します。なければ作ります。
