読者です 読者をやめる 読者になる 読者になる

どんべーと呼ばれて早幾年

社会に踊らされ続けるゆとり世代から見える日常を自由気ままに書き連ねます。

はてなブログの記事上にソーシャルボタンを設置する方法

f:id:DoNbeh_G:20150119142330j:plain

はてなブログのカスタマイズ【ソーシャルボタン編①】

週末に"はてなブログの記事上にソーシャルボタンを設置"してみました。
せっかくなので、今回はその方法を紹介させていただきます。

【2015/03/20追記】
この記事の閲覧数がちょこちょこ上がるので、ソーシャルボタンの設置に困っているはてなブログユーザーの方は、意外といるんじゃないかと思います。
よろしければ、当ブログを有効活用してみてください。また上手く設置できた場合は、この記事のソーシャルボタンをポチッとワンクリックしていただけると嬉しいです!
ソーシャルボタン:はてなブックマーク、facebookシェア、facebookいいね、tweet、google+、pocket

まず参考にさせていただいたサイトはこちらです。はてなブログの記事上に吹き出し型のソーシャルボタンを設置する方法 - FutureInsight.info


記事中に掲載されているコードをコピペで埋め込んでみたのですが
残念ながら、僕のブログ・閲覧環境とは
どうも相性が良くないらしく、デザイン崩れが発生してしまいました。
f:id:DoNbeh_G:20150119145104p:plain

そのため、はてなブログのコード形式に整えて再トライ。
問題なく設置完了です。
f:id:DoNbeh_G:20150119145657p:plain


ちなみにPC版にはfacebookのいいね!ボタンを新しく追加しています。
実際のコードを以下です。
そのままコピーして、汎用的に使えるようにしてありますので試してみてください。

ソーシャルボタンの埋め込みコード【PC編】

<!-- PC記事上ソーシャルボタン -->
<div class="social-buttons">
    <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
    <div class="fb-share-button" data-layout="box_count" data-href="{Permalink}"></div>
    <div class="fb-like" data-href="http://b.hatena.ne.jp/entry/{Permalink}" data-layout="box_count" data-action="like" data-show-faces="true"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-count="vertical" data-lang="ja">Tweet</a>
    <div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>
    <a data-pocket-label="pocket" data-save-url="{Permalink}" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
</div>
<!-- PC記事上ソーシャルボタンおわり -->


またスマホ版の方にはLINEで送るボタンも追加で設置しました。
f:id:DoNbeh_G:20150119151254p:plain

ソーシャルボタンの埋め込みコード【PC編】

<!-- SP記事上ソーシャルボタン -->
<div class="social-buttons">
    <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
    <div class="fb-share-button" data-layout="box_count" data-href="{Permalink}"></div>
    <div class="fb-like" data-href="http://b.hatena.ne.jp/entry/{Permalink}" data-layout="box_count" data-action="like" data-show-faces="true"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-count="vertical" data-lang="ja">Tweet</a>
    <div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>
    <span><script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
    <script type="text/javascript">new media_line_me.LineButton({"pc":false,"lang":"ja","type":"e"});</script>
    </span>
    <a data-pocket-label="pocket" data-save-url="{Permalink}" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
</div>
<!-- SP記事上ソーシャルボタンおわり -->


LINEで送るボタンの仕様は公式サイトに掲載されていたので
こちらを参考にさせていただきました。設置方法|LINEで送るボタン


現在使用しているソーシャルボタンの設置方法はこちら▼
blog.donbe.me

ソーシャルボタン/SNSボタン/シェアボタン/設置方法/初心者/簡単/