FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
前の記事 ホーム 次の記事

ソーシャルボタンを設置しよう

2014年01月28日00:44  カテゴリ:カスタマイズ
このブログに設置しているような、3つのソーシャルボタンを設置について紹介したいと思います。

social.jpg

普通ですが、こんな感じに設置可能です。

HTML編集にて以下を設置したい箇所に貼り付けてください。
ただし、<!--topentry-->から<!--/topentry-->の間に記述してください。
FC2ブログ特有の変数を用いているので、うまく機能しなくなります。

<div id="social_box">

<li><div id="fb-root"></div>
<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.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<%topentry_link>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</li>

<li><a href="<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>

<li> <a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>"data-text="<%topentry_title> <%blog_name>" data-lang="ja" data-related="anywhereTheJavascriptAPI" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</div>





CSS編集にて以下を記述してください。場所はどこでも構いません。

/***************************************** ▼ ソーシャルボックス ▼ */
#social_box {
height:60px;
padding:10px;
border-top:1px dotted #999999; /* 上のドット線 */
border-bottom:1px dotted #999999; /* 下のドット線 */
}

#social_box li{
list-style-type:none;
float:right; /* 右詰め */
display:block;
}
/***************************************** ▲ ソーシャルボックス ▲ */



とてもシンプルですが、これで3つのソーシャルボタンを設置することができました!


  • このエントリーをはてなブックマークに追加
  • 前の記事 ホーム 次の記事