Facebookバナーの作り方

Facebookバナーの作り方

Posted at December 21,2011 1:23 AM
Tag:[Facebook]

Facebookには、Facebookのコンテンツをシェアするための「Facebookバナー」というものがあります。

Facebookバナー
Facebookバナー

Facebookバナーには次の種類があります。

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

ということでFacebookバナーの作り方を紹介します。作業はFacebookにログインした状態で行ってください。

1.プロフィール用バナーを作る

Facebookバナーのページにある「プロフィール用バナー」をクリック。

Facebookバナーのページ

ページ右側にある「このバナーを編集」をクリック。

プロフィール用バナー

レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。

編集

「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。

プロフィール用バナー

コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。

プロフィール用バナー

下は完成イメージです(2011年12月現在)。プロフィールの変更がバナーに反映されるのがメリットです。

プロフィール用バナー

2.「いいね!」バナーを作る

「いいね!」バナーは、いいね!をしているFacebookページを自分のウェブサイトで紹介するときなどに利用します。

Facebookバナーのページにある「「いいね!」バナー」をクリック。

Facebookバナーのページ

Facebookページを選択してコードを取得します。バナーの編集は行えません。

「いいね!」バナー

下は完成イメージです(2011年12月現在)。ちょっとシンプルすぎて何のバナーか分からないのと、Facebookページの画像がサムネイルに反映されないのが残念な感じです(笑)。

プロフィール用バナー

3.Facebookページ用バナーを作る

自分が管理者になっているFacebookページのバナーを作ることができます。Facebookバナーのページにある「Facebookページ用バナー」をクリック。

Facebookバナーのページ

バナーを表示したいFacebookページの「このバナーを編集」をクリック。

Facebookページ用バナー

レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。

編集

「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。

Facebookページ用バナー

コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。

Facebookページ用バナー

下は完成イメージです(2011年12月現在)。実際にはバナーの下に「Facebookページも宣伝」というリンクも表示されますが、ここでは取得コードからその部分を削除しています。バナー上の「小粋空間」というFacebookページ名も、コードから削除すれば非表示にできます。

プロフィール用バナー

Facebookページの場合、ソーシャルプラグインの「Like Box」の方が効果があるように思われますが、ちょっとしたスペースに表示したい場合にFacebookバナーが利用できそうです。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)