clmemo@aka: Blogger ブログの Facebook ページを作る方法

2013-02-26

Blogger ブログの Facebook ページを作る方法

当ブログ(Blogger) の Facebook ページを作成し、サイドバーに Facebook ページの「いいね!」(Like Box) を置いた。設定方法を書く。

Facebook ページの作成

Facebook ページ作成画面への行き方が分かりにくい。直リンクから作成ページに行く方法。

http://www.facebook.com/pages/create.php

もしくは、Facebook のサイドバーから「ページを発見しよう」を選び、ページ右上の「+ Facebookページを作成」をクリックする方法。

Facebook ページの作成画面が現れる。6 つのカテゴリーが用意されている。カテゴリーごとに入力項目が変わってくる。一般的な「ブログ」は「慈善活動またはコミュニティ」を選ぶ。

するするっと、ページ名の選択画面が現れる。ここはブログの名前で良いと思う。当ブログは「clmemo@aka」なのでその通り入力してみた。

弊社の自動システムでは、「clmemo@aka」という名称は認められません。かわりに「Clmemoaka」を提案いたします。ご確認ください。詳しくは詳しくはこちら。

清々しくもハネられた。「詳しくは詳しくはこちら」と二度も書かれてる。重要なので二度書きましたってか?

この名前はページ作成後に変更できるので、とりあえず「Clmemoaka」で我慢する。

ここから、プロフィールの入力。まずプロフィール写真

「コンピュータからのアップロード」でも「ウェブサイトからのインポート」でも OK。ぼくが使ってるキーボードの写真をアップしてみた。

基本データの入力画面。Facebook ページの説明と URL (この場合はブログの URL かな) を入力する。

「広告の有効化」。これ、よく分からないので「スキップ」!

これで、Facebook ページ完成。チュートリアルが現れる。

「いいね!」「メールの連絡先を招待」「タイムラインへの投稿」のチュートリアル。

さあ、Facebook ページを見てみよう。

管理者用パネルにある「Facebookページを編集」から「基本データを編集」をクリック。

せっかくなので、名前を「Clmemoaka」から「clmemo@aka」に変える。う〜ん、「@」がいけないみたい。ズルして半角の「@」を全角の「＠」に変えて入力。これでどうかな?

ん、いい感じ。

同様に、通知設定やページオーナーなども時間が出来たら設定していこう。

Facebook ページの作成はこれにてお終い。

「Like Box」をサイドバーに置く

Facebook ページの「Facebookページを編集」から「基本データを編集」をクリック。左サイドバーから「リソース」を選び、「ソーシャルプラグインを利用する」をクリックする。

ソーシャルプラグインの一覧が現れた。今回は、「Like Box」を使う。

次のスクリーン・ショットはぼくの場合のサンプル。

説明:

Facebook Page URL: Facebook ページの URL を入力する。実際に Facebook ページを開いて、その URL を入力すればいい。この URL にはユニークな URL を付けられたけど、今は「ファン」が 25 人以上いないと URL を取得できなくなったらしい。25 人のファンを獲得したら、改めて Facebook ページの URL を変える方が良い... のかな。
Width: 「Like Box」の幅。デフォールトの 292 を使用。
Height: 「Like Box」の高さ。デフォールトは空。特に指定しなくても良いみたい。
Show Faces: 「いいね!」してくれた人達の顔写真を表示する。デフォールトは ON。
Color Scheme: 色。light と dark がある。
Stream: Facebook ページの中身も表示する。デフォールトは ON。ぼくは OFF にした。
Border Color: 「Like Box」のボーダーの色。デフォールトは空で黒色。枠線を消したい派なので、#fff (白色) を設定。
Header: ヘッダー。デフォールトは ON。ぼくは OFF にした。

右側には、こんなサンプルが現れた。

「Get Code」をクリックしてコードを表示。「HTML5」「XFBML」「IFRAME」「URL」の 4 種がある。Blogger は「HTML5」のままで OK。

1. のコードは下記の通り:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

このコード、ブログの記事に「いいね!」ボタンを付けるのに使ったのと同じコード。なので、「いいね!」ボタンを付けてる人は、このコードを貼り付ける必要はない。ただし、次のコードを入れてる人は、その部分だけ削除する必要あり。

<b:if cond='data:blog.pageType == "item"'>

</b:if> の削除も忘れずに。

「いいね!」ボタンを付けていない人は、Blogger のテンプレートを編集する (バックアップは必ず取るように!!)。

Blogger の設定画面から「テンプレート」を選択。「ブログで使用中」の下に「HTML の編集」ボタンがあるのでクリック。上級者しかやっちゃダメよ、という警告が出る。OK なら「続行」。

「ウィジェットのテンプレートを展開」にチェックを入れる。(重要)

<body ... で始まる行を探して (ブラウザーのページ内検索機能を使うとすぐに見つかる)、「body のすぐ後に配置します」のコードを挿入する

次に 2. のコードを貼りけ付る。ぼくの場合、こんな感じ。赤色のコードは各自個序有になるはず。

<div class="fb-like-box" data-href="https://www.facebook.com/pages/clmemoaka/136048079903138" data-width="292" data-show-faces="true" data-stream="false" data-border-color="#fff" data-header="false"></div>

Blogger の設定画面から「レイアウト」を選択。「ガジェットを追加」から「HTML/JavaScript」を選択。コンテンツ部に先のコードを入れてあげる。

これで Like Box の設定は終了。

投稿した記事を Facebook ページに反映させる

さあ、最後の一仕事。ブログの記事を投稿したら、Facebook ページに反映させよう。Facebook アプリケーションの RSS Graffiti を使う。Facebook の画面上にある検索ボックスから RSS Graffiti を検索。利用可にする。

ぼくは、既に RSS Graffiti を使っているので、今の初期画面が分からない。ごめん。

clmemo@aka を Facebook ページに反映したい。「Add New Publishing Plan」をクリック。

適当な名前を付けて、「SOURCES」の「ADD NEW」をクリック。ブログのフィードの URL を入力する。

続けて「Basic」設定。「Update Frequency」を「As soon as possible」に、「Maximum Posts per Update」を「5 posts」に、「Post Order per Update」を「Publish older posts first」に変更。意味は、「ブログを更新したらなるべく早く反映して欲しい。でも、日によっては数本の記事を書くことがあるかもしれないから、5 記事くらいは遡って調べて。で、古い記事をから新しい記事の順で並べて下さい」ということ。「Maximum Posts per Update」の数はブログのスタイルによって変えられたし。