TwitterのつぶやくボタンとFacebookのいいね!ボタンをa-blog cmsに設置する


このエントリーをはてなブックマークに追加

このブログにエントリーページを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 から読み込むことにしました。

a-blog cms でスマートに js ( JavaScript ) ファイルを管理する

/**
 * 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の知識は必要になりますがこうすることでテンプレートのメンテナンスが楽になります。