Facebookの最近のブログ記事

最近のFacebookの広がりを考えると、ブログのコメント欄もFacebookコメントに変更した方がメリットがありそうですね。
という訳でコメント欄をFacebookコメントに変更してみました。
対応はとても簡単。以下の手順です。


●１、Facebook Commentsページにアクセス
----------------------------------------------------------------------------------------------------
http://developers.facebook.com/docs/reference/plugins/comments/


●２、コメント欄の設定
----------------------------------------------------------------------------------------------------
・URL
・記事表示数
・幅
・カラー

を設定し、コードを取得。
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments
href="<$mt:EntryPermalink$>" num_posts="20" width="525"></fb:comments>


ブログに設置するには、記事個別にアドレスを取得する必要があるので
href="***" 部分をそれぞれテンプレートタグに変更します。

【MovableTypeの場合】　ＭＴタグの<$mt:EntryPermalink$>を入力。
【Wordpressの場合】　WPタグの<?php the_permalink(); ?>を入力。


この修正コードをテンプレートに埋め込めばＯＫです。

最近は設置するのが当たり前になっている各種ソーシャルボタンですが、
ちょっと作業していないと「あれ？」と忘れてしまう事もあります。
そんな時はこのまとめサイトで確認です。

●「Facebookいいね！ボタン」をホームページやブログに設置

●twitter「ツイートボタン」をホームページやブログに設置

●google+1ボタンをホームページやブログに設置

●「はてなブックマーク数＆登録ボタン＆ランキング」をホームページやブログに設置

●Evernote（エバーノート）のクリップボタン（サイトメモリー）をホームページやブログに設置

※各インターフェイスは常に進化しますので変更されている場合があります。

通常Facebook用ウェルカムページを制作するには、

●開発者ページ
http://www.facebook.com/developers/

からアプリケーション作成を行う必要がありますが、これが結構面倒...。
なんかインターフェイスもコロコロ変わるので苦戦しました。



しかし単純に画像を貼ったウェルカムページで良い場合は
---------------------------------------
●ウェルカムページメーカー
http://welcome-page.jp/
---------------------------------------
が非常に便利です。１分もあれば設定可能です。

しかも「いいね前」「いいね後」で表示画像を切り替えもできちゃいます。
今後は画像ファイルだけではなく、HTMLソースにも対応してもらえたら泣いて喜びます^^


そんな「ウェルカムページメーカー 」で私のFacebookページもウェルカムページを設定してみました。どうぞ試しに「いいね！」をクリックしてみてください～...。

↓こちら
http://ja-jp.facebook.com/LALAROCKETS

ブログにFacebookのいいねボタンを設置した時のおぼえがきです。


まずはじめに「いいねボタン」のコードを「Like Button - Facebook開発者ページ」から取得。

すると、以下画面が表示されますので、必要に応じて設定を変更します。
※画像をクリックすると拡大表示します。






●URL to Like
いいね！の対象となる記事のURLを入力します。
MovableTypeやWordpressで各記事毎にいいね！ボタンを設置する場合は
【Wordpressの場合】<?php the_permalink(); ?>
【MTの場合】　　　　<$mt:EntryPermalink$>
の記述を入力します。

出力されたコードの
<iframe src="http://www.facebook.com/plugins/like.php?href=********
*******部分を書き換えます。


●Send Button (XFBML Only)
特定のグループにいいね！を送る事ができます。
残念ながらiframeコード出力には対応してません...。


●Layout Style
右にプレビューが表示されますので、３種より好みのスタイルを選択します。

●Show Faces
プロフィール写真の表示、非表示を選択します。true（表示）。false（非表示）

●Width
表示エリアの横幅を指定。

●Verb to display
likeが「いいね！」表示です。プレビューはLikeとなってますが、実際は自動的に「いいね！」と表示されます。
recommendは「おすすめ」となります。

●Font
フォントを指定。デフォルトのままでＯＫかと思います。

●Color Scheme
明るめのボタンと暗めのボタンを選択できます。


上記を入力したら「Get Code」をクリックしてコードを取得します。
HTML5とiframeとXFBMLの３種のコードが表示されますので、
上記コードを自社ホームページやブログ（WordPress、Movable Type）に記述すればＯＫです。


【MTの場合　例】
<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink$>&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>


【Wordpressの場合　例】
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>


【CMS以外で構築のホームページの場合　例】
javascriptで該当ページのURLを取得します。