Facebookバナーをブログのサイドバーに設置するには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

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 -->
(803文字)

このままでもいいですが、フリープラグインに設置する場合は文字数の制限(最大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>
(295文字)

ここで、◆◆◆◆◆については

さきほどの、


100002283395260.1879.1808486639

◆◆◆◆◆になりますので、ご自身の数値を見つけて、コピペして入れ替えてください。


すると、シンプルに設置できると思いますので!
※約500文字もフリープラグインのダイエットになりますよ^^



Facebookの方でもやり取りされたい方は、ぜひ友達申請をしていただければ、と思います^^! (どなたかわかるようにメッセージでお知らせくださいね~)



<追記(2017.2.24)>

2017年1月、Facebook個人ページのバナーが追加できなくなっています。(仕様変更のため)

フェイスブック個人ページのバナーが出てきません





以上、Facebookバナーの設置でした。


LIDS澄川・ライフデザインスクール
川上 雄大