webgonia

Facebookのタイムラインを埋め込みサイトで紹介する方法

Facebookのタイムラインを埋め込みサイトで紹介する方法

Facebookページを埋め込みすればサイトとソーシャルと相乗効果が見込めますし複数の入り口から集客することが出来ます。

時間的には埋め込みたいデザインを選択して貼り付けるだけなので、30秒くらいでおわるので試してくださいね。

Facebookだけでなくサイトに埋込できるWebサービスをまとめて紹介しているのでアクセスアップの参考にしてください。

Facebookタイムラインの埋め込み方法

FacebookにログインしておいてFacebook Developersページの「Page Plugin」を開いて埋め込みを設定していきましょう。

Facebook埋め込みPagePlugin「Page Plugin」が表示されるので埋め込み設定をしていきます。

Facebook埋め込みカスタマイズ方法

カスタマイズ項目をいじることで幅や高さ設定をかえることができます、ほとんどデフォルトで十分ですが細かいところが気になるアナタは自分用にカスタマイズできるように項目を紹介しておきます。
Facebook埋め込み設定カスタマイズさせたい項目の詳細は以下のとおりです。

Facebook Page URL
ブログに埋め込みたいFacebookページのURLを入力。
Width
ブログに埋め込むFacebookの横幅の設定。(180px~500px)
Height
ブログに埋め込むFacebookの高さの設定。(70px以上)
Adapt to plugin container width
指定したFacebookの埋め込みサイズを変更する場合にはチェックをいれる。
Show Friend’s Faces
Facebookに埋め込んだページにいいねをしてくれた友だちの顔を表示させる。
Use small Header
チェックを入れるとカバー写真部分が小さなヘッダーを表示させる。
Hide Cover Photo
Facebookに埋め込んだページのカバー写真を隠したい時にはチェックをいれる。
Show Page Posts
Facebookに埋め込んだページの投稿を表示させたい時にチェックをいれておく。

設定が完了すると埋め込みイメージが表示させれるので、この設定でよければ「Get Code」をクリックしてください。
Facebook埋め込みコードクリックしたら下記のようなコードが表示させるでこれをブログに貼り付けていきましょう。

Facebook埋め込みコード貼り付け

タイムラインをWordPressサイトに埋め込み

ワードプレスにタイムラインを埋め込む方法は複数ありますが、一番簡単なのは「テキストモード」に切り替えて埋め込みたい段落にコードをコピペしましょう。
Facebook埋め込みWordPress2. Place the code for your plugin wherever you want the plugin to appear on your page.に記述されている埋め込みコードを使用してください。

「プレビュー」するとFacebookページのタイムラインが記事との間に埋め込まれていたら完了です。

記事ごとにFacebookページを埋め込むことは少ないと思いますがサイドバーやトップページに埋め込んでおくとソーシャルからのアクセスを増やすポイントになるので設置しておきましょう。

WordPressで運営していない場合もコードを貼り付けるだけなのでサイトに埋め込みしておきましょう。

最近ではFacebookからInstagramを始めたんだけど、そっちの方がメインになっているのでFacebookはやめようかなと思っているアナタ!連動させておくとInstagramの投稿をFacebookで見ることが出来ますよ。

さらにブログもしているなら連動させておいてFacebookページ埋め込んでおくとブログとソーシャルと相乗効果が見込めますしアクセスを増やす重要なポイントになります。

最近ではInstagramをFacebookと連動させておくと投稿がタイムラインに表示されるのでInstagramを使っていない人にも近況を報告することができるので連動させておきましょう。

Instagramを連動する方法

FacebookとInstagramを連動させておくとInstagramを更新すると自動的にFacebookタイムラインにも表示されます、Instagramのプロフィール画面から「設定を」選択して下にスクロールすると「リンク済みアカウント」があるのでをタップします。

続けて「シェア設定」画面が表示されるので「Facebook」を選択するとログイン画面が表示されるので連動させましょう。

Instagramfacebook連動これでInstagramを更新するとFacebookタイムラインに表示させるのでFacebookをブログに埋め込むことで新着情報を見てもらうことができます。

さらにInstagramを連動させたネットショッピングが面白くなってきているので合わせておすすめしておきます。

参考:スマホを使って無料でネットショップを始めるたった1つ方法

FacebookとInstagramを分けて使いたい人はInstagramだけを埋め込みすることもできます

Instagramの埋め込み方法

instagramにログインしておいて投稿をクリックすると「・・・」が出てくるので「埋め込み」選択しましょう。
instagram埋め込み
コードが表示されるので「テキストモード」に切り替えて埋め込みたい段落にコードをコピペしましょう。※WordPressの場合は赤枠で囲んだ部分にペーストしましょう。

