Facebookページの埋め込み方法を説明します。埋め込み方法はコードを取得して貼り付けるだけです。プラグイン・htmlの設定方法、またレスポンシブの設定もご紹介します。Facebookのタイムラインに投稿し、ホームページを更新していきましょう。
Facebookページをサイトに埋め込み方法について説明します。
サイトに貼り付ける用のコードを上のリンクより取得します。
リンクをクリックすると、ソーシャルプラグインのページプラグインの画面が表示されます。FacebookページのURLを入力してください。
FacebookページのURLはFacebookページのホーム画面を開いたときに表示されるURLです。
URLを入力するとその下にサイトに貼り付けた際のFacebookページのプレビューが表示されます。
タイムライン・イベント・メッセージの三種類が設定でます。入力する場合は”timeline””events””messages"で入力し、複数使う場合は,(カンマ)で区切り、入力してください。
幅のサイズは180〜500px設定できます。
高さのサイズは70px〜設定できます。
表示オプションには"スモールヘッダーを使用"・"plugin containerの幅に合わせる"・"カバー写真を非表示にする"・"友達の顔を表示する"の4つがあり、それぞれチェックを入れることで設定できます。
| スモールヘッダーを使用 | スモールヘッダーにチェックを入れると、上の画像のようにヘッダーの高さが低くなります。 |
| plugin containerの幅に合わせる | ページに幅を合わせるので、レスポンシブWebデザインを導入しているホームページなど、デバイスにより横幅が変わるサイトの場合はチェックを入れると便利です。
|
| カバー写真を非表示にする | カバー写真が表示されなくなります。 |
| 友達の顔を表示する | 「いいね！」をした友達のプロフィール写真が表示されます。 |
ページプラグインで取得したコードをサイトの指定の場所に貼り付けることで簡単にFacebookページをサイトに埋め込めます。コードの取得方法とサイトへの貼り付け方法についてこれからご紹介します。
”Facebookの公開ページのURL”・”タブ”・”幅”・”高さ”・”表示オプション”の入力設定が完了したら、レビューの右下にある”コード取得”をクリックしてください。
1 / 4
続きを読む