Facebookの投稿を埋め込む!スマホ画面はみ出す問題の対策【ブログのトラブル】

2018年11月25日ブログ運営の問題解決

Facebookの投稿を埋め込む方法

ブログの記事に、Facebookの投稿を埋め込むことがありますね。クチコミなどを紹介するときに便利です。

その際、ある設定を忘れると、スマホで見たときに画面からはみ出してしまう問題が起きます。

今日はFacebookの投稿を埋め込む方法と、スマホ画面で見たときにはみ出さないようにする設定を書いていきます。

 

Facebook投稿をそのまま埋め込んだときの表示

スマホ画面のスクリーンショットを撮っておきましたが、このように表示されます。

Facebook投稿のコードをそのまま埋め込むと、スマホで表示したときに画面からみ出す。

PCのブラウザで見る分には問題ないのですが、たいていのサイトはスマホで読まれることが多いので、レスポンシブに対応したWebデザインを考慮しておきたいところです。

 

Facebook投稿をスマホ画面ではみ出さないようにする設定方法

本サイトの記事を作成したときを例にして、説明します。
管理人は Windows10 と Chrome を使用しているので、他のブラウザや環境だと表示が異なるかもしれません。

 


Facebookの投稿の右上にある「…」をクリックしてメニューを開き、「埋め込み」をクリックします。
投稿の右上にある「…」をクリックしてメニューを開き、「埋め込み」をクリック。

 


ポップアップが表示されるので、「詳細設定」をクリックします。
[投稿を埋め込む]ウィンドウ。「詳細設定」をクリックする。

ここに表示されているコードを埋め込むこともできますが、このままだと500ピクセルの横幅で表示されるため、スマホで見たときに画面からはみ出てしまいます。

 


ブラウザの新しいタブに次の画面が表示されます。

『コードジェネレーター』という部分の「投稿のピクセル幅」に表示するときのピクセル幅(横幅)を入力します。
最小で 350 ですが、スマホ画面だとそれでもギリギリくらいなので 350 で良さそうです。
[コードジェネレーター]画面:ピクセル幅を入力して「コードを取得」をクリック。ピクセル幅を入力したら、「コードを取得」をクリックします。

コードを取得できるようになるまでには、数秒かかります。下の枠の部分に、Facebookの投稿を埋め込んだ時のプレビューが表示されるので、その後に「コードを取得」をクリックしてください。

 


ポップアップが表示されたら、「IFrame」タブをクリックします。
[IFrame]タブを選択して、埋め込みコードをコピー。あとは表示されているコードを選択・コピーして、ブログ記事に貼り付ければ完了です。

 

レスポンシブ対応のWordpressテーマで表示確認

ピクセル幅の設定を 350 にしたコードを埋め込んだ場合は、このように表示されます。

設定後はスマホ画面でもはみ出していない。

これでレスポンシブ対応のWordpressテーマでも、問題なくスマホ画面に収まるようになりましたね。

Twitterの場合も同じように埋め込みコードが取得できますが、こちらはとくに設定を変更せずとも、スマホ画面におさまって表示されてました。

 

それではまた、機会があれば。

Posted by タナカイ