アメブロにFacebookのいいね!ボタンなどのソーシャルボタンを設置する方法

2011年11月09日(水) 13:23:35
投稿者:福岡宏紀 

Facebookをビジネス活用していく場合、ブログとの連携は必須科目です。

本格的にビジネス活用していくならアメブロは推奨しないのですが、現在、国内で投稿されている記事の6割はアメブロというデータもあるほど、無料ブログのシェアはアメブロがダントツ。ということでこのトピックは、アメブロにFacebookのいいねボタンを設置する方法を解説してみたいと思います。

テスト用ブログ:Facebookビジネス活用ガイド・アメブロ版

設定方法

①ログイン(マイページ)→「ブログを書く」のタブをクリック

②「サイドバーの設定」をクリック

③「プラグインの追加」をクリック

④「フリープラグイン」をクリック

クリック後の画面

このスペースに設定コードを入力していきます。

必須コード

①下記のコードをコピーして、フリープラグインのスペースにペーストします。

タイトルのすぐ下に設置する場合

タイトルのすぐ下に設置する場合は、以下のコードをコピーして、①でペーストしたコードの下にペーストします。

入力したこんな感じになると思います。入力したら保存をクリック。

記事の下に設置する場合

記事の下に設置する場合は、以下のコードをコピーして、①でペーストしたコードの下にペーストします。

同じく、入力したらこんな感じに。ペーストしたら保存を忘れずに。

うまくいった!!

うまくいくと、Facebookのいいね!ボタンとツイートボタン、はてなブックマークのボタンが表示されます。このレビューは、「タイトル下」「記事下」両方設定した形です。コンテンツが短いと、2ヶ所に挿し込むのはちょっと鬱陶しいですね。

テスト用ブログ:Facebookビジネス活用ガイド・アメブロ版

あれ?うまくいかないぞ!って方へ

ちなみに、今回設定を行うサイドバーの「フリープラグイン」という機能を「使用する機能」として設定しないとブログには反映されてません。設定は、マイページ→ブログを書く→サイドバーの設定→サイドバーの設置から行います。

この設定を確認して、今回設定した「フリープラグイン」がグレーの「使用しない機能」のブロックのままになってないか確認してみて下さい。

まとめ

アメブロにいいね!ボタンを設置してみようと思い、その方法を調べてみると色々な方法がありました。1つずつ試してみながら、うまくいったり、いかなかったり。。。アメブロも日々カスタマイズされているし、Facebookも仕様変更が早いので仕方ないです。

そんな中、実践してみて、「お!理想的!!」と思うような記事をみつけ、こうやってやり方を紹介することが出来ました。その理想的!!というのは、

  • 大きいサイズのいいねボタン
  • 記事下のボタンが入る位置が、Adsense広告の上

この2点です。

ボタンだけのデザインより、カウント数が出る大きめのボタンの方が視覚的に入りやすいのは間違いありません。厳密に調べたデータはまだ持ちあわせていませんが、「率」を出すと、この大きいボタンの方がいいね!率が高いと思っています。

また、アメブロを無料で使う場合はどうしても広告が入ります。記事下の部分にもAdSense広告が入ります。この部分に広告を差し込んでいるのは、この部分がクリック率が見込めるからです。

記事下のAdSenseの下にいいね!ボタンを設置しているアメブロもありますが、今回の設定では、AdSense広告の上にボタンが配置されます。記事を読み終わった時に、先に視界に入れるので、これは理想的です。

アメブロをお使いの方、是非実践してみて下さい!

【参考サイト】
新・アメブロにフェイスブック「いいね」・ツイッター「つぶやく」を設置する方法

PS.
うまくいったらコメント欄で報告頂けると嬉しいです。うまくいかなかったら、出来るだけサポートしますんで、コメント下さい。