bloggerとフェイスブックページを連携!ガジェット応用編2

製作 blogger初心者講座

2016/11/09(水)

blogger初心者講座第9回:フェイスブック連携

前回はbloggerとツイッターの連携方法を紹介しました。ガジェット応用編として今回はフェイスブックページをbloggerに表示させる方法を詳しく見ていきますね。

お店のブログなんかだとフェイスブックを載せてアピールしたい場合も多いですよね。

その前に…フェイスブックページって?

フェイスブックとフェイスブックページ、似ているのですが実はチョットした違いがあります。フェイスブックというのは本名で登録するみんなが使っているフェイスブックです。

かたやフェイスブックページというのはフェイスブックをしている人が自由に作ることの出来るページのコトです。例えば会社紹介のフェイスブックページや、ネイルサロンサービスなどサービスについて紹介したフェイスブックページなど、自由に作ることが出来ます。

そしてbloggerに連携できるのはフェイスブックページのみだというコト。みんなよく使っているフェイスブックはbloggerと連携する事が出来ません。(blogger含めアメブロのようなその他のブログ、さらにワードプレスでもフェイスブックとは連携できません。)

フェイスブックページと連携

それではフェイスブックページとbloggerの連携をしてみましょう!今回もまずはフェイスブック側から操作していきますね。以下のサイトにアクセスして自身のフェイスブックページの埋め込み設定を行っていきます。

フェイスブック側の操作

blogger75

アクセスするとこんな入力欄が出てきます。自分のフェイスブックページのURLを「FacebookページのURL」の欄に入力しましょう。

他の設定は特にしなくても大丈夫です。

でもその他の設定も気になる!
カンタンにですが各設定項目の説明を書いておきますね。
タブ
ブログに表示する内容を変更できます。timeline、events、messagesなどから選べます。
幅、高さ
ガジェットの幅と高さを設定できます。幅についてはチェックボックスの「plugin containerの幅に合わせる」を有効にしていると自動で調整してくれるので設定不要です。高さはガジェットを表示するスペースが限られている場合に設定します。
スモールヘッダーを使用
ガジェットのヘッダー(カバー写真が表示されているところ)の高さが小さくなります。表示できるスペースが限られているときに設定します。
plugin containerの幅に合わせる
自動で枠内に収まるように幅を調節してくれます。
カバー写真を非表示にする
カバー写真が消えます。
友達の顔を表示する
「いいね」してくれた人の写真が表示されます。

blogger76

自分のフェイスブックページのURLを入力した後チョット下の方にある「コードを取得」ボタンを押すとこんな風にコードが表示されます。

二つともコピーして使います。

blogger側でガジェット追加

ココからはいつもどおり。bloggerにガジェットを追加していきますね。

blogger59

ガジェットを追加するには「レイアウト」でした。

またフェイスブックやツイッターなど、外部のサービスを入れるときは「HTML/javascript」を選ぶんでしたね。

blogger77

先ほどフェイスブック側の操作で手に入れたコードを二つともココに貼り付けましょう。

順番はどちらが先でも構わないのですが、両方のコードをちゃんと貼り付けるのが大事です。

貼り付け終わったら保存して、完了!

ブログを確認してみて、フェイスブックページとちゃんと連携できているか確認してみてください。

フェイスブックページと連携してアピールしよう

今回はフェイスブックページとbloggerを連携する方法を画像付きで紹介しました。

フェイスブックページとbloggerを連携するコトでfacebookを通じてブログを広げることが出来ますので、お店やサービスを展開されている方はぜひ連携してみてくださいね!