facebookページのPage Pluginをブログに埋め込む方法

こんにちは、hirokiです。

ブログのアクセス数を増やす為にはfacebookなどソーシャルメディアの活用は必須です。

ブログからfacebookへ、facebookからブログへユーザーが流れてくるように導線を作ることで、ブログのアクセスアップが見込めるのです。

その為にはブログにこんな感じの

 

facebookページへ気軽にアクセスできるためのPage Pluginを導入するのが効果的です。

今回はブログにこのようなfacebookページのPage Pluginを埋め込む方法について解説していきます。

1.facebookページを作成する

このようなPage Pluginをブログに埋め込む為には「facebookページ」が既に作成してある必要があります。

まずはfacebookページを作成しましょう。

facebookページがどんなものかわからない方や、作り方がよくわからない方は『Facebookページとは?Facebookページの作成方法』を参照してください。

2.facebook for developersのページプラグインへアクセス

Page Pluginをブログに埋め込む為にはfacebook for developersのページプラグインへアクセスします。

ここから埋め込み用のコードを取得することができます。

埋め込み用のページプラグインの設定をする

facebook for developersのページプラグインへアクセスすると、画面中央に埋め込み用のページプラグインの設定ができる箇所があります。

ここにそれぞれ必要事項を入力していきましょう。

ページプラグインの設定
  • FacebookページのURL:埋め込みたいfacebookページのURLを入力
  • タブ:埋め込みに表示させたいコンテンツを入力(timelineeventsmessagesなど
  • 幅:任意の横幅を入力(最低180~最大500)
  • 高さ:任意の高さを入力(最低70~)
  • スモールヘッダーを使用:ヘッダーの大きさを調整できる
  • カバー写真を非表示にする:カバー写真の表示/非表示を設定できる
  • 友達の顔を表示する:いいねをしている友達の顔の表示/非表示設定ができる

ここで好きな設定をすることができます。

設定を変更すると下にプレビューが表示されますので、プレビューを確認しながら設定を変更していくといいと思います。

設定が完了したら[コードを取得]を選択します。

取得したコードをコピーする

2種類のコードが表示されるので、それぞれをコピーします。

コードのコピー

3.Page Pluginを設置したい個所にコピーしたコードを貼りつける

コピーしたコードをブログのサイドカラムやフッターなどのPage Pluginを設置したい個所に貼り付けます。

貼り付け先はhtml入力に対応している必要があります。

コードのコピー

上のコードはbodyタグの開始直後に貼り付けます。

bodyタグとは

HTML文書では<HTML>、<HEAD>、<BODY> の3種類のタグで文書の構造を定義します。<HTML>~</HTML>はその文書がHTML文書であることを宣言するタグであり、文書の最初と最後に記述します。 <HEAD>~</HEAD>の間には、文書のタイトル等のヘッダ情報を記述します。 そして<BODY>~</BODY>の間には、実際にブラウザに表示される文書の本体を記述します。

引用元:HTMLタグリファレンス

下のコードはページプラグインを設置したい個所に貼り付けます。

これでページプラグインの埋め込みは完了です。

こんな感じで表示されれば成功です。

まずはブログのサイドカラムや記事下などに設置してみるといいと思います。

まとめ

facebookページのPage Pluginを埋め込む方法は以下の通りです。

  1. facebookページを作成する
  2. Page Pluginのコードを取得する
  3. 取得したコードをブログに貼り付ける

あなたのブログにもPage Pluginを設置してブログとfacebookを連動させていきましょう!

hiroki
facebookページでもブログの更新情報などを発信していこう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

hiroki

月間20万PVのメディアを運営したりなんやかんやしたりしてます。サッカーと音楽とトイプードルが好き。主な著書に「ブログに書くことがない!と思った時に読む本」など