TopFacebook > 2011年3月
2011年3月28日

Movable TypeやWordPressのメインページ・アーカイブページにFacebookのコメント欄を表示する

March 28,2011 1:55 AM
Tag:[, , , ]
Permalink

Movable TypeやWordPressのメインページやアーカイブページにFacebookのコメント欄を表示するカスタマイズです。

Movable TypeやWordPressにFacebookのコメント欄を表示する」ではブログ記事ページ・個別記事ページなど、1ページに1記事の場合の設定方法を紹介しましたが、1ページに複数の記事が表示されるトップページやアーカイブページにも記事別に表示することが可能です。

1.概要

イメージを下図に示します。

メインページやアーカイブページなど、Facebookコメントボックスを記事単位に表示します(①)。投稿コメントはFacebookのウォールにも反映され、コメントにはそれぞれの記事タイトルが表示されます(②)。

イメージ

2.サンプル

サンプルは当サイトのトップページです。複数の記事に対しFacebookコメントが表示されます。

サンプル1

それぞれの記事にコメントしたところです。同じ顔ばかりで気持ち悪いのは気にしないでください。

サンプル2

下は、上の画面のそれぞれの投稿コメントがFacebookに表示されたところです。各コメントに異なる記事タイトルが表示されています。

サンプル3

3.カスタマイズ

Movable TypeやWordPressにFacebookのコメント欄を表示する」の3項・4項・5項の作業を行ったあと、各コードを次のように設定してください。例はMovable Typeですが、WordPressも同じです。

まず、head要素に以下の内容を設定します。「xxxxxxxxxxxxxxx」の部分はそのまま設定しないように注意してください。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>

そして、メインページやカテゴリアーカイブ・月別アーカイブなどの記事を繰り返し表示するタグの中に以下の内容を設定します。

<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>

Movable Typeでは次のようにMTEntriesタグ内部にfb:commentsタグを設定します。

<mt:Entries>
…中略…
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>
…中略…
<mt:Entries>

WordPress 3.xのTwentytenテーマであれば、loop.phpのwhile文の中にfb:commentsタグを設定します。

<?php while ( have_posts() ) : the_post(); ?>
…中略…
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>
…中略…
<?php endwhile; // End the loop. Whew. ?>
Comments [2] | Trackbacks [0]
2011年3月11日

Movable TypeやWordPressにFacebookのコメント欄を表示する

March 11,2011 1:55 AM
Tag:[, , ]
Permalink

Movable TypeやWordPressなどのブログにFacebookのコメント欄を表示するカスタマイズを紹介します。コメント欄の表示にはFacebookのソーシャルプラグイン「Comments」を利用します。

1.概要

イメージを下図に示します。

ブログ記事ページに表示したコメント欄からコメントを投稿すれば、即座にブログ記事ページに投稿コメントが反映されます(①)。投稿コメントはFacebookのウォールにも反映されます(②)。Facebookに表示されたブログ記事のコメントに返信すれば、返信がFacebookとブログ記事の両方に反映されます(③)。

イメージ

2.動作例

実際の動作例を示します。

ブログ記事に次のようなコメント欄を表示することができます。

コメント欄

投稿コメントは次のように表示されます。「返信」をクリックして投稿すればコメントがインデント表示されます。

コメント欄

ブログ記事ページのコメントはFacebookにも反映されます。投稿したブログ記事タイトルも表示されます。

コメント欄

このようにFacebook上で返信することもできます。

コメント欄

Facebook上の返信コメントはブログ記事ページに反映されます。

コメント欄

3.アプリIDの取得

