WordPressサイトにfacebookのページプラグインを実装する方法

WordPressサイトにfacebookのページプラグイン(旧ライクボックス)の取り付け方法です。

WordPressとfacebookは連動性をよくすると、固定客を作ることが出来ますので連動設置は必ずしておくようにしてください。


すでにご覧になったこともあると思いますが、以下のようなfacebookページを小さくしたようなバナーに見えるものです。

sdtg

WordPressに取り付けたこのfacebookのページプラグインにある「いいね」をクリックしてもfacebookの「いいね」機能として稼働します。WordPressとfacebookページの2つは連動させることで、非常に効果を発揮しますのでぜひ取り付けておいてください。

facebookが提供しているページプラグイン配布ページへ行きます。
https://developers.facebook.com/docs/plugins/page-plugin

dtxvw

以下8か所の設定をしていきます。

drgtwcw

3

1.Facebook Page URL
あなたのfacebookページのURLです。

2.Tabs
ここはデフォルトで timeline となっておりfacebookページのタイムラインが表示されます。他には events と入れればfacebookページで開催されるイベントページが表示されます。 messages と設定すればfacebookページへのメッセージフォームが表示されます。

3.Width
ページプラグインの横幅のサイズ指定です。最大500pxです。

4.Height
ページプラグインの縦のサイズです。ご自由にどうぞ。

5.Use Small Header
チェックを入れるとカバー画像が小さいサイズのものが表示されます。

6.Adapt to plugin container width
ページプラグインをレスポンシブルにするか否かの選択です。チェックを入れておいてください。そうすると横幅を最大500pxにしておいても、自動でサイドバーなどの横幅に合うようになります。

7.Hide Cover Photo
チェックを入れるとカバー画像が無くなります。

8.Show Friend’s Faces
このページにすでに「いいね」しているその人の友達が表示されます。ここはチェックを入れておいてください。

設定の入力が出来ましたら【Get Code】をクリックしてください。

qa3c

2つのコードが出てきますので、その2つのコードをWordPress側にコピー&ペーストします。

ew4v

【1】のコードの設定

WordPress管理画面の【外観】⇒【テーマの編集】をクリック。

1cvestg

【テーマの編集】の中の【ヘッダー (header.php)】をクリック。

1vert w

【ヘッダー (header.php)】の中にある【body】タグ直下に【1】のコードを貼り付けます。

123

【2】のコードの設定

2のコードはfacebookのページプラグインを表示させるコードとなりますので、WordPressブログの表示させたい部分に張り付けます。

まずはサイドバーに取り付けてみましょう。

【外観】⇒【ウィジェット】を展開して、テキストウィジェットをサイドバーの表示させたい場所へ設定。

1234

テキストの内容欄に2のコードをペースとして【保存】をクリック。

12345

このように表示されます。

123456

表示サイズを  Adapt to plugin container width に指定していますので自動的に横幅が合います。

記事投稿ページに毎回自動的に挿入したい場合は【外観】⇒【テーマの編集】の【単一記事の投稿 (single.php)】の中に2のコードをペーストします。この場合はテンプレートによってコードが違いますので、よく確かめながらペーストしてください。作業をする時は必ずバックアップを取ってからすることをお勧めします。

1234567

これで投稿記事ページの記事最終部分に自動的にページプラグインが挿入されるようになります。この時のページプラグインの横幅は最大の500pxで表示されます。

199

解説動画中のサイト「かおりんとウッシーの不思議な話」
http://spbiz-academy.com/fusigi/

The following two tabs change content below.
牛(うし)
牛(うし)
最後までお読み頂きありがとうございました。内容は参考になりましたでしょうか?ご感想ご意見などありましたら【こちら】からお気軽にアクセス下さい。またこのサイトの更新情報をスマホで受けて頂ける場合は【こちら】をクリックして登録して下さい。
 

関連記事

  1. ちょっとカッコいいfacebookカバーの作り方

  2. フェイスブックをビジネスで使い倒す12の方法

  3. facebookページの開設

  4. facebookでのビジネスに効果的な投稿の仕方

  5. facebookページのかなり重要な箇所となる基本データの書き方

  6. 著作権フリーの画像を好きなだけ使える【Pixabay Images】f…

  7. 記事装飾の方法・プラグイン【Shortcodes Ultimate】

  8. WordPress標準記事タイトルとAll in one SEO pa…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

アーカイブ

ご訪問ありがとうございました!

  • 137現在の記事:
  • 68今日の訪問者数:
  • 82今日の閲覧数:
  • 136昨日の訪問者数:
  • 161昨日の閲覧数:
  • 60372総訪問者数:
  • 80872総閲覧数:
  • 118一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2016年5月25日カウント開始日: