BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» Facebookページをホームページに簡単に埋め込む方法

このエントリーをはてなブックマークに追加

Facebookページをホームページに簡単に埋め込む方法

   投稿日: 2016/10/29    投稿者:webコラム

お店や企業を知ってもらうという意味で
SNSを活用することは、もう当たり前の時代になってきています。


マーケティング活動におけるSNSツールで代表的なサービスは、
「Facebook」「Information」「Twitter」などがあります。


前回までは「Instagram」の埋め込み方法をご紹介してきましたが
今回は、Facebookの「Facebookページ」をホームページに埋め込む方法を
ご紹介していきます。
Facebookのプラグイン「Page Plugin」を利用します。


Facebookの内容を自分のホームページやブログに簡単に表示させることができ、
お店のFacebookページの存在はもちろん、コンテンツ発信を認知させたり、
「ファン」や「いいね!」を促すことができます。

blog201610291.jpg

ホームページで、このようなものを見たことあるのではないでしょうか。


20161021_image0000.jpg

1.Facebookのページプラグインの設定


Facebookのページプラグインにアクセスします。


20161021_image0001.jpg

2.情報の入力


20161021_image0002-1.jpg

・FacebookページのURL
表示させたいFacebookページのURLを入力します。


・タブ
タイムライン、イベント、メッセージの3種類のタブを表示することができます。
複数表示したい場合は、timeline,events,messagesのようにカンマで区切って入力します。


・幅
埋め込み時に表示させたい幅を180~500ピクセルの間で入力します。


・高さ
埋め込み時に表示させたい高さを入力します。(最低70ピクセル必要です。)


・表示オプション
スモールヘッダーを使用
プロフィール写真や背景画像の部分(ヘッダー)が小さくなります。


plugin containerの幅に合わせる
幅が可変するようなレスポンシブデザインの場合は、チェックを入れます。


カバー写真を非表示にする
プロフィールの背景画像を非表示にしてシンプルにします。


友達の顔を表示する
「いいね!」をしてくれた人のプロフィール写真が表示されます。


例として今回はこのように入力してみました。


20161021_image0003.jpg

blog201610292.jpg

3.コード取得


「コードを取得」をクリックします。

20161021_image0003-1.jpg

設置方法としては2パターンの方法がありますので、
用途やお好みでお選びください。


【方法1(Javascript SDK)】


20161021_image0004-1.jpg

・ステップ2のコード
コードをコピーして、表示したいホームページのHTMLソース内の<body>タグの直後に貼り付けます。


・ステップ3のコード
コードをコピーして、ホームページの表示したいところ(HTMLソース内)に貼り付けます。


WordPressやブログに設置したい方は上記の2つのコードをひとまとめにして
ウィジットやプラグインに貼り付けてください。



【方法2(iFrame)】


20161021_image0005-1.jpg

手軽に設置したい場合はインラインフレームでの設置が簡単です。
「iFrame」タブをクリックするとコードが表示されますので、
コピーして表示したいところ(HTMLソース内)に貼り付けるだけです。



4.まとめ


スマホなどで、Facebookページに投稿した内容が
ホームページやブログに埋め込んだFacebookページに連動して投稿されます。


ページプラグインの設置方法は簡単なので、
まだ埋め込んでいない方は是非チャレンジしてみてください。
Facebookページを有効活用してアクセスアップ・集客アップに繋げましょう!

blog201610293.jpg

カテゴリ:

TOPへ