Facebookの投稿を埋め込む！スマホ画面はみ出す問題の対策
ブログの記事に、Facebookの投稿を埋め込むことがありますね。クチコミなどを紹介するときに便利です。
その際、ある設定を忘れると、スマホで見たときに画面からはみ出してしまう問題が起きます。
今日はFacebookの投稿を埋め込む方法と、スマホ画面で見たときにはみ出さないようにする設定を書いていきます。
Facebook投稿をそのまま埋め込んだときの表示
スマホ画面のスクリーンショットを撮っておきましたが、このように表示されます。
PCのブラウザで見る分には問題ないのですが、たいていのサイトはスマホで読まれることが多いので、レスポンシブに対応したWebデザインを考慮しておきたいところです。
Facebook投稿をスマホ画面ではみ出さないようにする設定方法
本サイトの記事を作成したときを例にして、説明します。
管理人は Windows10 と Chrome を使用しているので、他のブラウザや環境だと表示が異なるかもしれません。
Facebookの投稿の右上にある「…」をクリックしてメニューを開き、「埋め込み」をクリックします。
ポップアップが表示されるので、「詳細設定」をクリックします。
ここに表示されているコードを埋め込むこともできますが、このままだと500ピクセルの横幅で表示されるため、スマホで見たときに画面からはみ出てしまいます。
ブラウザの新しいタブに次の画面が表示されます。
『コードジェネレーター』という部分の「投稿のピクセル幅」に表示するときのピクセル幅（横幅）を入力します。
最小で 350 ですが、スマホ画面だとそれでもギリギリくらいなので 350 で良さそうです。
ピクセル幅を入力したら、「コードを取得」をクリックします。
コードを取得できるようになるまでには、数秒かかります。下の枠の部分に、Facebookの投稿を埋め込んだ時のプレビューが表示されるので、その後に「コードを取得」をクリックしてください。
ポップアップが表示されたら、「IFrame」タブをクリックします。
あとは表示されているコードを選択・コピーして、ブログ記事に貼り付ければ完了です。
レスポンシブ対応のWordpressテーマで表示確認
ピクセル幅の設定を 350 にしたコードを埋め込んだ場合は、このように表示されます。
これでレスポンシブ対応のWordpressテーマでも、問題なくスマホ画面に収まるようになりましたね。
Twitterの場合も同じように埋め込みコードが取得できますが、こちらはとくに設定を変更せずとも、スマホ画面におさまって表示されてました。
それではまた、機会があれば。