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

ウィジェット

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

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

で、全部英語なのですが、やることは簡単です。 1507020005 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にて試しました。)

1507020006

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

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

以上。

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

タイトルとURLをコピーしました