1. TOP
  2. Page Pluginの設置方法 | Facebookいいねボタンの使い方とカスタマイズ

Page Pluginの設置方法 | Facebookいいねボタンの使い方とカスタマイズ

Facebook この記事は約 7 分で読めます。
like

ブログやウェブサイトを運営する上で、今ではソーシャルメディアの活用は欠かせません。

特に今回解説するFacebookに関しては、実名登録という性質上、とても質の濃いアクセスを見込む事ができます。

今では簡単に運営するブログやウェブサイトにFacebookのいいね!ボタンを設置する事ができます。いいね!ボタンを設置すれば、ワンタッチでいいね!してもらう事ができるので、より多くの人にファンになってもらう事ができます。

ソーシャルメディアの育成は、後々大きな味方となります。

本当に簡単に設置する事ができるので、これを機にぜひお持ちのブログやウェブサイトにFacebookのいいね!ボタンを作成する事をおすすめします。

2つの『いいね!ボタン』の種類を認識しよう

Facebookのいいね!ボタンには、大きく2つの種類があります。

1)記事中のいいね!ボタンを設置

記事中のいいね!ぼたんとは、こちらの画像の事です。

1
こちらはブログトップページにも表示させる事ができますが、基本的には記事本文中に表示させる事で効果を発揮します。

こちらを利用したい場合は、プラグインをインストールする必要がありますので、以下の記事を参考にしてプラグインを導入して下さい。

参考:Wp Social Bookmarking Light の設定方法

2)サイドバー等にいいね!ボタンを設置

今回ご紹介するのは、いわゆる『旧:Like Box』と呼ばれていたモノで、主にブログやウェブサイトのサイドバーや、フッター部分に設置するモノです。(※LikeBoxは現在サービスが終了しています。)

2
こちらの設置方法を、これからご紹介します。

1. Page Pluginの使い方と設置方法

それではPage Pluginの設置を進めて行きましょう。まだFacebookページを作成していない場合は、以下の記事でFacebookページの作成方法を解説しています。

1-1. Page Pluginにアクセスしよう

Facebookにログインした状態で、以下のリンクからPage Pluginの設定画面にアクセスして下さい。

⇒ Page Plugin の設定ページ  

このリンクをクリックすると、Page Pluginの設定画面に飛びます。

3
これがPage Pluginの設定ページになります。順番に設定をすすめて行きましょう。

1-2. Page Pluginの全体像

まずはPage pluginの全体像を把握しましょう。

4

・Facebook Page URL:お持ちのFacebookページのURLを入力します。
・Tabs:表示方法を指定できます。詳細は後述します。
・Width:横幅を指定できます。
・Height:高さを指定できます。
・Use Small Header:表示画像の大きさを選択できます。
・Adapt to plugin container width:横幅を自動調整してくれるようです。
・Hide Cover Photo:ヘッダー画像の表示・非表示を選択できます。
・Show Friends Faces:ファンのアイコンを表示・非表示を選択できます。
・Get Code:埋め込みコードを発行します。

以上の設定をする事ができるので、順番に解説していきます。

2. Page Pluginの詳細設定

まずはPage PluginにFacebookページのURLを入力する事から作業は始まります。

2-1. Facebook Page URL 設定

Facebook Page URLに、お持ちのFacebookページのURLを入力します。

5
そうすると画像の通り、いいね!ボタンが表示されます。ここから各種設定を進めて参ります。

ちなみにこのFacebook Page URLは変更する事が可能です。恐らく初期は意図しない文字列やページ名の日本語ULRになっているハズです。日本語URLだと不都合が色々とありますので、以下の記事を参考に、FacebookページのURLを変更しておく事をオススメします。

参考:FacebookページのURL(ウェブアドレス)を変更する方法

2-2. Tabs 設定

Tabs設定では、表示方法を変更する事が可能です。初期状態では、この欄に『timeline』という単語が入力されていると思います。下の画像の通り、タイムラインも一緒に表示されます。

6
この欄を空欄にすると、ライムライン表示を消す事ができます。

