【Facebook】の公開ページのタイムラインをウェブサイトへ埋め込む方法
Webクリエイターの井上( @Kouki_Inoue0411 )です。
「Facebook」のページをウェブサイトに埋め込む方法をご紹介します。
このFacebookページをウェブサイトに埋め込むことで、ウェブサイトからの流入のユーザーの「いいね！」やフォロワーの獲得やファンの獲得等、マーケティング等にも効果があります。
※Facebookのページがある前提で進めます。
【Facebook for Developers】で埋め込みコードを作る
Facebook Developersとは、 ソーシャルメディア の1つであるfacebook上で追加でアプリが利用でき、それらを開発する際に必要なる情報やサービス、それらの総称をFacebook Developersと言います。
引用 : ferret Facebook Developer
Facebookが公式に運営している開発サイトです。
ここから公開ページのコードをエクスポートしていきます。
Facebook for Developers : https://developers.facebook.com/?no_redirect=1&ref=gray_bar_logo_click
ページプラグインから制作する
ページプラグインURL : https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
製作手順
- FacebookページのURLをコピーし貼り付ける
- 装飾する
- コードをエクスポート(出力)する
- WordPressやウェブサイトの任意の場所に貼り付ける
FacebookページのURLをコピーし貼り付ける
まずは、埋め込みたいFacebookページのURLをコピーします。
今回は、僕が運営しているサイト【KOKO.NET】のFacebookページで試してみます。
KOKO.NETのFacebookページの URL : https://www.facebook.com/koko.net.pro/
次にページブラグインに戻り、【FacebookページのURL】に貼り付けます。
貼り付けて、下のプレビューに表示されればコード取得可能なFacebookページです。
※プレビューに表示できなければ、埋め込み不可なFacebookページです。
装飾する
装飾と言ってもトップ画像を非表示にするや「いいね！」を押している友達を非表示にする等なのでプレビューを観ながら確認して好きな雰囲気のモノにしてください。
幅・高さ設定をされる方はここで行い、レスポンシブウェブデザインにする時は、無記入でOKです。
コードをエクスポート(出力)する
プレビュー確認後、良ければ下の【コードを取得】をクリックします。
すると、コードが表示されます。
今回は【iFreme】のコードを使った埋め込みを中心にご紹介します。
iFremeを利用した埋め込みコードの場合
ステップ2の【iFreme】のコードをコピーします。
ここからWordPressの画面に行き
- WordPressのダッシュボード
- 外観
- ウィジェット
- カスタムHTML
- iFremeのコードを貼り付け
最後に確認を行い、表示できていれば完了です。
Java Script SDKを利用した埋め込みコードの場合
ステップ2のコードをウェブサイトの<head>～</head>内にコピー&貼り付けをしてください。
※</head>直上に貼り付ける。
次にステップ3のコードを表示したい箇所に貼り付けします。
WordPressなら【カスタムHTML】等に貼り付ければ表示可能です。
まとめ
Facebookが公式に出しているコードエクスポートサイトなので安心して利用が出来る事と、Facebookページをウェブサイトに貼り付けることで、SNSマーケティングの活性化にも繋がります。
価値を“カタチ”に、発信する“チカラ”に
ライティング委託やブログサイト制作・ウェブサイト制作など委託制作のご依頼を受け付けています。
さらに、動画制作も行っています。- 前の記事
「思考はうつる」ネガティブな思考や自分に有害な情報は遮断する【メンタリング】 2019.07.09
- 次の記事
質の高い失敗の先に大きな成功があるので成長の伸びしろも大きい【メンタリング】 2019.07.11
