FC2ブログにはてなブックマークボタンを設置

概要：FC2ブログにはてなブックマークボタンを設置

前回はBloggerの記事フッター部にはてなブックマークボタンを設置する方法をご紹介しましたが、今回はFC2ブログ編です(^-^)

Blogger編についてはこちらをご参照。

⇒　Bloggerの記事フッター部に「はてなブックマークボタン」を設置

FC2はデフォルトで各記事ごとに「Facebook」、「twitter」のソーシャルメディアボタンが設置されています。

ソーシャルメディアボタンで有名どころには、Google＋ボタン、はてなブックマークボタン、Mixiボタンなどがあります。

特にはてなブックマークボタンは有名で、登録している人も多いことから、このボタンを設置することでより多くの人にブックマークしやすい環境を提供できます。
今回は、「はてなブックマーク」、「Facebook」、「twitter」を並べて設置する手順をご紹介します。

手順：FC2ブログにはてなブックマークボタンを設置

１．ソーシャルブックマークボタンをオフにする

この方法を実施する時、事前にFC2ブログのサービスのボタン設置機能をオフにする必要があります。
FC2ブログの管理画面の[環境設定の変更]　→　[ブログの設定]　→　[記事の設定]の中に各種ボタンの設定項目があるので、そこでボタンの設置をオフにします。

２．はてなブックマークボタンの設置

FC2ブログへログイン　→　[テンプレートの設定]　→　
「HTML編集」の下にソースがあるのでここを編集します。

<div class="content" id="e<%topentry_no>">
<div class="entry_body">
<%topentry_body>

上記のソースを見つけ出し、下記対象ソースをその直下に貼り付けます。

[対象ソース]

<div class="sns_button">
<ul>
<li><a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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><iframe src="//www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&send=false&layout=button_count&width=110&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:110px; height:21px;" allowTransparency="true"></iframe></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li>
</ul>
</div>

貼り付け終わったら更新ボタンをクリックします。

次のような画像が表示されていれば成功です。



簡単にできますので是非お試し下さい。

スポンサードリンク