このブログにエントリーページをTwitterでツイートするボタンと、Facebookでいいね！するボタンを設置した時に行ったことのまとめです。 a-blog cms の使用を想定していますが、一部の情報は他のブログでも応用できると思います。 スクリプトをテンプレートに直接記述するのではなくjsで出力するようにしているところがポイントです。
Twitterボタンをゲット
Twitterにログインして下記のページへアクセス
Twitter / Twitterボタン
ボタンを選択
Like Buttonをゲット
Facebookにログインして下記のページへアクセス Like Button - Facebook開発者
URL to LIKE : 特定のURLに対して「いいね！」する場合はURLを指定する。なければ設置されているページのURL
Send Button (XFBML Only) : 友達などにお知らせするための「送る」ボタンを表示する
Layout Style : レイアウトや表示される内容を選べる
Width : 設置する場所に併せて好みの横幅を指定できる
Show Faces : Layout Styleでstandardを選んでいるときに「いいね！」しているユーザーのアイコンを表示
Verb to display : ボタンのラベルを「いいね！」から「おすすめ！」に変更できる
Color Scheme : 見た目の色を選べる
Font : フォントを選べる
Get Code ボタンを押すとソースコードが表示される。
a-blog cms に設置
ツイートボタンもライクボタンも、ボタンのHTML要素とは別にスクリプトを読み込む必要があります。 私はJavascriptを直接テンプレートに書くのが嫌だったので index.js から読み込むことにしました。
/**
* index.js
*/
jsDir = $('#user-js').attr('src').replace(/index\.js$/, '');
$(document).ready(function ( )
{
// twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// facebook
$('body').append('<div id="fb-root"></div>');
(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'));
}次にテンプレートに実際に表示されるボタンのHTML要素をコピペします。 私はblogテーマを継承させたテーマを使用しているのですが、blogテーマにはそれらしい箇所がはじめから記述してありました。
<!-- **/themes/blog/index.htmlのそれっぽい箇所** -->
<!-- BEGIN footer:veil -->
<footer>
<p class="entryFooter">Posted by {posterName} at <time>{date#H}:{date#i}</time> | <a href="{inheritUrl}">Permalink</a>
<!-- BEGIN commentAmount --> | <a href="{commentUrl}#comment">comment ( {commentAmount} )</a><!-- END commentAmount --></p>
<!--#include file="/include/snsButton.html"-->
</footer>
<!-- END footer:veil -->
</article>使用しているテーマに /include/snsButton.html というファイルを用意してそこにボタンのHTML要素をコピペします。
<!-- **/include/snsButton.html** -->
<!-- BEGIN_MODULE Touch_Entry -->
<!-- twitter --><a href="https://twitter.com/share" class="twitter-share-button" data-via="_tk84" data-lang="ja">ツイート</a>
<br />
<!-- facebook --><div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
<!-- END_MODULE Touch_Entry -->スタイルの問題
これで無事動いたのですが、いいね！ボタンを押した時に表示されるポップアップが隠れてしまっていました。
次のようにスタイルを修正しました。
.entry {
/* overflow:hidden; */
overflow: visible;
}参考リンク
Facebook Likeボタン（いいね！）を設置。仕様。 Twitter公式ツイートボタンを設置
まとめと考察
ボタンを設置する際のスクリプトをテンプレートに直接記述するのではなくjsで出力するようにしました。 簡単なjsの知識は必要になりますがこうすることでテンプレートのメンテナンスが楽になります。