イロイロひとりごと

ブログのこと 日々のことをつぶやいています

<はてなブログ>Facebookページのページプラグイン設置方法

 当ブログには、広告・プロモーションが含まれています

昨日Facebookページの作り方を解説しましたが、できたFacebookページをブログに貼り付けて宣伝したいですよね!

いつもはマイペース更新のこのサブブログですが、

とのリクエストがありましたので、がんばって更新です(*´∀`*)

 

Facebookページの作り方はコチラでご確認くださいね!

happylife-tsubuyaki.hatenablog.com

 

以前はLike Boxと呼ばれていたのですが、仕様が変わっていまはPage Plugin(ページプラグイン)というモノになります。

 

これが実際のページプラグイン↓

はい、「いいね!」を押したら読み進めていってくださいねー(笑)

 

FacebookページのPage Pluginの設置

Facebookページができたら、さっそくはてなブログへページプラグインを設置していきましょう!

 

ページプラグインのコードを取得

まずはFacebookのdevelopersサイトに行きます。

developers.facebook.com

 

f:id:setuyakuhappylife:20160309120157p:plain

下のほうにいくと、URLを入れるところが出てきます。

ここでお好みの設定をします。

ブログURLではなく、FacebookページのURLを入れましょう!

f:id:setuyakuhappylife:20160309120216p:plain

「Tabs」にはタイムラインが表示される設定になっているので、いらない場合は消去。

幅、高さを指定したい場合は「Width」と「Height」に指定。

基本的には特に指定しないで、「Adapt to plugin container width」にチェックしておけば大丈夫!スマホにも縮小表示してくれます。

「 Show Friend's Faces」は、「いいね!」してくれた人の顔が表示されます。

下にすぐプレビューされるので便利ですね(*´∀`*)

 

希望の設定ができたら、「Get Code」をクリック。

f:id:setuyakuhappylife:20160309121743p:plain

これをコピペしますよ。

 

貼り付けたいところにコードをコピペ

まずは貼り付けたいところにプラグインの2のコードをコピペしましょう。

記事下や、サイドバーなどの貼り付けたい場所にいくつも設置可能です。

 

記事下に貼り付けてみますね。

デザイン設定のスパナマークのところから、記事を選択。

f:id:setuyakuhappylife:20160309122115p:plain

記事下の部分に貼り付けてください。

このとき、「記事ページをプレビュー」するようにしておかないと出てきませんので注意!

f:id:setuyakuhappylife:20160309122247p:plain

追加できたら保存して、記事ページを確認してみましょう。

f:id:setuyakuhappylife:20160309122512p:plain

無事設置できています(*´ω`*)

 

サイドバーの場合は、モジュールを追加します。

f:id:setuyakuhappylife:20160309122647p:plain

 

HTMLにコピペしましょう!

f:id:setuyakuhappylife:20160309122718p:plain

これでサイドバーにも表示されるようになります。

 

スクリプトの追加

以前はこれだけでは表示されませんでしたが、なぜかこのプラグインのコードを設置するだけで表示されるようになっていました(*´∀`*)

 

もし表示されていない場合は、プラグインの1のスクリプトコードを入れましょう。

 

管理画面>設定>詳細設定の下の方にある「headに要素を追加」にコードをいれます。f:id:setuyakuhappylife:20160309123233p:plain

「変更する」で保存できたら、表示されているハズです。

 

まとめ

はい、お疲れさまでした。

以前設置したときには、コードを<body>に入れるとなっているのでやってみたけどうまくいかなくて苦労しました。<head>にいれることで設置できましたけどね。

なぜかいまはスクリプトコードを入れなくても表示されていました!

私のブログでどこかに入っているだけかな…?それともはてな側で対応したのかな??

 

まずはページプラグインのコードを作ってみて、設置したい場所に2のコードを入れてみてくださいね!

もし表示されなかったら、1のコードを入れてみてくださいねー(*´∀`*)

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。