2013年5月17日金曜日

ブログに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 コメント欄

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

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



2013年5月14日火曜日

こんなところに、円城 塔(笑


今日はちょっと与太話など。

知っている人は知っている。
つまり裏を返せば……
知らない人は、知らない。
と言う事でもある。

芥川賞作家の、円城 塔がこんな所で連載しているなんて、知りませんでしたよ(笑
現在、最新話の第3話が掲載されたばかりです。




しかも、掲載しているのは、お堅い日立製作所さん。
いや、日立だからこそ円城 塔なのかな?

うん。多分そうだろう。
この掲載企画を出したのが、日立側なのか、サイト制作会社なのか?
まぁ、どちらでもいいですが。

短編連載で【システムを繋ぐ】とうい処理(プログラム)を擬人化?いや表現手段のひつとしての偽装?なのかも。
いずれにしても、そんな無理のあるお話を成立させる事が出来る作家さんは、円城 塔しかいなかったのかも?

あるいは、単に担当者がファンで、ダメもとでオファーしたら、あっさりOKだったなんて落ちかもしれないけど。

いずれにしても、一見すると意外な感じのする、日立製作所と円城 塔のコラボは、実はかなりシックリくる感じがするのは、私だけ   かな?(笑


日立製作所
円城 塔
中間小説集
http://www.hitachi.co.jp/Prod/comp/soft1/omr/novel/index.html

2013年5月13日月曜日

アプリ設定メッセージ 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
を修正しないと、7月以降にアプリで問題が発生する可能性があるから、修正してください?

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

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



作業はこれだけ。

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



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

と言う内容の様です。


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

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

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

2013年5月10日金曜日

SNS対策にOGPタグは必須です。 今さら……第53回


今さら聞けないネットのあれこれ。
「SNS対策にはOGPタグは必須」
についてお話します。


重要度:★★★★
難易度:★★~★★★★


OGPタグと言う言葉を聞いた事がありますか?
最近はFacebookがそこそこ流行っているので、徐々にではありますが、一般にも広がってきています。



 OGP(Open Graph Protocol)

まぁ名前はどうでもいいのですが、どういった事をするかと言いますと。
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形でHTMLに付加する記述方法のことです。
もう少し解りやすく言えば、
いいねボタンを押して、コメントすれば、タイムラインに、サイト情報が画像入りで掲載される。と言う夢の様?なタグの事です。



図1
コメントしたのボックス内に画像・ページタイトル・概要などがチキンと入っている。


上記の様に、OGPタグを適切に設定してあるサイトでは「いいね」ボタンを押すと、自分のコメント欄の下に枠で囲まれた内部の内容を自動的に表示してくれます。

サンプルの画像は、Facebookですが、mixiでも同じ様な表示がされます。

ちなみに、設定が適正にされていない、あるいは設定そのものがされていない場合は、下記の画像の様になります。


図2
設定がされていないと、タイトルとサイトURLしか表示されない。


いいねを押しただけで、このようにタイムラインに表示されるのであれば、キチンと設定しておきたいですよね。
綺麗に表示されていれば、それでけで見る相手に対して、良い印象を与えられます。

設定方法は、それほど難しくは無いのですが、多少なりともHTMLの知識が必要になるので、解らない人は、解る人に聴きながら設定した方が、良いでしょうね。

またブログにも当然設定出来るのですが、設定するブログによって方法が違ったり、書き出すタグの書式が特殊だったりするので、それぞれのブログ(アメブロやYahooブログなど)に合った方法を探してください。
大抵の場合は検索にあるはずです。


では具体的な代表的な書式を書きます。
下にある書式だけもで抑えておけば、最低限の形にはなるので、やっておきましょう。

下記のメタタグをHTMLの<head>~</head>内に記述します。

1:/// <meta property="og:title" content="タイトル" />
2:/// <meta property="og:type" content="オブジェクトのタイプ" />
3:/// <meta property="og:url" content="このページのURL" /> 
4:/// <meta property="og:image" content="表示される画像のパス" /> 
5:/// <meta property="og:description" content="概要を説明する文章" /> 
6:/// <meta property="og:site_name" content="サイトの名前" />

** 以下Facebook用OGP ***
7:/// <meta property="fb:app_id" content="アプリID"/>



1:ページタイトル
個別のページタイトルを表示します。
ブログのように様々なページがある場合に、このページタイトルを表示しておくことで、他のページと区別を付ける事が出来ます。またこのタイトルが見出しの役目も果たすので、解りやすいタイトルにしておくことが重要です。

2:ページの種類
このページが、サイトのページ(企業や一般的なホームぺージ)なのか、ブログなのかを判別するタグ。
修理は
・article ・blog ・websit
の3種類

3:ページURL

現在のページURLです。


4:表示画像
表示させるサムネイル画像のパス


5:概要文章 ※
概要文ですが、これ実は設定しない方が良い場合があります。
特定のブログなどは、サイト内の本文最初に出てくる<p>~</p>の文章を自動的に取得して表示する設定になっている場合があるからです。
ただしこの項目を未設定にすると、最悪の場合、概要文章はなにも表示されない事があるので、注意が必要です。


6:サイト名称
掲載サイトの名称です。

Facebook用OGP
必ず必要という事は無いですが、Facebookに対してOGPを設定したいのであれば、必須になってきます。

7:アプリID
このOGPを動かす為に必要なアプリIDです。


最低でも、上記の6種類+1のタグを、HTMLのヘッダー部分に入れておけば、Facebookやmixiで綺麗な表示がされます。ただし、Facebookやmixiなど独自のOGPタグ設定があるので、それぞれのSNSに対応したいのであれば、その仕様を確認してた方が良いでしょう。


上記以外にも、電話番号や住所などといった要素のタグも用意されいますので、興味のある方は調べてみてください。


参考サイト


OGPタグに関して比較的詳しいサイト ////
Facebookなどで使われている「OGP」の一覧



ブログ設定に関するOGP(検索結果) ////
検索キーワード:ogp 設定 ブログ