WordPressのサイドバーにFacebook「いいね!」を表示する方法/LikeBoxの変わり【Pageplugin】




こんにちわ!

ひでゆきです^^(dehichan0728)

 

デニーズのモーニングセットが230円でコーヒー飲み放題&軽食付でコスパ最強です!

早起きして仕事する方にオススメです!!

 

さて、本日はブログやウェブサイトと切っても切れない存在のSNS「Facebook」のいいね!を

WordPressのサイドバーに表示する方法を紹介します!

 

私も先ほどサイドバーに表示したのですが、ビジュアル的になんだかカッコいい!!笑

Facebook

 

LikeBoxというサービスが2015年に終了してPagePluginというサービスに変わりました。

設置方法が簡単になったので、ぜひ設置してください^^

 

Facebookでアカウント作成

Facebookのいいね!を設置する場合は個人ページではないページである必要があります。

特に会社でなくても作ることは可能なので、「ブログ名」「ハンドルネーム」でOK

 

Facebookのアカウントを持ってないと作れません!

 

Facebook ログインページ

Facebook

 

自分のサイトやウェブサイトのカテゴリーを選びましょう。

Facebook3

 

カテゴリーを決めたら詳細を設定しましょう。

  1. ブログやウェブページの簡単な説明を記入
  2. ブログやウェブサイトのURLを記入
Facebook5

 

プロフィール写真の設定

プロフィールとは別にトップ画像を後で設定します。

facebook6

 

自分のFacebookページのお気に入りに設定。

ページにアクセスしやすくなります。

facebook7

 

ターゲットを明確にすることで、検索させた時に見つけられやすくなります。

ブログやウェブサイトのお客様をイメージするといいでしょう。

facebook8

 

Facebookトップ画像の設定

プロフィール画像の設定はできているのでトップ画像を設定しましょう。

Facebook10

 

これでFacebookのアカウントを作ることができました!

では、いいね!boxを作りに行きましょう!!

 

LikeBoxの変わりPagepluginで設置

2015年まではいいね!を作っているサービス名は「LikeBox」ライクボックスでした。

廃止になって新しいサービス名はPagepluginです!(ページプラグイン)

 

いいね!を作るFacebookページはこちらPageplugin

Pageplugin

 

主に決めるのは4つ

  1. FacebookのURL
  2. タグ
  3. 幅・高さ
  4. 設定

それぞれを解説していきます。

Pageplugin

 

FacebookのURL

Facebookページを作るときに決めたURLはFacebookページを表示すると見れます。

個人のページのURLは無効になり表示できません。

facebook11

 

タグ

タグのデフォルトが「timeline」

タイムラインを表示することで縦長になるので、嫌ならタグを空欄にしましょう!

 

timeline

facebook12

 

events(イベント)

Facebook13

 

messages(メッセージ)

Facebook14

 

events、messagesの複合で表示

Facebook15

 

幅・高さ

このブログではデフォルトのまま使用しています。

 

幅・高さを変えると、すぐにプレビューで反映されるのでお好みの大きさを見つけましょう!

 

設定

  1. スモールヘッダーを使用
  2. カバー写真を非表示にする
  3. 友達の顔を表示する
Facebook19

 

スモールヘッダーを使用する

Facebook16

 

まぁ、好みでしょう。笑

Facebook17

 

カバー写真を非表示にする

Facebook20

 

ある方が良さそうですね…お好きな方をお選びください。笑

Facebook21

 

友達の顔を表示する

Facebook22

 

お好みで~

 

Facebook23

 

設置方法

自分好みの設定ができたら、コードを取得をクリック!!

Facebook25

 

上下に2つコードが表示されるので、両方を使っていきます。

Facebook26

 

 

WordPressにウィジェットで追加

全く同じ流れになります。

Twitterをサイドバーに追加する方法

 

ダッシュボードの外観→「ウィジェット」

Wordpress

 

テキストをサイドバーへ移動させます。

テキスト内に先ほど表示したコード2つを貼り付けたら設置完了です!!

Wordpress2

 

番外編 Twitterをサイドバーに表示させる

Twitterをサイドバーに追加する方法

全く同じように設置できるので、もしよかったらやってみてください^^

twitter

 

まとめ

HTMLとかCSSとかの変更なくできるので簡単ですね!!

 

ソーシャルネットとブログやウェブサイトの連携は今の時代は必須です。

簡単なのでFacebook・Twitterと両方設定しておくことをオススメします^^

 

では!!




コメントを残す

メールアドレスが公開されることはありません。