7
ブログやウェブサイトの反応率を上げるには、デザインはできるかぎりシンプルにする事が重要です。なので僕個人的には、タイムラインは表示させずシンプル方を選択しています。

ここに関しては、お好みで設定するのが良いと思います。

2-3.Width & Height 設定

8
ここでは横幅と高さを調整できますが、空欄で大丈夫です。

2-4. Use Small Header 設定

Use Small Header設定では、表示させるヘッダー画像の大きさを調節できます。

9
ノーチェックだと大きく表示され、

10
チェックを入れると小さく表示されます。こちらもお好みで設定しましょう。

2-5. Adapt to plugin container width 設定

11
こちらはどうやら自動で幅を調節してくれるようです。僕はチェックを入れています。

2-6. Hide Cover Photo 設定

Hide Cover Photo設定では、チェックを入れるとヘッダー画像(背景画像)がなくなり白く表示されます。

12
チェックを外すと、Facebookページに設定しているヘッダー画像が表示されます。

13
こちらもお好みで設定しましょう。

2-7. Show Friends Face 設定

Show Friends Face設定では、いいね!してくれた人のアイコン画像の表示・非表示を選択する事ができます。

ノーチェックだとヘッダー画像だけですが、

14
チェックを入れるといいね!してくれた人(ファン)の方のアイコンを表示させる事ができます。

15
こちらもお好みでの選択で大丈夫です。

これで機能説明は全てになりますので、続いて専用コードを発行し、WordPressやお持ちのブログ・ウェブサイトに埋め込みましょう。

3. Page Plugin の設置方法

16
各設定を終えたら、『Get Code』をクリックします。

17
そうすると2つのコードが表示されますので、これらを一つづつコピーします。

18
次にWordPressの管理画面に移り、『外観』⇒『ウィジェット』、『テキスト』をサイドバーに追加します。

19
テキストを追加したら右側の『▲ボタン』をクリック。タイトル部分は空欄で大丈夫で、『内容』の枠内に、先ほどコピーした2つのコードを貼り付けます。

貼り付けが終了したら、『保存』をクリック。

2
これで無事、Facebookページのいいね!ボックスを設置する事ができました。

ソーシャル空間でシェアを巻き起こすためには?

今ではビジネスを行う上でソーシャルメディアの活用は必要不可欠ですが、業種やジャンルによってはなかなか拡散が起きにくい場合もあります。

例えば、『料理時間を短縮する小ワザ20選!』のような記事の場合はソーシャル空間で拡散する可能性が非常に高いですが、一方で、『絶対にゆるまないネジを作るための設計図の作成方法』のような記事の場合は、ネジ業界自体がそこまで大きくないのに技術者となるとさらに少ないですし、しかも技術者の中でも設計の担当部署ってほんの一部ですし、設計の部署の中でも実際に設計図を作成する人ってほんの数人のハズです。そりゃ拡散しないよねって話です。

なのでFacebookをはじめとするソーシャルメディアでファンやフォロワーを増やすコツは、『拡散用の記事』と『深いノウハウを書く記事』など、しっかりと目的を分けて記事を書く事が重要です。

せっかくいいね!ボックスを設置するのだから、日々どのような記事がFacebookでシェアされるのか?これらも研究してみる事もオススメします。

【関連記事】
Facebookページの作成と初期設定方法

\ SNSでシェアしよう! /

次世代ビジネス研究所の注目記事を受け取ろう

like

この記事が気に入ったら
いいね!しよう

次世代ビジネス研究所の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

運営者紹介 運営者一覧

次世代ビジネス研究所

次世代ビジネス研究所

大学卒業後、某企業へ就職。
その後サラリーマン生活を経て、脱サラ・起業。
気まぐれで独り言を不定期更新。

関連記事

  • fb

    FacebookページのURL(ウェブアドレス)変更方法

  • facebook

    Facebookページへブログ記事を画像付きで投稿する方法

  • facebook

    Facebookページの作り方と初期設定方法

  • fb

    FacebookでOGP設定をしてWordPressと連携させる方法