ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress サイドバーにFacebookのいいねボックスを表示する方法

      2015/02/16

WordPress サイドバーにFacebookのいいねボックスを表示する方法

昨日はWordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法を投稿させて頂きました。とても簡単に設置出来たと思います。今回もサイドバー関係でFacebookのいいねボックス(LikeBox)を表示する方法を備忘録として残したいと思います。前回も書きましたが、ここのブログ(dmgadgetディーエムガジェット)みたいな新規のブログはGoogleなどの検索流入が少ないので、今はSNSからのユーザーを獲得する事が先決です。ツイッターやFacebook、Goole+で宣伝したりして少しでも多くのユーザーさんに読んで貰いたいです^^ブログは地道に記事を書いて行くしかないなと肌で感じています。

スポンサーリンク

いいねボックス(LikeBox)とは?

ブログとFacebookページを連動させる事が出来るソーシャルプラグインの一つです。設置するとFacebookの「いいね!」が押し易くなるのはもちろん、他の「いいね!」ボタンを押したユーザーの写真なども見れてどのぐらいファンがいるか?とかも分かり易いですね。ワンクリックでFacebookページに飛べるのでユーザビリティが高くなるのも魅力です。多くの企業でもFacebookを使ったユーザーの獲得が目立ちます。それだけ拡散力がとても強いSNSなんだと思います。「実名制」や「リアルな友達」が多いのでFacebookは全体的にネガティブなコメントが少なく企業も参入しやすいみたいですね。

Facebookページ構築

いいねボックス(LikeBox)を設置する上でマストでやっておかなければいけないことは、「Facebookページを作る」です。個人のページではなく、Facebookページとブログを連携させるボックスです。まだ作ってない方は連動させる為のFacebookページを構築しましょう。

スポンサーリンク

いいねボックス(LikeBox)のソースコードを取得

下記のFacebookデベロッパーページに飛んでボックスを制作します。

デベロッパーページに行くと下記の様な設定画面が表示されます。

WordPress サイドバーにFacebookのいいねボックスを表示する方法

左上から説明します。

Facebook Page URLご自身のFacebookページのアドレスを張ります。Width サイドバーに設置した時のBoxの幅設定です。ブログのサイドバーの幅が300なので300にしました。
Heightサイドバーに設置した時のBoxの高さ設定です。300ぐらいに設定しています。Color Scheme変更してみると分かるのですが、ボックスの色を明るい色にするか暗い色にするかの設定です。ブログに合わせて設定してみてください。
Show Friends Faces友達の写真を表示させますか? 顔など見えた方が良いのでチェックしました。Show Headerボックス上部の「Facebookもチェック」のバーを表示するかしないかの設定です。自分のブログではチェックしてません。
Show PostsFacebookページで投稿しているポストを表示させますか? これは必要なかったのでチェックしませんでした。Show Borderボックスに囲み線を入れるか入れないかの設定です。チェックしました。

記入後、左下の「GET CODE」をクリックしてソースコードを生成します。

WordPress サイドバーにFacebookのいいねボックスを表示する方法

すると「Your Plugin Code」が表示されます。

WordPress サイドバーにFacebookのいいねボックスを表示する方法

今回はWordPressのブログに設置するので左から二番目の「IFRAME」を選択します。するとコードがIFRAME用に変更されるのでこのコードをコピーします。「IFRAME」インラインフレームとは指定した枠の中に別のWebページを表示させる事が出来るオプションです。

スポンサーリンク

WordPressのサードバーに表示

次にWordPressの管理ページ → 外観 → 左側のウィジェットからテキストを選んで「ウィジェットを追加」をクリックすると右側に追加されます。

WordPress サイドバーにFacebookのいいねボックスを表示する方法

追加されたテキストボックスに先程Facebookデベロッパーで制作したソースコードを貼付けます。

WordPress サイドバーにFacebookのいいねボックスを表示する方法

貼付け後、右下の「保存」をクリックしてください。ブログでいいねボックスがちゃんと設置されたか確認しましょう。

完成

簡単に設置出来たと思います。読んで頂いてありがとうございました。

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[Stinger3] 背景を画像や写真に変更する方法
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法