Facebookページのタイムラインをワードプレスサイトに埋め込むには?の巻

Pocket

facebookは頻繁に仕様が変わってよくわからなくなりやすいし、こうか!と思ったらあっという間に変わってたりして今まで出来てたことができなくなっちゃたみたいなことも起こってしまったりする。。。。

なので『Facebookのタイムラインをサイトに埋め込んどいてください』なんてことがあると、『どうやるんだったっけ?』『まだいけるのかな?』なんてなる笑

実際Facebookのデベロッパーツールも結構変化してるみたいで、、、、
該当するツールページにたどり着くのにもサクッと行きづらかった笑

でもワードプレス5.〜バージョンでも普通に活用できたのでこのタイミングでの備忘録をしておきたいと思います。

ということで今回はfacebookページのタイムラインを埋め込む手順などについてです……….

facebookタイムラインうめこみ

〜〜項目〜〜〜〜〜〜〜〜〜〜〜

❤︎1、facebook for developers を使う

❤︎2、facebook個人アカウントのタイムラインは埋め込めない

❤︎)3、facebook ページのタイムラインを埋め込む手順
(ワープレ新エディタGutenbergでも貼れる)

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎1、facebook for developers を使う

仕様やページが更新されてしまうので分かりづらかったりしますが、笑

facebookページをサイトに埋め込むには、
『facebook for developers』を使えば楽に埋め込めます。

ワードプレス新エディタGutenbergでは、 Facebook埋め込みブロックもあるのでそれで簡単にできるのかと思いきや、

投稿1つづつを埋め込むことはできるようですが、
タイムラインは埋め込めませんでした。

なのでいまのところ 『facebook for developers』を使うのが良いようです。

❤︎2、facebook個人アカウントのタイムラインは埋め込めない

facebookは、『個人のアカウントのみでページは作成していない』という方も多いかもしれませんが、

現在、個人アカウントのTLを埋め込み、更新状況をサイトでも見られるようにすることはできないようです。

私も実際何度か試してみましたが、個人アカウントのTLの埋め込みは出来ませんでした。

ただ、個別投稿の埋め込み(投稿1つづ)は、公開範囲が全公開になっていれば可能なようです。

でもそれだと自動的に更新をキャッチ出来ないので、その投稿だけを埋め込みたい場合では有効ですが、企業などの宣伝、拡散には向かないですよね。。。

やはりページをちゃんと作成して育てていく方が良いかなと….

スポンサーリンク

❤︎3、facebook ページのタイムラインを埋め込む手順(ワープレ新エディタGutenbergでも貼れる)

ということで、facebookページタイムラインの埋め込み手順です。

『facebook for developers』でのfacebookページタイムラインを埋め込むためのページは、『facebook for developers』の膨大な情報の中でかなり探しづらいです笑

なので、

現段階で直に行けるURLをまず貼っておきますので、面倒な方はこちらからどうぞ
(※仕様変更によりまた変わってしまうのかもしれませんが..)↓

▶︎facebook for developers ページプラグイン

一応このページへの辿り着き方ですが、笑
(※仕様変更によりまた変わってしまうのかもしれません)

facebook for developersトップページ
▶︎https://developers.facebook.com/

トップページの下の方に、概要があり、そこの『ソーシャル統合』を開く↓

01_facebookdevelopers

ソーシャル統合ページのずっと下の方に、『ソーシャルプラグイン』というのがあります。それの概要を開く↓

02_ソーシャル統合のずっと下の方-ソーシャルプラグインの概要

そのページのまた下の方、『埋め込みコンテンツ:最適なFacebookコンテンツをサイトに』の概要を開く↓

03_埋め込みコンテンツ

さらにまたそのページの下の方に、『ページプラグイン』というのがあるのでそれの、『ドキュメント』を開く↓

04_ページプラグイン-ドキュメント

そうするとやっと下図のページにたどり着けます↓

05_ページプラグイン

このページで、埋め込みたいfacebookページのURLを記入して、タブ欄に、『timeline』と記入すればプレビューできます。
この時、横幅や縦の長さなども調整しておくのがベスト
(※『plugin containerの幅に合わせる』にチェックしておけば自動で貼り付け先の幅に合わせてくれます)↓

07_timeline

タブの部分を空欄にすると、ページのヘッダーのみなどにもできる。↓

08_ヘッダーのみ

設定できる幅の最大値は500で、それ以上には今のところできないと公式サイトに表記されています。

(※なので何らかの規定外の設定により最大幅をサイト幅に合わせようとしても、基本的にはサポートされないとされていますので500までが可能範囲と認識しておく必要あり。)

プレビューで確認したら、そのプレビューのすぐ下に、『コードを取得』というボタンがあるのでクリックして埋め込みコードを取得する。

『JavaScript SDK』でも、『IFrame』でも貼り付けできます。

※環境によっては『JavaScript SDK』でのコードだと表示されない場合もあるようですが、私の環境では表示されました。

単純にStep1のコードと、Step2のコードを順番にHTMLを貼り付けられる場所、
(ワードプレスの記事内とかだとカスタムHTMLブロック)にコピぺするだけ。

Iframeのコードはコピペすると表示されますが、ワードプレスのカスタムHTMLブロックに貼り付けて保存すると、『想定外か無効コンテンツがあります』てきなエラーメッセが表示されましたが。。。ブロックへ変換すればOK。

06_IFrame

このままコピペして保存してプレビューでそのWebページを確認してから編集画面にまた戻ってくると、下図のような、『このブロックには〜』の表示になります。

Gutenbergのブロックではこのままのコードでは解決が必要ってことなので、解決ボタンを押して解決策を確認します。↓

想定されていないコンテンツ

解決前(変換前)が左側、↓

このように変換すべきですよ、的な内容が右側に表示される。↓

Gutenbergでは画像などには、figureタグが付くのと、大文字はやめてってことなどみたいですねぃ……

で、HTMLに変換すると自分で手動で正す必要があるので、『ブロックへ変換』します。(自動的に直してくれる)↓

10_ブロックへ変換

変換して保存すればOK。

固定トップページ内、個別ページ内に埋め込むには上記のような感じでした。

ウィジェットに埋め込む場合(サイドバーやフッター)は、HTMLで単に

大文字を小文字にすればうまくいきました。

以上現場からお伝えしました。

ってことで楽しいクリエイトあれ!

しゃらんるあぁあああ❤︎

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ten − 6 =