TwitterやFacebookなどWebサイトにタイムラインを埋め込んだコンテンツが増えています。タイムラインをWebサイトに埋め込む方法はTwitterやFacebook、YouTubeなど各SNSによって方法が違うので、それぞれ埋め込み方を覚えておきましょう。
この記事では、「WebサイトにFacebookを埋め込む方法」について解説します。
- WebサイトにFacebookを埋め込む方法
WebサイトにFacebookを埋め込む手順
WebサイトにFacebookを埋め込む方法については、まずはこちらの動画をご覧ください。
Facebookを埋め込む手順
Facebookを埋め込む手順としては次のとおりです。
- 埋め込みたいFacebookのURLをコピーする
- facebook埋め込みページ作成プラグインサイトのページにアクセスする
- FacebookページURLの入力欄に、コピーしたURLを貼り付ける
- 幅と高さに数値を入力する
- 「plugin containerの幅に合わせる」にチェックを入れる
- コードを取得をクリック
- IFrameタグを選び、コードをコピーしてテキストエディタのHTMLファイルに貼り付ける
埋め込むFacebookのURLをコピー
埋め込みたいFacebookのURLをコピーします。ここでは、ウォンテッドリー様のfacebookを使用します。
facebook埋め込みページ作成プラグインサイトのページにアクセス
facebook埋め込みページ作成プラグインサイトのページにアクセスし、コピーしたURLを入力します。
各項目への入力とplugin containerの幅に合わせるにチェック
表示させたい幅と高さを入力し、plugin containerの幅に合わせるにチェックを入れます。
コードを取得
コードを取得をクリックします。
IFrameのタブを選択
モーダルウィンドウが表示されるので、IFrameのタブを選択します。
コピーしたコードをテキストエディタに貼り付け
そして、コードをコピーしてテキストエディタのHTMLファイルに貼り付けます。
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fwantedly%2F&tabs=timeline&width=400&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>出力結果
「plugin containerの幅に合わせる」にチェックをいれておくと、表示幅に合わせてFacebookのタイムラインが調整されます。ただし、画面を更新しないと調整されません。
まとめ
facebookを埋め込む方法について解説しました。SNSのタイムラインをコンテンツの一部として採用しているWebサイトは増えてきています。埋め込む手順を覚えていきましょう！
Facebook埋め込みまとめ
- facebook埋め込みページ作成プラグインサイトで埋め込み作業を行う
- 「plugin containerの幅に合わせる」にチェックを入れると、表示幅に合わせられる
- Facebookのタイムラインは、最大表示幅が決まっている