instagram埋め込みWordPress「プレビュー」してinstagram投稿が記事との間に埋め込まれていたら完了です。

しかし、ブログに埋め込む場合には単一の投稿しか表示できないので少し不便です、そこでFacebookのタイムラインにInstagramを連動させておくと便利です。

サイトに埋め込みできるのはこれだけではありません。

動画を紹介したい場合にはYou Tubeを埋め込みしておくこともできます。

You Tubeの埋め込み方法

「You tube」でシェアしたい動画を表示させましょう。

YouTube埋め込み動画タイトル下に「共有」ボタンが設置されているので選択して「埋め込みコード」を表示させましょう。

YouTube共有埋め込みコードがボックス内に表示されるので、これをコピーしてブログに貼り付けて完了です。
YouTube埋め込みコード

「テキストモード」に切り替えて埋め込みたい段落にコードをコピペしましょう。※WordPressの場合は赤枠で囲んだ部分にペーストしましょう。

ワードプレス埋め込み「プレビュー」すると動画が埋め込まれて記事との間におさまっていたら完了です。

埋め込みはこれで完了ですが動画の表示オプションやカスタマイズを確認してみましょう。

埋め込みオプションの確認

「埋め込みコード」タブの下の「もっと見る」を選択すると詳細を設定できます。

YouTubeもっと見る

YouTubeプレビュー設定できる詳細は以下のとおりです。

動画のサイズを変更する
ブログに埋め込む動画の縦横の幅が選択できます、デフォルトの560×315、640×360、853×480、1280×720から選択するかカスタムサイズで任意の大きさにすることもできます。
動画が終わったら関連動画を表示する
You Tubeを視聴した後に動画に関連のあるおすすめ動画を表示させるかの選択ができます。
プレーヤーのコントロールを表示する
プレーヤーのコントール表示、非表示を切り替えられるがよほどのことがない限りは表示させておいた方がいいと思います。
動画のタイトルとプレーヤーの操作を表示する
こちらもよほどの理由がない限り表示させときたい動画タイトルとプレーヤー操作の表示、非表示を切り替えることができます。
プライバシーの強化モードを有効にする
強化モードを有効にすると閲覧数のクッキーを取得しないので履歴が蓄積されないのでプライバシーの保護はされるのですが、強化するとエラーを起こして動画が見れないなどの不具合も報告されているので基本的オフでいいかなと思います。

これでYouTubeもサイトに埋込することができましたね、さらにTwitterを埋め込んでおくとサイトの情報を拡散せやすくなるので埋め込みしていきます。

Twitterタイムラインの埋め込み方法

Twitterにログインしておいて「新しいタイムラインウィジットを作成」を開いて埋め込みを設定していきましょう。

twitter

Twitter埋め込みの種類を設定

Twitterの種類によって埋み込みできる種類を変更できます、ほとんどデフォルトで十分ですが細かいところが気になるアナタは自分用にカスタマイズできるように項目を紹介しておきます。

ユーザータイムライン
埋め込みこみたいユーザー名を入力するとTwitterのタイムラインが表示されます。
いいね
埋め込みこみたいユーザー名を入力すると、ユーザーがいいねをしているツイートを表示することができます。
リスト
埋め込みこみたいユーザー名を入力すると、ユーザーが保存しているリストを表示することができます。
検索
Twitterの検索エンジンによってランク付けTwitter検索の結果では、過去数週間からのツイートが表示されます。
コレクション
アナタが選んだ表示順のツイートを表示することができます。

ここではTwitterの検索エンジンがランク付けした「検索タイムライン」を埋め込んでみます、タグは「ウェブデザイン」を選択しています。
Twitter埋め込み検索タイムライン「ウィジットを作成」をクリックしたら下記のようなコードが表示させるでこれをブログに貼り付けます。

Twitter検索タイムライン埋め込み

「テキストモード」に切り替えて埋め込みたい段落にコードをコピペしましょう。※WordPressの場合は赤枠で囲んだ部分にペーストしましょう。
Twitter埋め込みWordPress「プレビュー」してTwitterタイムラインが記事との間に埋め込まれていたら完了です。

まとめ

Facebookのタイムラインを埋め込みサイトで紹介する方法は以上になります。

Facebook以外にも埋め込みできるサービスを確認してきました、サイトのサイドバーや記事下にシェアボタンを設置するだけでも集客効果はありますが運営しているタイムラインを設置していると見やすくなりソーシャル系のアクセスアップにつながるので埋め込みしておきましょう。

最後までお読みいただきありがとうございます。

Return Top