当ブログ(Blogger) の Facebook ページを作成し、サイドバーに Facebook ページの「いいね!」(Like Box) を置いた。設定方法を書く。
目次
- Facebook ページの作成
- 「Like Box」をサイドバーに置く
- 投稿した記事を Facebook ページに反映させる
Facebook ページの作成
Facebook ページ作成画面への行き方が分かりにくい。直リンクから作成ページに行く方法。
もしくは、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 アプリケーションの 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」の数はブログのスタイルによって変えられたし。
「Advanced」設定に移る。デフォールトだと、記事タイトルが表示されないので、表示される様に「Same as Item's Title」にチェックを入れる。
「SOURCES」の設定を終えたら、「TARGET」の「ADD NEW」をクリック。「Choose Target」で自分の Facebook ページを選ぶ。
最後に「OFF」を「ON」に変えるのを忘れずに。
あとがき
ちょっと分量があるけれど、頑張って!!
このブログが気に入ったかな? Like Box の「いいね!」を押してもらえると励みになるので、どうぞよろしく。
