昨日Facebookページの作り方を解説しましたが、できたFacebookページをブログに貼り付けて宣伝したいですよね!
いつもはマイペース更新のこのサブブログですが、
@motti_simple facebookページできました!プラグインの記事待ち中です^_^
— はっしー (@hasimt_sl) March 8, 2016
とのリクエストがありましたので、がんばって更新です(*´∀`*)
Facebookページの作り方はコチラでご確認くださいね!
happylife-tsubuyaki.hatenablog.com
以前はLike Boxと呼ばれていたのですが、仕様が変わっていまはPage Plugin(ページプラグイン)というモノになります。
これが実際のページプラグイン↓
はい、「いいね!」を押したら読み進めていってくださいねー(笑)
FacebookページのPage Pluginの設置
Facebookページができたら、さっそくはてなブログへページプラグインを設置していきましょう!
ページプラグインのコードを取得
まずはFacebookのdevelopersサイトに行きます。
下のほうにいくと、URLを入れるところが出てきます。
ここでお好みの設定をします。
ブログURLではなく、FacebookページのURLを入れましょう!
「Tabs」にはタイムラインが表示される設定になっているので、いらない場合は消去。
幅、高さを指定したい場合は「Width」と「Height」に指定。
基本的には特に指定しないで、「Adapt to plugin container width」にチェックしておけば大丈夫!スマホにも縮小表示してくれます。
「 Show Friend's Faces」は、「いいね!」してくれた人の顔が表示されます。
下にすぐプレビューされるので便利ですね(*´∀`*)
希望の設定ができたら、「Get Code」をクリック。
これをコピペしますよ。
貼り付けたいところにコードをコピペ
まずは貼り付けたいところにプラグインの2のコードをコピペしましょう。
記事下や、サイドバーなどの貼り付けたい場所にいくつも設置可能です。
記事下に貼り付けてみますね。
デザイン設定のスパナマークのところから、記事を選択。
記事下の部分に貼り付けてください。
このとき、「記事ページをプレビュー」するようにしておかないと出てきませんので注意!
追加できたら保存して、記事ページを確認してみましょう。
無事設置できています(*´ω`*)
サイドバーの場合は、モジュールを追加します。
HTMLにコピペしましょう!
これでサイドバーにも表示されるようになります。
スクリプトの追加
以前はこれだけでは表示されませんでしたが、なぜかこのプラグインのコードを設置するだけで表示されるようになっていました(*´∀`*)
もし表示されていない場合は、プラグインの1のスクリプトコードを入れましょう。
管理画面>設定>詳細設定の下の方にある「headに要素を追加」にコードをいれます。
「変更する」で保存できたら、表示されているハズです。
まとめ
はい、お疲れさまでした。
以前設置したときには、コードを<body>に入れるとなっているのでやってみたけどうまくいかなくて苦労しました。<head>にいれることで設置できましたけどね。
なぜかいまはスクリプトコードを入れなくても表示されていました!
私のブログでどこかに入っているだけかな…?それともはてな側で対応したのかな??
まずはページプラグインのコードを作ってみて、設置したい場所に2のコードを入れてみてくださいね!
もし表示されなかったら、1のコードを入れてみてくださいねー(*´∀`*)