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

JLS.co

Japan Life Specter

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

VALUES

f:id:JLSco:20161208224326p:plain

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

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

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

developers.facebook.com

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

画像1

f:id:JLSco:20161208225253p:plain

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

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

画像2

f:id:JLSco:20161208225434p:plain

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

↓↓↓↓↓↓

<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

f:id:JLSco:20161207234359p:plain

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

画像4

f:id:JLSco:20161207234656p:plain

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

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

画像5

f:id:JLSco:20161208230348p:plain

<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

f:id:JLSco:20161208230806p:plain

最後に

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