ブログにFacebookのコメントボックスを設置しよう。

今日のお題は
「Facebookのコメントボックス」
についてお話します。




フェイスブックのコメントボックスと言う物を見た事があるかと思います。

これ実は書き込んだ内容がそのまま、自分のタイムラインに表示されます。
つまり、外部で書いた内容が、そのまま自分の記事になる。
と言うモノです。

これをブログやニュース記事に連携させれば……
書き込みが、そのままFacebookで拡散されます。

ブログなどの場合は、専用のコメント欄よりもずっと効果的です。
しかも、書き込みをする事で【いいね】を押した事にもなり、良い事だらけです。

Facebookに対する有用性と言う意味では、いいねボタンの比ではありません。

上の画像は、Facebookのタイムラインの画像です。
書き込んだコメント内容が表示されていますね。
先日のブログで書いた、OGPタグがそのブログに設定されていれば、ご覧の様に、
画像・タイトル・説明
がきちんと表示されますので、見た目も綺麗です。こうして見ると、OGPタグって大事ですよね。もしOGPタグが無ければ、単純にページタイトルとリンクURLが表示されるだけです。それでは、見た目で損をしていると思いませんか？

OGPタグについてはこちらをご覧ください。


さて、ではどの様にコメントボックスを設置するかですが、基本的なお話だけにさせて貰います。
と言うのも、実はブログに設置する場合、それぞれのブログ用に若干カスタマイズが必要になります。
ですので、今回は基本的な設置方法のみと言う事で、ご勘弁を。

もし、どうしても知りたいという方は、具体的なブログ名（アメブロ・ライブドア等）をコメントしていただければ、対応したいと思います。

Comments

コメントボックス
下のリンクからコメントコードを生成します。

https://developers.facebook.com/docs/reference/plugins/comments/

URL to comment on
コメント欄を設置したい、サイトのURLを入力します。
この時、入力するのはドメインまでとしてください。

Width
表示するコメント欄の横幅です。

Number of posts
コメントを何件表示するかです。

最後に【Det Code】を押して、ソースコードが表示されます。

通常のブログであれば、表示されているコードをそのままコピーしてOKです。

1.JavaScript SDKを設置
上にあるJavaScript SDKをHTMLの＜bode＞タグの直後に書き込みます。


<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>


2.コメント欄の設置
コメント欄を表示したい場所に、このコードを設置します。
この時に、このままのコードで設置してしまうと、このコメント欄は【hon-web.blogspot.jp】のコメント欄となってしまいます。

<div class="fb-comments" data-href="http://hon-web.blogspot.jp" data-width="470" data-num-posts="10"></div>

例えば、コメント欄をブログの記事に設置して個別にコメントを貰いたい場合には、下記の様に変更します。

<div class="fb-comments" data-href="【ここにブログの独自タグを入れる】" data-width="470" data-num-posts="10"></div>

ページURLの箇所に、各ブログで使用するページ生成タグを挿入します。
このタグは、それぞれのブログによって違うので、利用しているブログの仕様を確認してください。

もし、このURL設定をしないとどうなるか……
先ほど言った様に、一つのドメインのコメント欄として、認識されてしまうので、全てのブログページで同じコメントが表示されます。

今回は、最低でもある程度HTMLの知識が必要になります。
まぁ、基本的にはコピー＆ペーストで作業自体は簡単なのですが、ソースコードの何処に貼りつけるか？とか、ブログの独自タグの追加などと言った、少々込入った内容ですが、設置出来れば、Facebookに対しての効果は絶大です。

チャレンジして損は無いと思います。

各ブログの具体的な設置例などは、

アメブロ　Facebook　コメント欄

などの検索項目で検索出来るので、チャレンジしてください。

どうしてもわからない場合はコメントを頂ければ、調べる程度の事はしたいと思います。

アプリ設定メッセージ July 2013 Breaking Changes

今回は
「アプリ設定メッセージ」
についてのお話。

ゴールデンウイークの頃から、アプリ設定のメッセージに「緊急修正」です。
というアラートがたまに入って来ていたのですが、う～ん翻訳しても、どうも意味が良く解らない？？

英語力が無いからなぁ。

アラート
July 2013 Breaking Changes

Your app, Hondaweb has not enabled the migration for the July 2013 Breaking Changes.
Once you have confirmed your app is compliant or unaffected by the July 2013 Breaking Changes, set the migration setting to "Enabled" in the 詳細設定 section of the App Dashboard. This will apply the July 2013 Breaking Changes to your app and prevent you from receiving future alerts about these changes.
Hondaweb, is currently using the following deprecated features:
Social Plugins (Like Button, Like Box) without absolute URL's in their `href` parameter.
These changes will be permanently enabled for all apps in 58 days on 2013年7月11日.


内容をみると、どうやら
2013 Breaking Changes
を修正しないと、７月以降にアプリで問題が発生する可能性があるから、修正してください？

と言った内容らしいので、とりあえず修正をしておきました。

アラート画面の下にある【移行設定を編集】ボタンを押すと、設定画面に切り替わるので、
2013 Breaking Changesの項目を、有効にして保存します。

作業はこれだけ。

これで、メッセージ画面には「これ以上修正の必要はありません」と新たなメッセージが表示されます。

どうもこの設定を有効にしていないと、このアプリに関連する【いいねボタン】と【Like Box】に不具合がでる？あるいは不具合が出ても、アラートが届かない？

と言う内容の様です。


しかもこれアプリ毎に対応しないとダメな様で、複数アプリを管理している人は、全てのアプリに個別対応が必要です……

つまり、アプリ毎に全て設定し直し、と言う結構面倒な対応が必要です。
サイト制作会社で、お客様のアプリを多数管理している所などは、かなり面倒な作業になります。

しかし、日本語のメッセージぐらい出しても良さそうなモノだが……
毎度のことだけど、技術情報は日本語にローカライズしてから、アナウンスして貰いたいもんです。

Facebookタブアプリの考え方

今回は

「タブアプリ」

についてのお話。

Facebookページには、タブと呼ばれている場所があります。

様々なサービスを提供しているFacebookですが、実はユーザーが何か（デザインでも色でも）任意に変更をしたいと思っても、変更出来る箇所は【カバー写真】と【プロフィール画像】だけしか変更出来ません。

これは、Facebookページでも殆ど同じです。
しかし、ただ一つユーザーに変更を許された場所があります。

それが【タブ】です。

このタブ、個人アカウントでは任意に変更する事が出来ません。もちろん全く変更出来ない訳ではなく、特定のアプリを入れる事は出来ますが、その表示する中身までユーザーが変更する事は出来ません。
それぞれの場所（位置）の移動は可能ですが、タブアプリの中身はこちらで選べません。

しかし、Facebookページではタブアプリの内容も含めて全て、ユーザーが好きな様に作る事が可能です。

【タブアプリ】と言っていますが、実際アプリケーション（プログラム）と言うモノではなく、実際の中身は単なるサイトページを表示しているにすぎません。

【概念図】

上記の図を見て頂ければ、解るかと思いますが。
ドメインがssl表示※1可能なwebサイトページを、Facebookのページ内に表示しているだけになります。

Facebook側で特に特殊な事をしている訳ではなく、あくまで外部のページを表示しているという、簡単な構造です。

つまり【タブアプリ】に表示されている、画面はssl表示可能なwebサイトページであれば、どんなページでも構わないと言う事になります。※2

と言う事は、ssl表示が可能なwebページであれば、その中身（システム）は単純にHTMLで作られたサイトでなくとも良く、CMS等を利用した、webサイトでもいいと言う事です。

たとえは、飲食店などは、この【タブアプリ】にメニューなどを載せたり、あるいは【今日のおすすめ】と言った日々更新可能なコンテンツを掲載する事も可能です。
また、【タブアプリ】の表示エリア内であれば、他ページへの移動も可能ですし、ショッピングカートと連動させる事も可能です。

【アプリ】と言われていますが、その実普通のwebサイトを表示しているだけなので、制作自体はそれほど難しくない。と言う事です。

制作したwebページをアプリとして登録する方法は、時間があればいつかご紹介いたします。
とりあえず、登録してみたいと言う方は、下記検索キーワードで、Google先生に聞いてください。



検索キーワード：Facebookアプリ登録

---

※1
ssl表示とは簡単にいえば、通常のwebページより高いセキュリティー機能を持ったwebページと言う事になります。
今使っている、webページがsslかどうかの確認方法は、ドメインの前にある【http://】の部分を【https://】に変更してください。もし、そのままwebページが表示されれば、そのwebページは「ssl認証が使えるwebサイト」となります。
sslが使用可能かどうかは、利用しているサーバー会社へお問い合わせください。


※2
表示内容についての制約はFacebookの利用規約に則って、社会常識の範疇で一般的な内容となります。
また、Facebook側での表示サイズが決まっているので、外部サイトはその表示サイズ以内に収まっている事が前提となります。

Facebookページの予約投稿と修正。

ご無沙汰しております。
気が付けば、一月近く更新していませんでした。
最近Facebook関連の雑務が色々とあって、企業でもFacebookの重要性を理解して、動く方向にシフトしている企業様もいいです。

しかし、中小企業の場合はやはり情報収集能力の違いと言いますか、まだまだインターネットでの集客そのモノに懐疑的なお客様もいます。

