Geeklogソーシャルボタン(Social button)の設置
- Wednesday, September 25 2013 @ 05:12 PM JST
- 投稿者: Admin
- 表示回数 154,350
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}&width=150&height=20&colorscheme=light&layout=button_count&action=like&show_faces=true&send=true&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}&width=150&height=20&colorscheme=light&layout=button_count&action=like&show_faces=true&send=true&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}