フォーラム
お問い合わせ
最新版ダウンロードホーム > サポート・マニュアル > チュートリアル > 外部サービスとの連携 > Facebookページとa-blog cmsの連携
Facebook では、日々新しい機能が増え、仕様が変更され変化の激しいサービスとなっています。ご利用のバージョンによって、もしくは、Facebook 側の仕様変更により動作しなくなる可能性があります。ご了承ください。
2011年3月にFBMLが廃止され、iframe（インラインフレーム）で Facebook ページを開設するようになりました。 a-blog cms 1.4.2 から Facebook 用のタッチモジュールが追加された事から、実際に Facebook ページを作成する方法を解説します。
Facebook ページの開設自体については、いろいろなページに解説もされているかと思いますので、こちらでは、Facebook アプリケーション としての iframe ページの追加方法をご紹介します。
Facebook アプリケーションを作成
Facebook に外部のHTMLファイルを読み込む際には、Facebook アプリケーション として登録する必要があります。アプリケーションの作成という言い方になりますがプログラミングをするという事ではなく、a-blog cms のコンフィグと同様にブラウザで設定を行うだけの作業になります。
https://www.facebook.com/developers/createapp.php
上記のURLにアクセスして、アプリケーションの作成を行います。
- アプリケーションの作成にはfacebookのユーザー情報にクレジットの情報または携帯電話番号の情報を登録する必要があります。
- SSL設定のされたサーバーにアプリケーションページで読み込むファイルは置かなくてはいけません。
最低限、設定が必要な部分のみ解説します。 Facebook Integration をクリックし、キャンバスとPage Tabsを設定します。
上記の Core Setting に書かれている アプリケーションID・シークレットキー を a-blog cms 側の設定に登録します。最低限の設定では以下の項目を設定して下さい。
キャンバス
| キャンバスページ | アプリケーションのURLになります。 |
|---|---|
| キャンバスURL | 上記のURLを表示させた際に表示させる a-blog cms で表示させているアドレスを設定します。iframeでページを追加するという用途では、一般の方がアクセスするページではありません。 |
| iFrameサイズ | Auto-resize を設定して下さい。 |
Page Tab
| タブ名 | デフォルトのタブ名になります。 |
|---|---|
| タブのURL | 実際に表示させる iFrame のHTMLのページになります。 |
a-blog cms 側の設定
管理ページ ＞ コンフィグ ＞ プロパティ設定 ＞ ウェブサービス に Facebook アプリケーション の Application ID & Application Secret を設定します。この設定ができると、以下のタッチモジュールを動作させる事ができるようになります。
| Api_Facebook_Touch_Signed | Facebookページのiframe内から呼び出されている、正規リクエストの時のみ表示する |
|---|---|
| Api_Facebook_Touch_NotSigned | Facebookページのiframe内から呼び出されていない、非正規リクエストの時のみ表示する |
| Api_Facebook_Touch_Like | 表示元のFacebookページを、ユーザーがイイネしている時のみ表示する。非正規リクエストであれば表示しない |
| Api_Facebook_Touch_NotLike | 表示元のFacebookページを、ユーザーがイイネしていない時のみ表示する。非正規リクエストであれば表示しない |
| Api_Facebook_Touch_Admin | ユーザーが、表示元のFacebookページの管理者である時のみ表示する 。非正規リクエストであれば表示しない |
| Api_Facebook_Touch_NotAdmin | ユーザーが、表示元のFacebookページの管理者である時のみ表示する 。非正規リクエストであれば表示しない |
利用例
<!-- BEGIN_MODULE Api_Facebook_Touch_Like --> <p>いいね！している時に表示される。</p> <!-- END_MODULE Api_Facebook_Touch_Like --> <!-- BEGIN_MODULE Api_Facebook_Touch_NotLike --> <p>いいね！されていない時に表示される。</p> <!-- END_MODULE Api_Facebook_Touch_NotLike -->
注意事項
a-blog cms 側のキャッシュ機能が有効になっていると、キャッシュされた情報が表示され正常に動作しない事になります。Facebookコンテンツを表示させるダミーのカテゴリーを用意し、その部分だけルールを利用しキャッシュしない設定にする必要があります。
Api_Facebook_Touch_Like 等のタッチモジュールは、iframe 内で移動し2ページ目では機能しません。
外部のページにリンクがある場合には、そのままリンクすると iframe 内に読み込んでしまいますので、target="_blank" 等が必要になります。
サンプルコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="ja" />
<title>%{BLOG_NAME}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
FB.init({
appId : 'Facebook Application ID',
status : true,
cookie : true,
xfbml : false
});
FB.Canvas.setAutoResize();
</script>
<!--
Facebookアプリで読み込む場合は、何らかの方法でキャッシュが無効になるようにカスタマイズしてください。
キャッシュが有効な場合、タッチモジュールが閲覧者ごとに正しい表示を返せなくなります。
-->
<!-- BEGIN_MODULE Api_Facebook_Touch_Signed -->
<p>署名済みのリクエストです</p>
<!-- BEGIN_MODULE Api_Facebook_Touch_Like -->
<h1>Likeされています</h1>
<!-- END_MODULE Api_Facebook_Touch_Like -->
<!-- BEGIN_MODULE Api_Facebook_Touch_NotLike -->
<h1>Likeされていません</h1>
<!-- END_MODULE Api_Facebook_Touch_NotLike -->
<div>ここにFacebookページ用のコンテンツが入ります</div>
<!-- BEGIN_MODULE Api_Facebook_Touch_Admin -->
<dl>
<dt>現在日時</dt>
<dd>%{NOW_DATE} %{NOW_TIME}</dd>
<dt>ユーザーエージェント</dt>
<dd>%{UA}</dd>
<dt>接続元</dt>
<dd>%{REMOTE_ADDR}</dd>
</dl>
<!-- END_MODULE Api_Facebook_Touch_Admin -->
<!-- END_MODULE Api_Facebook_Touch_Signed -->
<!-- BEGIN_MODULE Api_Facebook_Touch_NotSigned -->
<h1><a href="#">Facebookからご覧ください</a></h1>
<!-- END_MODULE Api_Facebook_Touch_NotSigned -->
<p>%{NOW_DATE} %{NOW_TIME}</p>
</body>
</html>
ドキュメントの内容に関するお知らせフォーム
内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。
