TopFacebook > 2011年10月
2011年10月20日

WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法

October 20,2011 2:55 AM
Tag:[, , ]
Permalink

WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。

1.問題点

次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。

WordPressとjQuery Tabs UIを使ったタブ

上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。

WordPressとjQuery Tabs UIを使ったタブ(NG)

余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です(笑)。

Facebookページ プロフェッショナルガイド
蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和
毎日コミュニケーションズ
売り上げランキング: 699

2.原因

レイアウトが崩れる原因は次の3つの条件が重なった場合です。

1つめの条件は、ユーザーがFacebookの「セキュリティ設定」でセキュア接続を利用していることです(下)。

WordPressとjQuery Tabs UIを使ったタブ

2つめの条件は、WordPressのIFrameタブ表示用のテンプレートに次のようにhome_url()を利用していることです。

<link type="text/css"
  href="<?php echo home_url(); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

そして3つめの条件は、「https」のドメインが「http」のドメインと異なる場合です。さくらインターネットの場合、独自ドメインのSSLは次のようになります。

  • http://user-domain/
  • https://secureXXXXm.sakura.ne.jp/user-domain/

これら3つの条件が揃うと、ユーザーがセキュア接続でIFrameタブを閲覧した場合、home_url()で出力されるスキーム名は自動判別で「https」になります。ですが、WordPressの管理画面で設定している「サイトのアドレス」が「http」を想定したURLになっている場合、正しいURLが出力されません。

例えば、上記のさくらインターネットの例では、home_url()の出力は、

  • https://user-domain/

となり、jQuery UI TabsのCSSを正常に取得できず、デザインが崩れるという結果になります。

3.対策

対策は何通りかあると思いますが、次のようにhome_url()の第2パラメータにスキームを指定することで解消します。スキームを指定すれば「https」で出力されなくなります。ユーザーがセキュア接続を利用していても、IFrameタブの中ではhttpスキームによるアクセスが可能です。

<link type="text/css"
  href="<?php echo home_url('','http'); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

このケースではCSSファイルのURLを例に説明しましたが、JavaScriptファイルや画像ファイルなどのアクセスでhome_url()を使っている場合も同様です。

4.その他

IFrameタブの動作確認を行う場合、セキュア接続の有無によるテストも忘れずに行いましょう。

Comments [0] | Trackbacks [0]
2011年10月 3日

Facebookのタイムラインにアプリを追加する方法(オープングラフアプリ・タイムラインアプリ)

October 3,2011 1:55 AM
Tag:[, ]
Permalink

Facebookの新しい機能「タイムライン」に、アプリを追加できるようになりました(オープングラフアプリ・タイムラインアプリ)。Facebookアプリ上で行ったアクションが次のようにタイムラインに表示されます。

タイムライン

ここでは開発者ブログの「How To: Get Started with the Open Graph」にあるサンプルを実際に使って、Facebookアプリをタイムラインに表示する方法を紹介します。

サンプルはFacebook内に表示するIFrameタブのアプリではなく、通常のウェブサイトでFacebookアプリを動作させます。また、元記事ではFacebookの「Cloud Services」を使ってSSL接続対応を行ってますが、ここでは自前のレンタルサーバーにファイルをアップロードする方法で説明します。

1.アプリの作成

まずウェブサイト用のアプリを作成します。アプリのページで「Create New App」をクリック(初めて作る場合はその前に許可画面が表示されると思います)。

アプリのページ

適当なアプリ名とネームスペースを入力し、「I Agree~」をチェックして「続行」をクリック。ネームスペースに数字は使えません。

アプリ作成ダイアログ

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

セキュリティコード

アプリの設定画面に移動するので、「Website」をクリックしてフォームを表示させ、「サイトURL:」に次項で作成するFacebookアプリ用のファイルのアップロード先のURLを設定し「変更を保存」をクリック。分からない場合は手順を進めていけば分かると思いますので、適当なURLを入れておいてください。

Website

2.タイムラインとアプリの接続の設定

以下の内容を「cookie.html」というファイルで保存します。html要素のlang属性やscript要素にある「en-US」は「ja-JP」にした方がいいかもしれませんがこのまま進めます。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
     xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head>
<head/> 
<body> 
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({ 
        appId:'YOUR_APP_ID', cookie:true, 
        status:true, xfbml:true, oauth:true
    });
</script>
 
<fb:add-to-timeline></fb:add-to-timeline>
 
<h3>
    <font size="30" face="verdana" color="grey">
        Stuffed Cookies
    </font> 
</h3> 
<p>
    <img title="Stuffed Cookies" 
            src="http://example.com/cookie.jpg" 
            width="550"/>
</p>       
</body> 
</html>

赤色のYOUR_APP_IDには、1項で作成したアプリのアプリケーションIDを設定してください。ファイルを保存後、1項で設定した「サイトURL:」直下にcookie.htmlをアップロードします。

実際にアプリとタイムラインの接続を制御する部分は以下です。この「Add To Timeline」はソーシャルプラグインとして公開される予定です(2011年10月2日現在はベータ版)。

<fb:add-to-timeline></fb:add-to-timeline>

ファイル内の「http://example.com/cookie.jpg」はクッキー画像です。これはhttps://developers.facebook.com/attachment/cookies.jpgからダウンロードできますが、手持ちの画像で全く問題ありません。

