2013/06/13
23:55
Tag: 過去に個別の共有ボタンについて書いたことがありますが、今回は異なる4つの共有ボタンを設置する方法を紹介したいと思います。
+1ボタン/Tweetボタン/いいね！ボタン/Pocketボタンの4種類です
１．公式ページからコードを入手
- +1 ボタン - Google+ Platform — Google Developers
- Tweet Button - Twitter Developers
- Like Button - Facebook開発者
- Pocket Button - Pocket for Publishers
ボタンのスタイルは好みのものでいいと思いますが、それぞれのスタイルは統一した方が見栄えがいいです。
※ちなみに、+1ボタンといいねボタンはHTML5構文前提で進めます。
２．コードの埋め込み
１．で作成したコードにはスクリプトコード（scriptタグ）と表示用コード（divタグとかaタグ）の2種類があると思います。
scriptタグは</head>直前（ただし、いいねボタンのスクリプトはサイトの指示通り<body>直後）に、表示用コードは埋め込みたいところに、それぞれコピペします。
※トップページなど、複数の投稿が存在するページでも正常に動作するようにするために、以下の点を修正しましょう。（expr属性はガジェットに貼り付けても動作しません。必ずHTMLの編集から直接書き込むようにしましょう）
- 各ボタンのdata-urlやdata-href、data-save-urlを以下のように記載する
expr:data-url='data:post.canonicalUrl'
expr:data-href='data:post.canonicalUrl'
expr:data-save-url='data:post.canonicalUrl' - Tweetボタンのdata-textを以下のように記載する
expr:data-text='data:post.title'
３．ボタンのレイアウトの修正
コードを貼り付けただけでは、ボタン間の間隔がバラバラだったり改行されて表示されたりしてグチャグチャになってしまうので、以下の手順で修正しました。
- いいねボタンの幅（width）を60pxにする
- 各ボタンの表示用コードを<div>タグで囲む
例えば<div class='sns'>～</div>で4つのボタンの表示用コードを囲みます - CSSを追加する
各ボタンをdivタグで囲ったので、間隔を指定し、display:inline-blockで横に並ぶようにします。
（例）.sns{margin-right:3px;
display:inline-block;}
※色んな方法がありますので、色々試してみてください。
以下が、当Blogにて埋め込んだコードです。参考になれば。
CSS記述
.sns{margin-right:3px;
display:inline-block;}
</head>直前
<!-- +1ボタン -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- +1ボタン -->
<!-- twitterボタン -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- twitterボタン -->
<!-- Pocketボタン -->
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<!-- Pocketボタン -->
<body>直後
<!-- いいねボタン -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- いいねボタン -->
設置したいところ
<!-- +1ボタン -->
<div class='sns'>
<div class='g-plusone' data-size='tall' expr:data-href='data:post.canonicalUrl'/></div>
<!-- +1ボタン -->
<!-- twitterボタン -->
<div class='sns'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='anywhereTheJavascriptAPI' data-via='Chimtty' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- twitterボタン -->
<!-- いいねボタン -->
<div class='sns'>
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='true' data-width='60px' expr:data-href='data:post.canonicalUrl'/>
</div>
<!-- いいねボタン -->
<!-- Pocketボタン -->
<div class='sns'>
<a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket' expr:data-save-url='data:post.canonicalUrl'/>
</div>
<!-- Pocketボタン -->
