はてなブログにFacebookのPage Pluginを導入する方法

はてなブログFacebookのPage Pluginを導入する方法を紹介したいと思います。

ぼくのブログの記事の下にあるこれですね!

f:id:gorogororoll:20150908114433j:image

いいね!してもらうことでブログの固定読者を増やす。ブログを拡散させたい。などの理由がありますが、導入した1番の理由はあるとやっぱりカッコいいからです‼︎(笑)

ブログは自分の分身だと思っているのでしっかり見た目もカスタマイズしてカッコよくさせていきたいんです(^^)

導入方法

をまずはクリックして下さい。

このように表示されましたか?
f:id:gorogororoll:20150908120202p:image
では赤色で囲っているところに必要事項を入力していきます。

必要事項を入力

拡大するとこんな感じです。

f:id:gorogororoll:20150908105213p:plain

1.(赤色の丸)のところにFacebookページのURLを入力します。Facebookでブログのアカウントを作るときに入力したものを入力して下さいね。(自分のブログのURLではありません)
f:id:gorogororoll:20150908121616p:image
ここに入力したURLです。

2.(黄色の丸)自分のブログに設置するときの横幅を決めます。ぼくは500と入力して下さい。横幅いっぱいに表示したかったので。

3.(青色の丸)自分のブログに設置するときの高さを決めます。ぼくは165で設定しています。
注)幅は、280~500pxの間でしか設定できません。高さは、130px未満には設定できません。

オプションの設定

f:id:gorogororoll:20150908111155p:plain

赤色で囲われているところを説明していきます。(チェックを入れれば反映されます)

・Adapt to plugin container width

これは何が変わるのか分かりませんでした。ですがチェックは入れておいて下さい。

・Show Friend’s Faces 

いいね!してくれている方々のプロフィール画像を表示するか、しないか

f:id:gorogororoll:20150908155537j:image

残念ながらまだ誰にもいいね!されてないので誰も表示されませんw 本来ならいいね!くれた人のプロフィール画像が表示されます。

・Show Page Posts

Facebookページの投稿を表示するか、しないか

f:id:gorogororoll:20150908155712j:image

自分が投稿した内容が下に表示されます。

Hide Cover Photo

ヘッダー画像を表示するか、しないか

f:id:gorogororoll:20150908155526j:image

・Use Small Header

ヘッダーの画像が少し小さくなります。

f:id:gorogororoll:20150908155754j:image

 好きなものに出来たら、左下のGet Codeを押して下さい‼︎

コード

するとコードが表示されますので自分のはてなブログにコードを書き込みます。

f:id:gorogororoll:20150908111215p:plain

上の青色で囲ったコードはコピーして

ダッシュボード→設定→詳細設定→headに要素を追加

のところにそのまま貼り付けてください。

f:id:gorogororoll:20150908160938p:image

下の黄色で囲ったコードは作ったPage Pluginを設置したいところに貼り付けて下さい。

記事下に貼るなら

ダッシュボード→デザイン→カスタマイズ→記事→記事下

のところに貼り付ける!

これで完成です(^^)あなたのブログもかっこよくなりましたね‼︎