ブラウザからcookie.htmlにアクセスすると次のような画面が表示されるので、「タイムラインに追加」をクリック。

cookie.html

「ログインしてFacebookに追加」をクリック(ログイン状態であれば異なる画面かもしれません)

ログインしてFacebookに追加

これでアプリとタイムラインが接続に追加されました。

cookie.html

3.Open Graphの設定

Facebookアプリの「Open Graph」の項目を設定します。アプリ管理画面左メニューの「Open Graph」をクリック。

アプリ管理画面

サンプルにしたがって「cook」と「recipe」を入力して「スタート」をクリック。

Open Graph

アクションを設定します。ここでは特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。

Open Graph

オブジェクトを設定します。ここでも特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。

Open Graph

アグリゲーションを設定します。ここではサンプルにしたがって「Aggregation Title」のみ「Things I've cooked」に変更して「Save and Finish」をクリック。

Open Graph

これで設定完了です。

Open Graph

4.アクションの公開

オブジェクトの生成(=OGPの設定)を行います。

以下の内容をcookie.htmlのhead要素としてペーストします。

<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE: 
    http://ogp.me/ns/apps/YOUR_NAMESPACE#"> 
    <meta property="fb:app_id" content="YOUR_APP_ID" /> 
    <meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 
    <meta property="og:title" content="Stuffed Cookies" /> 
    <meta property="og:image" content="http://example.com/zhen/cookie.jpg" /> 
    <meta property="og:description" content="The Turducken of Cookies" /> 
    <meta property="og:url" content="http://example.com/zhen/cookie.html"> 
</head>

ペーストした中にある「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。3ヶ所あります。head要素の「ns#」の後ろは半角スペースのままでOKです。

<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE: 
    http://ogp.me/ns/apps/YOUR_NAMESPACE#"> 
    …中略…
    <meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 

「YOUR_APP_ID」にアプリのアプリケーションIDを設定してください。

    <meta property="fb:app_id" content="YOUR_APP_ID" /> 

og:imageのcontent属性値を、cookies.htmlのimg要素のURLに変更します。

    <meta property="og:image" content="http://example.com/zhen/cookie.jpg" />

og:urlのcontent属性値を、ウェブサイトのcookie.htmlのURLに変更します。

    <meta property="og:url" content="http://example.com/zhen/cookie.html"> 

head要素はアプリ管理画面の「Open Graph」→「Object Types:」の「Get Code」で取得できます。

Open Graph

保存後、cookie.htmlを上書きアップロードします。

続いて、アップロードしたファイルをデバグします。アプリ管理画面の「Use Debug Tool」をクリック。

アプリ管理画面

cookie.htmlのURLを入力

デバグ画面

次のように表示されればOKです。Errorが表示される場合はOGPが正しく設定されていない可能性があるので、確認してください。

デバグ画面

続いてアクション公開用のスクリプトを追加します。前準備としてまず、cookie.htmlのhead要素に以下を追加します。

    <script type="text/javascript">
    function postCook()
    {
        FB.api('/me/YOUR_NAMESPACE:cook' +
                    '?recipe=http://example.com/cookie.html','post',
                    function(response) {
            if (!response || response.error) {
                    alert('Error occured');
            } else {
                alert('Post was successful! Action ID: ' + response.id);
                }
        });
    }
    </script>

「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。また、「http://example.com/cookie.html」の部分は、cookie.htmlのURLに書き換えてください。

同様に、cookie.htmlのbody終了タグの直前に以下を追加します。

        <form>
            <input type="button" value="Cook" onclick="postCook()" />
        </form>
        <fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>

「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。

保存後、cookie.htmlを上書きアップロードします。ブラウザでcookie.htmlにアクセスすると、次のような「cook」というフォームボタンが一番下に表示されるのでクリックします。

cookie.html

アプリが正常に動作しました(サンプルでalertを表示するようにしています)。

cookie.html

「cook」をクリックしたユーザー(私)のタイムラインにアプリが表示されました。最近のアクティビティにも表示されています。

タイムライン

タイムラインで該当のアプリだけを表示したい場合は、アプリ管理画面の「See App Timeline View」をクリック。

アプリ管理画面

これで該当アプリだけがタイムラインに表示されます。

タイムライン

5.承認のための要求

前項までの設定では、作成したアクションはアプリ開発者やテストユーザーにしか公開されないため、公開のための承認要求が必要なようです。

アプリ設定画面の「Open Graph」のAction Typeの右にある「送信」をクリック。

承認要求

「Continue」をクリック。

承認要求

「Provide Usage Instructions」に任意の内容を入力して「Submit for Approval」をクリック。ここではサンプルにしたがって「Click cook button on app」と入力します。

ダイアログ

2012年1月22日追記:承認画面のメッセージが変わりました。承認依頼は受け付けられたようです。

ダイアログ

以下は2011年10月現在のもので「Open Graphはベータ版のためまだ承認できません」といった内容のダイアログが表示されます。

ダイアログ

状態が「確認中」に代わります。2011年10月3日現在ではまだ承認されていません。

状態

6.その他

アプリ管理画面のRolesの項目にテストユーザー「Auth Dialog Preview User」が追加されるようです。このテストユーザーでアクションを実行すれば結果がユーザーのニュースフィードなどに反映されるようです。

テストユーザー

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