【カスタマイズ】オリジナルSNSボタンを記事ページに設置する方法

はてなブログデザインテーマ「Debriefing」の記事詳細ページにオリジナルのSNSボタンを設置する方法を紹介します。

やり方は簡単です。

管理画面から「デザイン」→「カスタマイズ」→「記事下」へと順番に進み、下記のコードをコピペして保存すれば完了です。

<div class="social-button-area">
  <ul class="social-button">
    <li>
      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br><span class="hatebu-count share-text">Hatena</span></a>
    </li>
    <li>
      <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i><br><span class="facebook-count share-text">Facebook</span></a>
    </li>
    <li>
      <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href,'TwitterWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
    </li>
    <li>
      <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="blogicon-chevron-down lg"></i><br><span class="share-text">Pocket</span></a>
    </li>
  </ul>
</div>

CSSに関しては本テーマにスタイルが既に適用してありますので、上記のソースを貼り付けるだけで記事詳細ページに簡単にオリジナルのSNSボタンを設置することができます。

対応しているSNSボタンの種類は「はてなブックマーク」「Facebookシェアボタン」「ツイッター」「Pocket」の4種類のみです。