そんな方々とお話する日々で、Facebookの詳細機能についてのお話が多々出ます。
と言う事で、本日のお題は

【Facebookページの予約投稿と修正】です。

Facebookページの予約投稿機能は皆さんご存じの方もいるかと思います。
え？そんな機能知らない？

そんな方は下記の記事をご覧ください。
要するに、普通のブログと同じ様に、決められた時間に投稿をUPしてくれる機能です。

リリースは、半年ほど前ですが、以外と知られていない様なので、一応あげておきます。

Facebookページの投稿を予約する方法
http://f-navigation.jp/manual/pages/pages_reservation.html

また、この予約機能は一度設定した後で、変更する事が少々面倒なようです。

通常この手の変更は、設定した画面を使って再度設定変更するやり方がポピュラーですが、Facebookページでは【アクティビティログ】の画面から行ないます。アクティビティログは他にも各種の変更機能を持っているので、何らかの変更が必要な場合に、その変更方法が不明ならば、真っ先にアクティビティログを見てみましょう。

また、Facebookページに限った事ではないのですが、デザイン上の制約か、はたまたFacebookの陰謀？でしょうか(笑
ボタン機能を言葉（テキスト）ではなく、アイコンのみで表示して言葉で示さない場合が多くあります。
そのアイコンも目立たない色なので、解りにくい場所や一見するとデザインに見えるボタンなどがあり、実際に触らないとその機能が解らない物が多数あります。

確かに、世界中で使われているFacebookですから、世界標準でのデザイン性が求められるのでしょうが、もう少し親切であっもいい様な気もしますけどね。

Facebookページへの予約投稿（日時指定の投稿）をキャンセル/時間変更/即公開する方法
http://wayohoo.com/facebook/beginners/how-to-edit-reservation-posts-for-the-facebook-pages.html

---

Facebook テーブルテントアプリ

今日は、ネタがあるので急遽、連投です。


11/13 PM
Facebookマーケティングから、テーブルテントアプリが公開されました。

店舗経営されているお客さま向けの、アプリです。

実店舗に来て頂いたお客様に、Facebookページへのアクセスを簡単にしてもらう様に開発されたアプりです。

アプリとは言っても、要するにQRコード生成プログラムなのですが。


テーブルテントアプリ
https://www.facebook.com/marketingjapan/app_496405607036818

アプリページにアクセスすると上記の画面が出ます。
入力欄に、FacebookページのURLを記入して、イメージを作成ボタンを押すと、badge.pngと言うファイルがダウンロードされます。

そのファイルをプリントアウトすると、下記の様なPOPが印刷できます。

冷静に考えれば、タダのQRコードを印刷したPOPですが、Facebookのオフィシャルですので、普段使えない【オフィシャルロゴ】も入っているので、ちょっといい感じです。

このPOPをテーブルやレジ周りなどに貼っておけば、お客様が簡単にアクセスできますし、キャンペーン等と一緒に行なえばアクセス数をあげる事も可能ではないでしょうか？

Facebookアプリページのスクロールバー

フェイスブックはすぐに仕様を変更するから……

先日、アプリページのスクロールバーを消せない……
と記事を書きましたが、どうやら消す事が出来ました。






下記のコードを</body>の直前に書きます。


<div id="fb-root"></div>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'アプリID',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>



これで、先日まで苦労？していたスクロールバーともオサラバ出来ました。

普通に制作すれば……

実は、アプリページ内にシェアボタンを設置すると、スクロールバーが表示されます。
どうも、シェアボタンで使用している、FB.Shareのjavascriptが絡んでいるようで、今回もお手上げ……

しかし「いいねボタン」であれば、スクロールバーは表示されないので、いいねボタンを使えば、問題ありません。

現在フェイスブックとしては、シェアボタンは正式に対応していないボタンなので、いいねボタンに対応させる為の嫌がらせ？のように見えてしまうのは、私だけ？

まぁ、そんな事を言っても、この方法もいつ使えなくなるかわからない。
そう、facebookは簡単に仕様変更を行って、「変えたから、宜しくね！」と言って終わらせるからなぁ。

しかも技術関連のレポートは翻訳しないし……
仕様の変更はかまわないけど、もう少し情報をわかりやすくアナウンスしてほしいもんです。

facebookページのスクロールバーを消す。

いまさらの情報で申し訳ないのですが……
どうも、スクロールバーを消すと不具合が、と言うかですね。どうも

FB.Canvas.setAutoGrow();

の仕様が変った？感じですね。
急遽色々と検証した結果、結論は。


スクロールバーを表示させたくないのであれば、iframe内の表示を
横810px　縦1280px以内の収めるしか方法が無いようです。

どうも今回の変更だと、基本画面サイズを超えた場合に、縦のスクロールバーに関しては表示の回避が出来ないようになってしまったようです。

つまり、基本画面サイズ横810px　縦1280pxまでの大きさならば、スクロールバーの非表示が可能ですが、それを越えた場合、必ずスクロールバーが表示されます。

以前であれば、基本サイズを超えた大きさ（殆どの場合、縦方向）はそのままブラウザーのスクロールバーで下にスクロール出来たのですが、現在の仕様では、あくまでiframe内で処理をするようになっている様です。

つまり、iframeの基本画面サイズである横810px・縦1280pxを越えた場合、iframe内部にスクロールバーが表示されるようになってしまうようです。そう、横810px・縦1280pxの内部にスクロールバーが表示されるので、実際の画面は横810pxで制作すると、右側がスクロールバーで隠れてしまいます。

また、CSSを使って強制的にスクロールバーを非表示にすることも可能ですが、それをやると画面が固定されてしまい、結局基本サイズ以上の表示は出来ないようです。（スクロールバーが表示されず、画面サイズは横810px・縦1280pxのままです）
※CSSでの強制非表示は、bodyタグに対して、縦方向のオーバーフローを非表示にする設定。
body{overflow-y: hidden;}

また、</body>の直前に入れる下記のスクリプトで、高さを指定してみましたが……

<div id="fb-root"></div>
<script>
 FB.Canvas.setAutoGrow({ width: 810, height: 1280 });
</script>

1280px以上の大きさにはならない事がわかりました。
つまり基本画面サイズの横810px・縦1280pxは何をどうやっても変更出来なくなっています。

他にも色々とやってみましたが、結論は……
完全にスクロールバーを消したいのであれば、コンテンツを基本サイズ内に収める事。
しか手立てが無いようです。

もし、コンテンツが基本サイズより、大きくなる様ならば、横幅を790pxで制作する事をお勧めします。
このサイズで制作すれば、縦が1280pxを越えてスクロールバーが表示されても画面右側に余裕があるので、デザイン的に崩れる事はないと思います。
（横790pxだと、横のスクロールバーも表示されません）

これに関して、もしかすると、アプリ系の何か？を変更すれば、表示が出来る？？
なんて事は無いと思いますが、いずれにしてもここまで来ると専門外になってしまうので、私には厳しいですね。

この件に関して詳しい方がいましたら、ご連絡ください。
と言うか、誰かこの辺のネタ、書いておらんですかね？？


2012/7/9 追記
どうやら、スクロールバーが表示されてる原因を特定しました。
これで、スクロールバーを消す方法が解りましたので、こちらをご覧ください。
http://hon-web.blogspot.jp/2012/07/facebook_09.html

Facebookファンゲートのエラー表示

ファンゲートを設置したら、エラーが表示されて、しばらく格闘してしまった……
ファンゲートに関するエラー情報が以外と少ない。
というより、エラーは想定していない設定マニュアルもどうなんだろうね……

ところでファンゲートについて簡単にご説明を。

ファンゲートは、フェイスブックアプリの一つで、いいねボタンを押した人と、押さない人で閲覧できるページを変えるという機能を持つモノです。


多分フェイスブックを使っている人は、一度ぐらいは見かけた事があるのではと思います。

例の「いいねボタンを押してね」とか「この先の情報はいいねボタンを押すと閲覧出来ます」というあれです。

興味がある人は「ファンゲート」で検索すると色々と出てくるの探してください。

さて、本題です。
このファンゲートを設置した……わ、いいけど、下記のエラーが表示される状態にハマり、情報を収集。

Fatal error: Call to undefined function json_decode() in

なに？Jsonが無い？？そんなはずはないんだが……
と思っていたら、しまった！サーバーの設定か……

使っているwebサーバーの仕様で、ある設定をしないと、php4で稼働するになっている事を、すっかり忘れていました。

json_decodeはphp5から追加されたモノなので、上記のエラーコードが表示されていた様ですね。
幸い、php5に変更するのは簡単でしたので、変更後テストすると。問題無く動く事が確認されました。

ちなみに、使用しいるwebサーバーは、hetemlですが、契約が結構古いので、現状でもphp4とphp5での共存稼働状態です。
最近の契約であれば、自動的にphp5になっているはずですが、ご心配な方はサーバーの仕様を確認してください。

ちなみに、どうしてもphp4で動かしたい場合は、下記のサイトを参考にしてください。


facebookアプリのファンゲート機能をPHP4で実装する


Facebookページ：iframeで「いいね！」を押す前と押した後で表示を変える“ファンゲート”について