追記)アメブロへのFacebookのバナーや、LikeBox設置の仕方のまとめ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

内藤です

Facebookの友達やフォロワー、Facebookページならファン(ページのいいね)を増やすために、ブログにバナーやボタンを設置するという手段があります。

アメブロのサイドバーや記事下に設置する方法を紹介しますね

Facebookバナーを設置


Facebookの個人のバナーをアメブロのサイドバーに設置する方法です。

こちらのサイトで設置するバナーのコードを取得します
⇒ Facebook Badges

プロフィール用バナーをクリック

表示させたいレイアウト、項目にチェックを入れて「保存」します。

バナーがプレビューされますので、よければ「+Other」をクリック

貼り付け用のコードが表示されますので、コピーします

あとは、アメブロの「フリースペース」に貼り付けるだけです

これでサイドバーにFacebookバナーが設置できました

フォローボタンを設置


Facebookには「友達」だけではなく、フォロー(フォロワー)もあります。友達は、申請と承認でお互いが認めてなるものです。上限が5000人です。
フォローは、一方的にフォローするものです。申請や承認はありません。

このフォローのボタンも設置することができます。

まずこちらのサイトでフォローボタンのコードを取得します
⇒ Follow Button

Profile URLに、自分のFacebookアカウントのURLを入力します。

FacebookアカウントのURLは、Facebookでプロフィール名をクリックして表示されるページのURLになります

・Width(幅)、Height(高さ)、Layout Style(ボタンの種類)、Show Faces(フォロー中の人を表示させるか)を設定し、「Get Code」をクリックします。

コードの表示されたウィンドウがでてきます。 「IFRAME」を選択し、コードをコピーします。

追記)Facebookの仕様が変わり、コードの選択はなくなりました。
2つのコードが表示されますが、1つめはアメブロに既に入っていますので、2つめのコードをフリープラグインにいれてください

フォローボタンは、Facebookバナーと違い「フリースペース」に設置することができません。「フリープラグイン」に設置します。
「設定・管理」から「プラグインの追加」⇒「フリープラグイン」でコードを貼り付けます。

これで保存すれば、サイドバーに表示されるようになります。

※フリープラグインは、サイドバーの配置設定で「使用する機能」に設置するようにします。



記事下にフォローボタンを設置


サイドバーに設置でもいいのですが、記事の下の方がよりフォローしてもらえます。記事を読んだ後が一番行動を起こしやすいからです。

同様の手順でコードを取得し、下記の「コード」の部分に代入して、これごとフリープラグインにいれます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.articleText").append('コード');
}
); </script>

これで記事の下にフォローボタンが表示されるようになります。

※これらのフォローボタンは携帯やスマホでは表示されません。

FacebookページのLikeBoxを設置


Facebookページも持っている場合、LikeBoxを設置してブログ上でファン(ページにいいね)になってもらう事も可能です。

追記)LikeBoxが廃止され、Page Pluginになりました
FacebookページのLikeBoxが廃止になり、新しくPagePluginに

まずこちらのサイトで設置用のコードを取得します。
⇒ Facebook Like Box

フォローボタンの設置と流れは一緒になります。

・Facebook Page URLにFacebookページのURLを入力します。


・width(幅)、Height(高さ)、Show Friend’s Faces(ファンのプロフィール写真)、Show Header(ボックスのヘッダー)、Show Posts(投稿の表示)、Show Border(枠の線)を設定し、「Get Code」をクリックします。

コードが表示されるウィンドウで「IFRAME」を選びコードをコピーします

追記)Facebookの仕様が変わり、コードの選択はなくなりました。
2つのコードが表示されますが、1つめはアメブロに既に入っていますので、2つめのコードをフリープラグインにいれてください

LikeBoxのコードも「フリープラグイン」に挿入します。


これでサイドバーにLikeBoxが表示されました。

※サイドバーの幅に合うようにLikeBoxの幅を設定してください

記事下にLikeBoxを設置


フォローボタンと同様、LikeBoxも記事下にあるとクリックしてもらいやすくなります。

同様の手順でコードを取得し、下記の「コード」の部分に代入して、これごとフリープラグインにいれます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.articleText").append('コード');
}
); </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
の部分はフォローボタンで挿入してれば不要

※フォローボタン、LikeBox両方入れる場合は、「コード」の部分に両方のコードを続けて入れても構いません。

これで記事下にLikeBoxを表示させることができます。

※LikeBoxも携帯やスマホでは表示されません。

最後に


アメブロ上にフォローボタンやLikeBoxがあると、アメブロ上にいながらフォローしてもらえたり、ファンになってもらえたりします。

ブログ上でもFacebookやFacebookページの存在を知ってもらうことは大切ですので、カスタマイズして表示させてみてください

自然体で自分らしく、ネットでファンを作る7つの質問


お名前(苗字のみ

メールアドレス   
※お間違えのないようご注意ください

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。