はてなブログでソーシャルボタンをカスタマイズする方法(オリジナル画像対応)
Twitterのツイートボタンやfacebookのシェアボタンのように、ブログの記事を共有・拡散したい場合には、記事に埋め込まれているソーシャルボタンをクリックします。
このソーシャルボタンは各SNSごとにデザインが決められていますので、デザインに統一性がありません。各SNSのボタンを共通のデザインにしたい場合は、自分でコードを書く必要があります。
ここでは、そのソースコードをご紹介します。
各SNSのソースコード
ここでは、
のソースコードをご紹介します。
なお、<a>タグで囲まれるのは、テキストでも、画像(<img>タグ)でもOKです。
もしオリジナル画像があればぜひ活用してください。
はてなブックマーク
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={Permalink}&title={Title}">はてなブックマーク</a>
<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">
となります。
<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>
<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>
挿入場所
管理画面のメニューから【デザイン】<【カスタマイズ(レンチアイコン)】<【記事】を選択。
記事上もしくは記事下のどちらかに用意したソースコードを貼り付けてください。
オリジナルデザインの場合、ソーシャルボタンは記事ページのみ表示できます。
記事一覧ページは表示できません。
もし記事一覧ページにもソーシャルボタンを表示したい場合は、オリジナルデザインではなく、はてなブログのソーシャルパーツを利用してください。表示させたい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のアカウント名です。各自のアカウント名に修正してください。
オリジナルのソーシャルボタンはこうなります。
他のブログと差別化したい場合や、自分のブログに合うデザインにしたい方はぜひチャレンジしてみてはいかがでしょうか?
ではでは、またー!