HacoLife

シンプルなデザインが好き。中古で購入した平屋をリフォームして暮らす「はこ生活」しています。

はてなブログでソーシャルボタンをカスタマイズする方法(オリジナル画像対応)

f:id:mr58n:20141106190155j:plain

Twitterのツイートボタンやfacebookのシェアボタンのように、ブログの記事を共有・拡散したい場合には、記事に埋め込まれているソーシャルボタンをクリックします。

このソーシャルボタンは各SNSごとにデザインが決められていますので、デザインに統一性がありません。各SNSのボタンを共通のデザインにしたい場合は、自分でコードを書く必要があります。

ここでは、そのソースコードをご紹介します。

SNSソースコード

ここでは、

ソースコードをご紹介します。

なお、<a>タグで囲まれるのは、テキストでも、画像(<img>タグ)でもOKです。
もしオリジナル画像があればぜひ活用してください。

はてなブックマーク

<a href="http://b.hatena.ne.jp/add?mode=confirm&url={Permalink}&title={Title}">はてなブックマーク</a>

Twitter

<a href="http://twitter.com/share?url={Permalink}&text={Title}&via=【ツイッターアカウント名】">Twitter</a>

私のツイッターアカウントはmr58nなので、

<a href="http://twitter.com/share?url={Permalink}&text={Title}&via=mr58n">

となります。

facebook

<a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">facebook</a>

Google+

<a href="https://plus.google.com/share?url={Permalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">Google+</a>

pocket

<a href="http://getpocket.com/edit?url={Permalink}&title={Title}" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

挿入場所

f:id:mr58n:20141106184753j:plain

管理画面のメニューから【デザイン】<【カスタマイズ(レンチアイコン)】<【記事】を選択。
記事上もしくは記事下のどちらかに用意したソースコードを貼り付けてください。

オリジナルデザインの場合、ソーシャルボタンは記事ページのみ表示できます。

記事一覧ページは表示できません。
もし記事一覧ページにもソーシャルボタンを表示したい場合は、オリジナルデザインではなく、はてなブログのソーシャルパーツを利用してください。表示させたいSNSにチェックを入れて保存すれば記事一覧ページにも表示されます。

Simple Gray用のソーシャルボタンデザイン

はてなブログテーマの「Simple Gray」をお使いの方は、下記ソースコードを記事上or記事下に貼り付けることで、デザインに統一性を持たせたソーシャルボタンを設置することができます。

<div class="snsBtn">
<p>Share this:</p>
<ul>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={Permalink}&title={Title}"><i class="fa fa-hatena"></i></a></li>
<li><a href="http://twitter.com/share?url={Permalink}&text={Title}&via=mr58n"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://plus.google.com/share?url={Permalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>

※赤字はTwitterのアカウント名です。各自のアカウント名に修正してください。

オリジナルのソーシャルボタンはこうなります。

f:id:mr58n:20141106184946j:plain

他のブログと差別化したい場合や、自分のブログに合うデザインにしたい方はぜひチャレンジしてみてはいかがでしょうか?

ではでは、またー!