Categories: ウィジェット

facebookのウィジェットを埋め込む

旧ウィジェットの「Like Box」は廃止されています。
https://developers.facebook.com/docs/plugins/like-box-for-pages

なので、ページプラグインなるものを使います。
https://developers.facebook.com/docs/plugins/page-plugin

で、全部英語なのですが、やることは簡単です。 Facebook Page URL
フェイスブックページのURLを入れます。

Width
ウィジェットの横幅ですね。 先日まで横幅の最小幅が280pxだったのですが、いつのまにか最小幅180pxになってました。 つい最近、220幅のサイドバーに入れる案件があって、苦労したのですが、これで、狭いサイドバーにも入れやすくなりましたね。

Height
高さを入れます。

Adapt to plugin container width
親要素に併せて、幅が調整されるようになります。 レスポンシブデザインなんかでは、Widthは最大の500を入れて、これにチェックをいれておけばいいですね。
ただ、読み込んだ時点で幅をきめるので、表示後にウィンドウ幅を変更しても追随しません。

Show Friend’s
Faces facebook のフレンドアイコンを表示するにはチェック。

Use Small Header
ヘッダー画像を小さめにしたいときはチェック。

Hide Cover Photo
ヘッダーそのものを非表示にしたいときはチェック。

Show Page Posts
投稿を非表示にしたいときはチェックを外す。

設定できたら、[Get Code]をクリック。 (Chromeだと、この記事を作成した時点では、うまく表示されないので、IEにて試しました。)

1. Include the JavaScript SDK on your page once, ideally right after the opening  tag.

とあるので、1 のコードは、bodyの開始タグ直後に貼り付けます。

2. Place the code for your plugin wherever you want the plugin to appear on your page.

2のほうを、ウィジェットを表示させたいところに貼り付けます。

以上。

ちなみに。
貼り付けて動作を確認しようとすると、なぜか表示されずなんでだろう?とあたふたしていたのですが、どうやら、Chromeでシークレットモードではウィジェットは表示されないようです。
また、WordPressにログインした状態でもうまく表示されないことがあるようです。

nakaike

Share
Published by
nakaike
Tags: facebook