まず、「Create an App」のページにアクセスし、コメント欄を利用するサイト名とURLを入力(http://で開始し、末尾は"/"または"?"で終了すること)します。設定したら「create app」をクリック。

Create an App

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

成功したら次のような画面になります。

アプリID

4.ソーシャルプラグイン「Comments」の設定

「Social Plugins」のページで「Comments」をクリック。

「Social Plugins」のページ

次の画面で以下を設定し、「Get Code」をクリック。設定フォームに入力するとフォーム下にプレビューが表示されます。

  • URL to comment on:コメント欄を表示するURL。とりあえずブログのURLを設定して後で変更します。
  • Number of posts:デフォルトの表示コメント数
  • Width:コメント欄の幅

「Comments」のページ

「Commentsのプラグインコード:」をコピーします。モザイク部分に1項で取得したアプリIDが設定されていることを確認してください。設定されていない場合は取得したアプリIDと置き換えてください。

「Commentsのプラグインコード:」

5.プラグインコードの修正

プラグインコードを次のように変更します。「www.koikikukan.com」の部分は当サイトの例なので、利用するドメインに適宜読み替えてください。

変更前(赤字は変更対象)

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="www.koikikukan.com" num_posts="5" width="470"></fb:comments>

変更後(Movable Typeの場合。青字は変更後の値)

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>

変更後(WordPressの場合。青字は変更後の値)

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>

6.テンプレートの修正

4項で修正したプラグインコードをMovable TypeまたはWordPressの記事ページ出力用のテンプレートに埋め込みます。

Movable Typeでスタティックパブリッシング(静的生成)の場合はブログの再構築を行ってください。

以上です。

Comments [11] | Trackbacks [1]
2011年3月10日

FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する

March 10,2011 1:55 AM
Tag:[]
Permalink

Facebookアプリを利用して、FacebookページにMovable TypeやWordPressのCMSを使って最近のブログ記事を表示する方法を紹介します。

以下はサンプルページです。最近のブログ記事5件の概要とブログ記事1o件のタイトルを表示しています。

サンプル
サンプルページ

FacebookページにブログのRSSフィードを表示する」ではRSSフィードを表示する方法を紹介しましたが、本エントリーの方法であればより自由なデザインでページをカスタマイズすることができます。

1.Facebookにブログ記事を表示する仕組み

イメージを図に示します。

イメージを図

Facebookにブログ記事を表示するには、まず利用しているCMSでFacebookに表示したいページをテンプレート等を使ってhoge.htmlなどのファイル名で出力します(①)。

次に、Facebook側で出力したページを表示するためのFacebookアプリを登録します。登録したアプリにはCMSで出力するページ(ここではhoge.html)のURLを指定します(②)。

マイページまたはFacebookページで登録したアプリの利用設定を行えば、アプリのタブがマイページまたはFacebookページに表示されるので、そのタブをクリックすれば、アプリが①のページを取得し(③)、表示します(④)。

以下設定方法です。完全に理解できていない部分もあるので認識誤りがありましたらご指摘ください。

2.Facebookアプリの登録

ここでは必要最低限の操作のみ紹介します。

アプリケーションを作成」のページで任意のアプリケーション名を設定し、「同意する」を選択して、「アプリケーションを作成」をクリック。

アプリケーションを作成

表示されている文字を入力して「送信」をクリック。

表示されている文字を入力

3.Facebookアプリの設定

成功したらアプリケーション設定画面に移動します。「About」タブではアプリケーション名やアプリケーションのサムネイル・ロゴなどを登録します。「アプリケーション名」はFacebookページに表示する名称とは関係ないので適当につけてください。

アプリケーション設定画面

「Facebook Integration」タブで、「Canvas」の項目にある「Canvas Page」と「Canvas URL」を設定します。今回のメインとなるページの設定ではありませんが、タブを利用するにはこの項目の設定が必須です。「Canvas Page」は登録したアプリのベースURLです。「Canvas URL」は「Canvas Page」に対応する自サーバなどのURLです。具体的には、「Canvas URL」に配置したindex.htmlは、「Canvas Page」のURLにアクセスすれば表示されるようになっています。「Canvas Type」は「IFrame」を選択します。

アプリケーション設定画面

「Page Tabs」が今回のメインの設定となり、この項目にある「タブ名」「Page Tab Type」「タブのURL」を設定します。「タブ名」は任意の名称を設定してください。この部分がタブ名になるようですが、アプリ利用時に変更することができます(後述)。「Page Tab Type」は「IFrame」を選択します。「タブのURL」にはFacebookページに表示されたアプリのタブをクリックしたときに表示させたいファイルのURLを設定します。「Canvas URL」と異なるドメインでもOKです。

アプリケーション設定画面

「Advanced」タブの「サンドボックスモード」を「有効にする」を設定しておけば、開発中にこのアプリを他のユーザーが利用できなくなるようです。実際に利用する際には「無効にする」を選択してください。

サンドボックスモード

4.FacebookページでのFacebookアプリの利用

マイアプリケーションのページ」の左メニューから該当のアプリを選択。

アプリを選択

右側の「Application Profaile Page」をクリック。

Application Profaile Page

「マイページへ追加」をクリック。

マイページへ追加

追加したいFacebookページなどの「Facebookページに追加」をクリックしたあと、「閉じる」をクリック。

Facebookページに追加

これで追加したFacebookページのタブとして追加されます。

タブとして追加

5.タブ名を変更する

「Facebookページを編集」をクリック。

Facebookページを編集

「アプリ」をクリック。

アプリ

「設定を編集」をクリック。

設定を編集

「Custom Tab Name:」がタブ名になるので、任意の内容を入力して「保存」→「OK」をクリック。

Custom Tab Name:

タブの表示が変わりました。

タブの表示

6.ページタブに出力するサンプル

Movable Typeで最新の5件のブログ記事を出力するサンプルです(XHTMLとHTML5が混在していてすいません)。このコードをインデックステンプレートに貼り付け、出力ファイル名を「Page Tabs」の「タブのURL」に設定したファイルとして出力できるように設定します(ファイル名にはパスも指定できます)。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" title="Default" media="screen,tv" />
<title>最近のブログ記事</title>
</head>
<body>
<div id="fb-root">
<div class="box">
<mt:Entries lastn="5">
<div class="entry">
  <div class="entry_info">
    <h3><a href="<mt:EntryPermalink />" target="_top"><mt:EntryTitle /></a></h3>
    <div><mt:EntryDate format="%Y年%b月%e日" regex_replace="/\s/g","" /></div>
    <div>カテゴリ:[<mt:ParentCategories glue=" > "><mtif tag="MTCategoryCount"><a href="<mt:CategoryArchiveLink />" target="_top"><mt:CategoryLabel /></a><mt:Else><mt:CategoryLabel /></mt:if></MTParentCategories>]</div>
    <div>タグ:[<mt:EntryTags glue=", "><a href="<mt:TagSearchLink />&amp;IncludeBlogs=<mt:BlogID />" target="_top" rel="tag" title="<mt:TagName />のタグ一覧へ"><mt:TagName /></a></mt:EntryTags>]</div>
  </div>
  <div><p><mt:EntryBody words="100" /> ...</p></div>
  <iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:40px;" title="いいね!ボタン"></iframe>
</div>
</mt:Entries>
</div>
</body>
</html>

2011.04.02
3項のPage Tabsの画面を最新化しました。

Comments [12] | Trackbacks [0]
2011年3月 4日

Facebookページでノートを利用する

March 4,2011 1:55 AM
Tag:[, ]
Permalink

Facebookのノートは、ブログのようにちょっとした記事を書くために使うものです。

投稿直後の画面

が、Facebookページ作成直後のメニューには「ノート」のタブがありません。Facebookページ作成直後の左メニューに表示されるのは「ウォール」と「基本データ」の2つだけです。

ということで、Facebookページで「ノート」を利用する方法を紹介します。

1.ノートを追加する

Facebookページのウォール画面または基本データ画面の右上にある「Facebookページを編集」をクリック。

「アプリ」をクリック。

「ノート」の「設定を編集」をクリック。

中央の「追加」をクリック。

表示が「追加済み(削除)」となったことを確認して「OK」をクリック。この時点で「ノート」がメニューに追加されます。

追加済み

追加されたことを確認するには、画面右上の「Facebookページを見る」をクリックして、Facebookページのトップページに移動。

「Facebookページを見る」をクリック

左メニューに「ノート」が追加されました。このリンクをクリックすれば作成したノートが表示されます(編集画面には移動しません)。ノートの編集は次項をご覧ください。ちなみに「Wall Paper」は「RSS Graffiti」というアプリケーションを追加した後に表示されるもので、本エントリーとは関係ありません。

「ノート」が追加

2.ノートの編集

「Facebookページを編集」をクリック。

「Facebookページを編集」をクリック

「アプリ」をクリック。

「アプリ」をクリック

「アプリケーションへ移動」をクリック。

「アプリケーションへ移動」をクリック

「ノートを書く」をクリック。

「ノートを書く」をクリック

これで編集画面が表示されました。

編集画面

編集画面ではタイトル・本文の他、タグや画像を挿入できます。画像は左右・中央の配置を決めることができます。プレビューも行えます。

編集画面

画像は本文中に <Photo x> というタグを埋め込むことで表示されます。

タグ

投稿直後の画面です。

投稿直後の画面

余談ですが、投稿直後の画面の左メニューにはノートに関するメニューだらけで、Facebookのトップページに移動するリンクがありません。Facebookのトップページに一発で移動するには、左上の画像か、ひとつ前の画像の上部にある「xxさん作成」の部分をクリックするしかないようです。

投稿直後の画面

3.ノートを見る

Facebookの左メニューにある「ノート」をクリックしたときに表示される画面は次のようになります。

投稿直後の画面

4.ノートの削除

Facebookページのウォール画面または基本データ画面の右上にある「Facebookページを編集」をクリック。

「アプリ」をクリック。

「ノート」の「設定を編集」をクリック。

「(削除)」をクリックして、「OK」をクリックすれば「ノート」をメニューから削除することができます。

メニューから削除

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3