2013/06/27

FacebookやTwitterなどのボタンを設置してみました

ググればわんさか出てくるカスタマイズなのですが、うまいことどこかで見たような感じにFacebook、Twitter、はてなブックマーク、Google+、Pocket、Evernoteと並べられたので、せっかくだから方法でも書いておこうかと。



2013/06/30 Pocketを追加して、テーブルで整形しました。



1.テンプレート画面から「HTMLの編集」を開く。


2.</head>前後にスクリプト読み込み用のタグを追加する。

一度HTMLのエディットボックスをクリックしてからCtrl+Fを押すと、検索窓が右上に出ますので、「</head>」と入力してEnterを押してください。</head>付近にジャンプします。

「</head>」の直前に以下のコードを追加します。
<script async='true' src='http://static.evernote.com/noteit.js' type='text/javascript'/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async="true";js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script async='ture' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
<script async='true' src='http://apis.google.com/js/plusone.js' type='text/javascript'>{lang:&#39;ja&#39;}</script>
「<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.async = true;
  js.src = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

3.フッターにボタン設置用のタグを追加する。

2と同じように「post-footer-line post-footer-line-3」を検索してジャンプします。

「post-footer-line post-footer-line-3」の位置に特に理由はありませんので、設置したい場所が別にあれば、そちらでもかまいません。
以下のコードを追加します。
<div class='post-footer-line post-footer-line-3'>
  <table style='margin-top:8px; border:1px;' cellpadding="4"> 
    <tr>
      <!-- Facebook --><td>
        <div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='true' data-width='450' expr:data-href='data:post.canonicalUrl'/></td>
      <!-- Twitter --><td>
        <a class='twitter-share-button' data-count='vertical' data-lang='ja' expr:data-url='data:post.canonicalUrl' href='https://twitter.com/share'>ツイート</a></td>
      <!-- Hatena Bookmark --><td>
        <a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a></td>
      <!-- Google+ --><td>
        <g:plusone expr:href='data:post.canonicalUrl' size='tall'/></td>
      <!-- Pocket --><td>
        <a class='pocket-btn' data-lang='en' data-pocket-count='vertical' expr:data-save-url='data:post.canonicalUrl' href='https://getpocket.com/save'/><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></td>
      <!-- Evernote --><td>
        <a expr:onclick='"Evernote.doClip({providerName:\"" + data:title + "\", title:\"" + data:post.title + "\", url:\"" + data:post.canonicalUrl + "\"}); return false;"' href='#'><img alt='Evernote' src='http://static.evernote.com/article-clipper-vert.png'/></a></td>
    </tr>
  </table>
</div>
ボタンの順番も自由ですし、必要のないボタンを外すこともできます。

0 件のコメント: