facebookのバナーをサイドバーに表示させる


facebookのバナーをサイドバーに表示させるやり方です。

facebookバナーをサイドバーに設置

1.バナーの種類を選択

facebookにログインした状態で、こちらのページを開きます


設置したいバナーを選びます。

  • プロフィール用バナー
  • 「いいね!」バナー
  • 写真バナー
  • facebookページ用バナー

個人のページのバナーならば、「プロフィール用バナー」


facebookページを作っているならば「facebook用バナー」を選びます。

2.コードの取得

「Other」をクリックし、コードを取得します

コードをコピーし、「ウィジェット」の「テキスト」に貼り付けます。

アメブロならば、「フリースペース」に貼り付けます。

サイドバーの幅と合わずに、中央寄せしたい場合

コピーしたコード

<!– Facebook Badge START –><a href="https://www.facebook.com/naitoisao" target="_TOP" style="font-family: &quot;lucida grande&quot;,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/naitoisao" target="_TOP" title="内藤勲"><img src="https://badge.facebook.com/badge/100001056455668.565.771513191.png" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,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 –>


<div style="text-align:center"> と </div> ではさむようにします。


すると、バナーが中央寄せされます。

3.表示項目を変えたい場合

「このバナーを編集」をクリックします

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


※表示項目を変更しても貼付け用のコードは変わりません。

また、コードの前半の

<a href="https://www.facebook.com/naitoisao" target="_TOP" style="font-family: &quot;lucida grande&quot;,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/>

と、後半の

<br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="自分だけのバナーを作成しましょう。">バナーを作成</a>

を削除すると

バナーの上下の 名前と「バナーを作成」 がなくなります。

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す