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

普通ですが、こんな感じに設置可能です。
スポンサードリンク
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つのソーシャルボタンを設置することができました!
の場所がよくわかりません><。
教えていただけるとありがたいですm(_ _)m
記事の文章の修正を致しましたのでよろしくお願いいたします。
もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
この画像のように上下に黒枠が出てしまう場合、
こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか?
<%topentry_image>は非公開変数のため、私も<%topentry_image>が使用可能であることは知りませんでした・・・(>_<)
おそらく、<%topentry_image>の方が使い勝手がいいと思います。
> ありがとうございます!とても助かっています!
>
> もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
> http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
> この画像のように上下に黒枠が出てしまう場合、
> こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか?