インストラクターのブログ

Facebookへのバナーを設定する

投稿日:2011-07-25 16:24 / 更新日:2011-07-25 16:39

サイドメニューに「Facebook」へのバナーを設定することが出来ます。Facebook にて用意されている、サービスを利用します。
※あらかじめFacebookへの登録、ログインが必要です。

概要

Facebookにて用意されている、バナー用のコードをコピーして、ブログのサイドメニュー内に貼り付けます。
このサービスのタイトルが「Fabebookバナー」と綴りが違うのは、Facebookのミスご愛嬌かもしれません。

手順

  1. パソコンからブログにログインします。
  2. 新しいタブで「Fabebookバナー」へアクセスします。これはFacebookのサービスページです。
    :arrow: 「Fabebookバナー」を別ウィンドウで表示(クリック)
    ※このページから、バナー用のコードをコピーします。ブログとこのページを両方とも、表示しておいた方が作業が簡単です。
  3. 「プロフィール用バナー」をクリック。ログイン画面が表示される場合は、ログインしてください。
  4. [このバナーを編集]をクリック

    左の”表示項目”から必要な項目にチェックしてください。プレビューが、右に表示されていますね。
    ※[レイアウト]は必ず”縦”を選んでください。これ以外は、ブログに入りません。
  5. チェックが決まれば[保存]をクリック。
  6. 「Other」をクリックしてください。すぐ下に、設定したバナー用のコードが表示されます。
  7. コードが表示されているエリア内をクリックすると、青く選択されます。その状態でコピーしてください。
    ※青く選択されている上で、マウスを右クリックし、メニューからコピーを選びます。
    ※コピーの方法は他にもあります。なれた操作法で実施してください。
    ※このコードは、表示枠より、ずいぶん長いものです。
  8. ログイン済のブログへ移動します。
  9. ダッシュボードの左メニューから、[外観]-[ウィジェット]をクリック。「ウィジェット」ページに移動します。

    ※ウィジェットは、ブログのサイドメニューを編集操作するページです。
  10. ページ右端に「navi」「others」があります。「navi」が左メニューで「others」が右メニューです。
  11. 「navi」に[テキスト]を追加します。「利用できるウィジェット」から[テキスト]をドラッグして移動します。

    「カテゴリー」の上に入れましょう。
  12. テキストのボックスが開きますので、タイトルにFacebookと入力し、その下の本文エリアに、コピーしたコードを貼り付け(ペースト)ます。
    貼り付けは、ボックス内で、右クリックし、メニューから[貼り付け]を選びます。

    長い、コードが貼り付けられます。
    その下の[自動的に段落追加する]にチェックを入れます。

    ※コードが表示されない場合は、手順7.のコピーが出来ていません。ブラウザのタブをFacebookに切り替えて、再度コピーしてください。
  13. [保存]をクリック。ボックスが表示されている場合は、[閉じる]をクリック。
  14. 以上で完了です。ブログを表示して、バナーを確認してください。

以上で完了です。ブログからログアウトしてください。

【応用】

  1. 貼り付けたコードの後半部分を削除すると、Facebookの画像バナーの下に表示される「バナーを作成」を消すことが出来ます。
  2. この青いところです。
  3. 消した後は、[保存]してください。、こんな感じになります。

セレクト・サポート記事

  • 画像について

最新の情報(更新順)

一覧

カテゴリー

便利な使い方

一覧


Go Top