はてなブログにfacebookページをサイドバーに表示させる方法

　LifeSpecterです。はてなブログを活用している人は、Facebookページにてシェアしてる人も多いと思います。サイトの訪問者にFacebookでの操作と同様Facebookページに「いいね！」したりシェアしたりできるボタンをはてなブログのサイドバーに表示させる方法について書きたいと思います。

 ステップ1 facebookページボタン作成

facebookページボタン作成にアクセスします。下記にリンクを貼っておきます。

developers.facebook.com

リンク先にアクセスすると、画像1が表示されます。

画像1

画像1を下へスクロールすると、画像2に辿りつきます。

画像2の赤丸箇所のコードをコピーします。

画像2

下記をコピーしても大丈夫です。

↓↓↓↓↓↓

<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false" 
  data-show-posts="false"></div>

ステップ2 はてなブログに挿入する

　自身のはてなブログの「デザイン」→「カスタマイズ」→「サイドバー」へ移動します。移動すると画像3が表示されます。モジュールの追加をクリックします。

画像3

　モジュールの追加をクリックすると、画像4が表示されます。そこで「HTML」をクリックします。

画像4

　「HTML」をクリックしたら、画像5のように任意の題名を入力し、下のコードを入れるところに先ほど画像2でコピーしたコード、またはステップ1の黒枠内のコードをペーストします。画像5の赤四角の部分に表示させたいfacebookページを入れます。

　最後に適用をクリックします。変更を保存をクリックすることをお忘れなく。

画像5

<div class="fb-page" 
  data-href="表示させたいfacebookページのアドレスを入れる"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false" 
  data-show-posts="false"></div>

ステップ3 表示確認

　画像6のように表示されることを確認したら、完成です。

画像6

最後に

　はてなブログにfacebookページをサイドバーに表示することができました。facebookページボタン作成サイトにて、ボタンの仕様をカスタマイズすることができます。興味のある方は実施してみても面白いと思います。