PCインストラクターの川上です。
パソコンで見ると、サイドバーにFacebookバナーが設置しているブログ見かけますよね。
えっ?見たことも聞いたこともないっ!と断言される方・・・
私の右サイドバーの真ん中下あたりにあるコレです↓↓↓
(↑この画像のように矢印をびよ~んと簡単に入れたい場合は、Skitch(スキッチ)を使われると便利です。こちらの記事『Skitch for Windowsようやく登場!』をご参照ください。)
それでは、さっそくFacebookバナーをサイドバーに設置してみましょう。
まず、Facebook(フェイスブック)を開いて、
(あっ、R社在籍中は大変お世話になりました五十嵐辰弥さん、お誕生日おめでとうございます!)
ご自分の名前をクリックします。(左上でも右上でもどちらでもOKです。)
すると、自分のタイムラインが表示されます。
「基本データを編集」の右隣に「アクティビティログ」を見つけます。
「アクティビティログ」の右隣の▼ボタンをクリックして、「バナーを追加」をクリックします。
「プロフィール用バナー」が表示されます。
右上にある「新しいバナーを作成」をクリックします。
新しいバナーを作成してあげます。ここで、色々と設定を試してみてくださいね。
サンプルは右側に表示されます。
完成したら、一番下の「保存する」をクリックします。
バナーが表示されます。(私の場合、もう一つできました。)
そして、「Other」ボタンをクリックします。
下にコードが表示されますので、右クリックして「コピー」します。(Ctrl+C or command+CでもOKです。)
そして、アメブロの「マイページ」から「フリープラグイン」または「フリースペース編集」を表示して、貼り付けます。
Facebookバナーは、ただの画像リンクコードですので、フリープラグインでなくて、フリースペース編集に設置してもOKです。
(注! フリースペース編集は、JavaScriptやiframe、object、formなど一部のタグが利用できません。設置したいタグに禁止タグが含まれている場合は、フリープラグインを利用することになります。)
貼り付けたコード内の、
●●●●●はご自分のFacebookのIDになります。
<!-- Facebook Badge START --><a href="https://www.facebook.com/●●●●●" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="ご自分のお名前">ご自分のお名前</a><br><a href="https://www.facebook.com/●●●●●" target="_TOP" title="Takehiro Kawakami"><img src="https://badge.facebook.com/badge/100002283395260.1879.1808486639.png" style="border: 0px;"></a><br><a href="https://www.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="自分だけのバナーを作成しましょう。">バナーを作成</a><!-- Facebook Badge END -->
このままでもいいですが、フリープラグインに設置する場合は文字数の制限(最大3,800文字)がありますので、シンプルに設置したいものですね。
(フリースペース編集では、半角10,000文字までOKですからそのまま設置しても大丈夫ですね。)
私と同じように、シンプルにFacebookバナーを設置したい場合は、
フリープラグインまたはフリースペース編集に次のコードをコピー&ペースト(コピペ)して、ご自分のfacebookアドレスに変更してみてください。
<div align="center"><a href="https://www.facebook.com/●●●●●" target="_TOP" title="ご自分のお名前"><img src="https://badge.facebook.com/badge/◆◆◆◆◆.png" style="border: 0px;"></a><br><a href="https://www.facebook.com/●●●●●" target="_TOP" style="font-size: 9px;" title="">Facebookへはこちらからどうぞ!</a><br></div>
ここで、◆◆◆◆◆については
さきほどの、
100002283395260.1879.1808486639
が◆◆◆◆◆になりますので、ご自身の数値を見つけて、コピペして入れ替えてください。
すると、シンプルに設置できると思いますので!
※約500文字もフリープラグインのダイエットになりますよ^^
Facebookの方でもやり取りされたい方は、ぜひ友達申請をしていただければ、と思います^^! (どなたかわかるようにメッセージでお知らせくださいね~)
<追記(2017.2.24)>
2017年1月、Facebook個人ページのバナーが追加できなくなっています。(仕様変更のため)
『フェイスブック個人ページのバナーが出てきません』
以上、Facebookバナーの設置でした。
LIDS澄川・ライフデザインスクール
川上 雄大