Ivy SOHO.net

Geeklogの[tag:ソーシャルボタン]の設置方法を紹介します。

テンプレートに追加する自動タグ

storytext.thtml, featurestorytext.thtml等

  <ul class="socialbtn_right">
    <li><g:plusone href="{site_url}/article.php/{story_id}"></g:plusone></li>
    <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" data-text="[■■■]{title}" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
    <li class="fblike"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.■■■■■.■■■%2Farticle.php%2F{story_id}&amp;width=150&amp;height=20&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=true&amp;appId=■■■■■■■■■■■■■■■" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;" allowTransparency="true"></iframe></li>
  </ul>

Google +1 非同期用のコードをフッタに追加する

+1 ボタンの JavaScript を非同期に含めるには、footer.thtmlに次のコードを追加します。

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'ja-JP'
      };

      (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>

article/article.thtml等、表示URLのテンプレートのコンテンツフッタ部

<div class="social">
  <h4>共有のお願い</h4>
  <p>お役に立ちそうでしたら共有をよろしくお願いします。</p>
  <ul class="socialbtn">
    <li><g:plusone></g:plusone></li>
    <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" data-text="[{site_name}]{story_title}" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
    <li class="fblike"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.■■■■■.■■■%2Farticle.php%2F{story_id}&amp;width=150&amp;height=20&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=true&amp;appId=■■■■■■■■■■■■■■■" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;" allowTransparency="true"></iframe></li>
  </ul>
</div>

style に以下を追加

div.social {
  clear: both;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #efefef;
  padding: 0.2em 1em;
  margin: 2em;
  min-height: 9em;
}

ul.socialbtn{
  float:left;
  padding:0;
  margin:0 0 0.7em 2em;
  list-style-type: none;
  display: block;
}
ul.socialbtn li{float:left; width:81px !important; margin:0 0 0 8px !important;}
ul.socialbtn li:first-child{width:65px !important; margin-left:0 !important;} 

ul.socialbtn_right {
  float:right; padding:0; margin:0;
  list-style-type: none;
  display: block;
  padding: 0 6em 0 0;
}
ul.socialbtn_right li{float:left; width:81px !important; margin:0 0 0 8px !important;}
ul.socialbtn_right li:first-child{width:70px !important; margin-left:0 !important;} 
ul.socialbtn_right li.fblike{width:170px}