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

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

Facebookの投稿を埋め込む方法

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

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

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

 

設定を忘れたときの Facebook 投稿

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

スマホ画面で見るとはみ出す

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

 

Facebook の投稿を埋め込む方法

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

 


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

 


ポップアップが表示されるので、「詳細設定」をクリックします。
「詳細設定」をクリック

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

 


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

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

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

 


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

 

レスポンシブ対応のWordpressテーマでも

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

スマホ画面でもはみ出さない

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

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

例として使用した記事はこちらになりますので、興味のある方は実際の表示を確認してみてください。

 

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

 

▼ スポンサーリンク ▼

Posted by かいと