TopFacebook > 2011年4月
2011年4月29日

Facebookのソーシャルプラグイン「Send Button」をブログに設置する

April 29,2011 2:55 AM
Tag:[, ]
Permalink

Facebookのソーシャルプラグインに「Send Button(Sendボタン・送信ボタン)」が追加されたので、ブログへの設定方法を簡単に紹介します。

「送信」ボタン

とりあえず、ネーミングはフォームの「送信」ボタンと紛らわしいこと間違いありません。

1.機能

「Send Button(送信ボタン)」は、友人やグループに記事やサイトを知らせるための機能です。

記事などに表示された「送信」をクリックすると、送信用のダイアログが表示されます。

送信用のダイアログが表示

「宛先」に送信先の友達やグループの名前を入力します。アルファベットを入力すれば候補の名前やグループ名が出てきます。メールアドレスを直接入力することもできます。

宛先選択

こんな感じでどんどん追加できます。あとは、メッセージを添えて送信します。

送信

送信されました。

送信完了

送信先にはURLとメッセージが送信されるようです。下は自分のメールアドレスに送ってみたものです。

送信メール

Facebookの友人宛の場合は「メッセージ」に送信されます。

Facebookのメッセージ

2.コードの取得

Send Buttonのページにアクセスして、FontとColor Schemeを設定して「Get Code」をクリック。「URL to Send」は後で修正するのでそのままで構いません。

Get Code

表示されたコードをコピー。

Get Code

3.コードの修正と貼り付け

コードにある「en_US」を「ja_JP」に修正。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="example.com" font="verdana"></fb:send>

Movable Typeの場合、「example.com」をMTPermalinkタグに置き換え、MTEntriesタグ内に設定します。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="<$mt:EntryPermalink$>" font="verdana"></fb:send>

WordPressの場合、「example.com」をthe_permalink()タグに置き換え、loop.phpやloop-single.phpの内部に設定します。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="<?php the_permalink()?>" font="verdana"></fb:send>
Comments [0] | Trackbacks [0]
2011年4月23日

Facebookで使用しているアプリを削除する方法

April 23,2011 12:55 AM
Tag:[]
Permalink

Facebookで使用しているアプリを削除する方法を紹介します。

1.マイページの左メニューの表示を削除する

ログインしている状態で右上ナビゲーションメニューの「アカウント」→「プライバシー設定」をクリック。

ホーム

「アプリとウェブサイト」の「設定を編集」をクリック。

プライバシー設定

「利用しているアプリ」の「不要または不適切なアプリを削除」のリンクをクリック。右側にある「設定を編集」をクリックしても同じ画面に移動します。

設定を編集

使用中アプリの一覧が表示されるので、右側にある×印をクリック。

使用中アプリの一覧

確認ダイアログが表示されるので「削除」をクリック。

確認ダイアログ

これで削除されました。

削除完了

これでマイページの左側にあるメニューから該当のアプリの表示が消えていると思います。

2.Facebookページから削除する

Facebookページでアプリを使っている場合、以下の方法で削除します。

ウォールなどの右側に表示されている「Facebookページを編集」をクリック。

「Facebookページを編集」

左メニューの「アプリ」をクリック。

左メニュー

アプリ一覧に表示された該当アプリの右側にある×印をクリック。

アプリ一覧

「削除」をクリック。

ダイアログ

これでFacebookページのメニューから削除されます。

Comments [0] | Trackbacks [0]
2011年4月16日

Facebookページにアクセスして「通常の接続(http)に切り替えますか?」と表示される問題について

April 16,2011 12:55 AM
Tag:[, ]
Permalink

Facebookページのiframeタブページにアクセスすると、コンテンツが表示される代わりに、「通常の接続(http)に切り替えますか?」と表示される事象があるようです。ということで本エントリーでまとめてみました。

1.問題点

セキュアな接続(HTTPS)でFacebookにアクセスしている状態でiframeタブページにアクセスすると、次のようなメッセージが表示される場合があります。

通常の接続(http)に切り替えますか?

Facebookをセキュアな接続(HTTPS)でご利用の場合、このコンテンツを表示することができません。
一時的に通常の接続(http)に切り替えますか?
ログインし直すとセキュアな接続に戻ります。

実際の画面
実際の画面

「続行」をクリックすればコンテンツが表示されます。

コンテンツが表示

「続行」をクリックしたあと、ログアウトして再度ログインすると、再びセキュアな接続でFacebookにアクセスできるようになります。

ちなみに、iframeタブアプリ開発者がセキュアな接続(HTTPS)でそのiframeタブページにアクセスすると、次のようなメッセージが表示されます。

セキュアなタブURLを更新してください

ユーザーがブラウザからセキュア接続(https)を使用してアプリを見ることができるように、開発者コンソールにアクセスしてセキュアなキャンバスページのURLを更新してください。

実際の画面
実際の画面

「続行」をクリックすれば、iframeタブアプリケーションの「Facebook Integration」設定画面にジャンプしてくれます。

2.原因

「通常の接続(http)に切り替えますか?」というメッセージが表示される原因は、次の条件が重なった場合です。

  • FacebookユーザーがHTTPSでFacebookにアクセスしている
  • iframeタブページの「Page Tabs」の「Secure Tab URL」が設定されていない

つまり、HTTPSでアクセスしている状態でiframeタブへのアクセスがHTTPの場合に、冒頭のメッセージが表示されます。

OKのケースとNGのケースを図に示します。

OKのケースとNGのケース

以前はこの条件が重なった場合でもiframeタブページは表示されたようですが、Facebookの動作が変更されたのかもしれません。

3.対処

対処は以下のいずれかとなります。2つめの対処は厳しいかもしれません。

  • FacebookユーザーがHTTPSでFacebookにアクセスしないようにする。
  • iframeタブページの「Page Tabs」の「Secure Tab URL」を設定する

1つめの対処の具体的な方法は、まずアカウントメニューの「アカウント設定」をクリック。

アカウント設定

マイアカウントの「設定」タブをクリック(選択されていればそのまま次へ)。

マイアカウント

「アカウントのセキュリティ」欄の「セキュアな接続(https)」のチェックを外して「保存」をクリック。

アカウントのセキュリティ

本質的な対処でないかもしれませんが、これで常にHTTPでFacebookにアクセスするようになります。HTTPSでアクセスが必要な場合はこの対処は使えません。

Comments [0] | Trackbacks [0]
2011年4月15日

Facebookにログインしていない場合の「いいね!」ボタンやコメントボックスについて

April 15,2011 12:55 AM
Tag:[, , ]
Permalink

Facebookにログインしていない場合の、ブログに表示している「いいね!」ボタンやコメントボックスの挙動について未確認でしたので、情報展開しておきます。

1.「いいね!」ボタンについて

Facebookにログインしていない状態でも「いいね!」ボタンはクリックすることができます。

クリックするとログインを促すウィンドウが表示されます。

ログインした直後に「いいね!」ボタンが押された状態になりました。

「いいね!」ボタン(ログイン状態)

ブラウザの他のウィンドウ(またはタブ)でFacebookからログアウトしてリロードすれば、次のように一人増えた状態で表示されます。

「いいね!」ボタン(ログアウト状態)

2.コメントボックスについて

Facebookにログインしていない状態のコメントボックスは、右下に「コメントしています...」というプルダウンメニューが表示されます。

コメントボックス(ログアウト状態)

クリックすると、ログイン可能なサービスが表示されます。

選択したサービスのログイン画面が表示されます。

ログイン画面

ログインするとコメントボックスが次のように切り替わります。

コメントボックス(ログイン状態)

コメントボックスの場合、右下の「変更」のリンクをクリックすればプルダウンに切り替わり、他のユーザーに切り替えたり、ログアウトすることができます。

変更のリンク

Comments [0] | Trackbacks [0]
2011年4月11日

Facebookでよく使われるようになったインラインフレーム(iframe)の注意事項

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

これまでウェブサイトの制作であまり使ったことがなかったインラインフレーム(iframe)ですが、Facebookが登場してからiframeタブやソーシャルプラグインなどで利用するシーンが増えてきました。

ということで、インラインフレームについての注意事項をまとめてみました。

1.親フレームでインラインフレームのCSSは定義できない

Facebookのコメントボックスを黒背景のブログで使えるようにする」でも書きましたが、親フレームで定義したCSSはインラインフレームに適用されません。

サンプル1
サンプル1

サンプルの枠上部にある「foo」という文字と枠内(インラインフレーム)の「bar」という文字に対し、親フレームで同じスタイルを与えていますが、インラインフレームには反映されていないことが分かります。

CSSを反映できるのはiframe要素までです。

2.リンクターゲットに気をつけよう

iframe内ページのリンクにtarget属性を付与しないと、リンク先のコンテンツがフレーム内に表示されてしまいます。

次の例は、当Facebookページの「いいね!ランキング」のiframeタブページをサンプルにした失敗例です。

インラインフレームにあるリンクをクリック

適切なtarget属性を指定しないとリンク先のコンテンツがフレーム内に表示

このようなことにならないよう、適切なリンクターゲット(target属性)を設定しましょう。フレームを解除して表示する場合はtarget属性に「_top」を指定します。

各target属性の振る舞いについてはサンプルで確認してください。他のフレームに表示する方法も掲載しています。

サンプル2
サンプル3

iframe3.htmlというのは、次項のサンプルで登場でする、アクセス方法を確認するスクリプトを組み込んだページです。

3.インラインフレームで表示されているかどうかを確認するには

該当のページがブラウザから直接アクセスして表示されているのか、インラインフレームとして表示されているかを判断するには、JavaScriptで次のような判定を行います。

<script>
if(self == top){ 
  alert("直接アクセスしています");
} else {
  alert("インラインフレームでアクセスしています");
}
</script>

上記のスクリプトの動作は次のサンプルで確認できます。IE6でも動作します。

サンプル3-1(直接アクセスした場合)
サンプル3-1

サンプル3-2(インラインフレームでアクセスした場合)
サンプル3-2

iframeタブは外部ページで作成するので、何かの役に立つかもしれません(そもそもFacebookの機能で判断できるかもしれませんが)。

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

Facebookのコメントボックスを黒背景のブログで使えるようにする

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

Facebookのコメントボックスを、黒背景のブログで使えるようにする方法について調べました。2011年4月時点の調査結果です。

2011.04.16 追記
コメントボックス作成画面に「Color Scheme」が追加されました。

以前のコメントボックス作成画面
以前のコメントボックス作成画面

2011年4月16日現在のコメントボックス作成画面(「Color Scheme」が追加)
2011年4月16日現在のコメントボックス作成画面

適用後のデザイン
適用後のデザイン

よって以下の記事は不要となります。

1.問題点

Facebookのコメントボックスは白背景であれば次のように表示されます。

コメントボックス(白背景)

黒背景の場合、コメント本文などが見えなくなってしまいます。

コメントボックス(黒背景)

コメントボックスの表示はfb:commentsタグを設定し、それがiframe要素として展開されます。iframe要素までは(そのページのCSSで)スタイルを設定できますが、iframe内の要素についてはスタイルが適用されません。

2.対処案1

本質的な解決ではありませんが、旧バージョンのコメントボックスにすることで黒背景でも見えるようになります。

旧バージョンのコメントボックス

背景を変更するには、fb:commentsタグに対して次の5つの変更を行います。

  • css属性を追加(適用したいCSSのURLを指定)
  • xid属性を追加(ページを一意に決めるための番号を指定)
  • url属性を追加(href属性と同じ内容を指定)
  • simple属性を追加(trueを指定することで不要な背景を削除)
  • href属性を削除

WordPressの場合の設定例は次のようになります。

変更前(赤色部分を削除)

<fb:comments
 num_posts="2"
 width="500"
 href="<?php the_permalink(); ?>"
 ></fb:comments>

変更後(青色部分を追加)

<fb:comments
 num_posts="2"
 width="500"
 css="http://www.fileden.com/files/2006/10/3/258652/dark_comments.css"
 xid="<?php the_id(); ?>"
 url="<?php the_permalink(); ?>"
 simple="true"
 ></fb:comments>

ただし、旧バージョンに戻すと以下の制約が発生します。

  • これまで使っていたコメント情報が(多分)引き継がれません
  • コメントがスレッド表示されません
  • いいね!がコメントボックスの先頭に表示されます。

参考サイトは以下です。

参考サイトには、旧コメントボックスの「いいね!」ボタンを非表示にする方法が書かれていましたが動作しませんでした。また、css属性の末尾に「?数字」を付与することが記載されていましたが、付与しない場合との差分が分かりませんでした。

ちなみに、CSSの変更可能なセレクタは以下に限定されている可能性があります(下記以外のセレクタのCSSを変更しても反映されなかったため)。

/* Like button text color */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}
 
/* Comemnts box text color */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}

3.対処案2

こちらも本質的な解決ではありませんが、以下のCSSをブログに追加することで現行バージョンのコメントボックスの背景を白くします。

.fb_ltr {
    background:#fff;
}

コメントボックス(背景を白にする)

4.その他

「いいね!」ボタンやアクティビティフィードなど、他のソーシャルプラグインでは「colorscheme」とう属性が追加されているので、コメントボックスにもいずれ追加されると思われます。試しにfb:commentsタグに「colorscheme="dark"」を追加してみましたが動作しませんでした。

colorscheme

それまでは3項の対処を行っておくことを推奨します。

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

Facebookのiframeタブ用ページをモジュール化する

April 4,2011 2:02 AM
Tag:[, ]
Permalink

Movable Typeでiframeタブ用ページを管理する場合のモジュール化について紹介します。

1.モジュール化とは

モジュール化とは「部品化」という意味で、テンプレートで共通的に利用できる部分をMovable Typeのテンプレートモジュールとして切り出し、部品化します。

iframeタブを使ったページでは、HTML5のヘッダ・フッタ部分、JavaScriptの読み込みや「fb-root」のdiv要素など、共通化できる部分があるので、本エントリーではそれらをモジュール化してみます。

2.iframeヘッダーモジュール

まず、次のような「iframeヘッダー」というテンプレートモジュールを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foo</title>
<mt:GetVar name="head_css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<mt:GetVar name="head_js" />
</head>
<body style="margin:0; padding:0">
  <div id="fb-root"></div>

head要素と「fb-root」のdiv要素までを設定しておきます。なお、iframeタブごとにCSSや利用するJavaScriptが異なる場合があるので、コンテンツとなるテンプレートに設定したCSSやJavaScriptを埋め込めるように、MTGetVarタグを設定しておきます。

…前略…
<mt:GetVar name="head_css" />
…中略…
<mt:GetVar name="head_js" />
…後略…

3.iframeフッターモジュール

次に「iframeフッター」というテンプレートモジュールを作成します。

<script>
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/ja_JP/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: '<mt:var name="appID">',
        status: true,
        cookie: true,
        xfbml: true
    });
    FB.Canvas.setAutoResize();
};
</script>
</body>
</html>

iframe用のJavaScript読み込みとbody要素/html要素の終了タグを設定しておきます。関数FB.initにはappIDが必要なので、コンテンツとなるテンプレートから呼び出すときにappIDを取得できるようにしておきます。

    FB.init({
        appId: '&lt;mt:var name="appID"&gt;',

4.インデックステンプレートでのモジュールの利用

モジュール化を行うことで、インデックステンプレートには次のように記述するだけですむようになります。

<mt:include module="iframeヘッダー" />
(iframeタブ用コンテンツ) 
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

実践例として、「Facebookページのiframeタブにタブメニューを表示する」に掲載しているインデックステンプレートは、次のようになります。赤色部分がモジュール化による変更箇所です。

<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
    $('#tabs').tabs({
        fx: { opacity: 'toggle', duration: 300 }
    });
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />
 
<div id="tabs">
<mt:Pages tag="@facebook">
  <mt:PagesHeader>
    <ul>
  </mt:PagesHeader>
      <li><a href="#<mt:PageBasename regex_replace="/\.html/","" />"><mt:PageTitle /></a></li>
  <mt:PagesFooter>
    </ul>
  </mt:PagesFooter>
</mt:Pages>
<mt:Pages tag="@facebook">
<div id="<mt:PageBasename regex_replace="/\.html/","" />">
<mt:PageBody />
</div>
</mt:Pages>
  </div>
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

変数head_cssや変数head_jsに設定する場合は、MTIncludeタグで「iframeヘッダー」を呼び出す前に記述します。

<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
    $('#tabs').tabs({
        fx: { opacity: 'toggle', duration: 300 }
    });
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />

また、appIDは「iframeフッター」を呼び出すMTIncludeタグに、appIDモディファイとして設定します。

<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

5.ウェブページテンプレートでのモジュールの利用

iframeタブ用のページをウェブページテンプレートを使ってで作成・管理するのであれば、ウェブページテンプレートを次のように設定しておけばさらに効率良く管理できると思います(実際には通常のウェブページと振り分ける必要があるので、これだけではありません)。

<mt:PageBody mteval="1" />

ウェブページの本文には次のように記述します。

<mt:include module="iframeヘッダー" />
(iframeタブ用コンテンツ)
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />
Comments [0] | Trackbacks [0]
2011年4月 3日

Facebookページのiframeタブにタブメニューを表示する

April 3,2011 2:34 AM
Tag:[, ]
Permalink

Facebookページのiframeタブのコンテンツに、jQuery UI Tabsを利用してタブメニューを表示するカスタマイズです。ここではMovable Typeと連携させる例で紹介します。

タブ

1.サンプル

「小粋空間」Facebookページにiframeタブを使った「テーマ・プラグイン・書籍」というメニューを作りました。

Facebookページメニュー

このメニューをクリックすると、「テーマ・テンプレート」「WordPressプラグイン」「Movable Typeプラグイン」「書籍」という4つのタブでコンテンツを切り替えられるようになっています。

Facebookページメニュー

タブをクリックすればコンテンツがいい感じに切り替わります。

Facebookページメニュー

2.Movable Typeのテンプレート構成

このページでは、Movable Typeのテンプレート構成を下の図のようにしています。

テンプレート構成

iframeタブで読み込むページをインデックステンプレートに対応させ、iframeタブの中に表示しているタブのコンテンツはウェブページを対応させています。jQuery UI Tabsはタブ切り替え時、外部ファイルのAjax読み出しをサポートしているのでこのようにしてみました。

3.テンプレートのカスタマイズ

iframeタブの作成については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の2項~5項の作業を行ってください。

jQuery UI Tabsの設定については「jQuery UI Tabsを使ってタブを実装する」を参考にしてください。

iframeタブに対応するページとして、新しいインデックステンプレートを1つ作ります。サンプルのインデックステンプレートは次のように設定しています。赤色部分がタブメニューに関するカスタマイズです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe_test3</title>
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="styles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
    $('#tabs').tabs({
        fx: { opacity: 'toggle', duration: 300 }
    });
});
</script>
</head>
<body style="margin:0; padding:0">
  <div id="fb-root"></div>
  <div id="tabs">
<mt:Pages>
  <mt:PagesHeader>
    <ul>
  </mt:PagesHeader>
      <li><a href="<mt:PageBasename />"><mt:PageTitle /></a></li>
  <mt:PagesFooter>
    </ul>
  </mt:PagesFooter>
</mt:Pages>
  </div>
<script>
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/ja_JP/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'xxxxxxxxxxxxxxx',
        status: true,
        cookie: true,
        xfbml: true
    });
    FB.Canvas.setAutoResize();
};
</script>
</body>
</html>

それほど難しい内容ではなく、通常のHTMLページ表示にjQuery UI Tabsの設定を加えています。タブ部分の表示はMovable Typeのテンプレートタグを利用しています。

具体的には、MTPagesタグにtagモディファイアを与え、ウェブページのタグに「@facebook」が設定されたものだけを出力します。メニュー部分はMTPageTitleの内容を、リンクはMTPageBasenameタグの内容を出力しています。

次にウェブページテンプレートをカスタマイズします。Facebookに表示するページと、通常のウェブページを振り分けるために次のようにします。

<mt:PageIfTagged include_private="1" tag="@facebook">
<$mt:PageBody$>
<mt:else>
(通常のウェブページテンプレートの内容)
</mt:PageIfTagged>

MTPageIfTaggedタグを使い、「@facebook」がつけられたウェブページであればページの本文のみを出力し、それ以外は通常のウェブページテンプレートでファイル出力します。

4.CSSの修正

jQuery UI TabsはCSSが組み込まれているので、下記のCSSで上書きします。このCSSは外部ファイルにするか、インデックステンプレートのstyle要素で追加してください。

#tabs {
    line-height: 1.5;
}
.ui-widget {
    font-size: 87%;
}
.ui-tabs .ui-tabs-panel {
    padding: 1em 0
}
.ui-tabs .ui-tabs-nav li {
    margin: 0;
}

読み込みは、jQuery UI Tabs用CSSの読み込みより後方になるようにしてください。

5.ウェブページの作成

ウェブページにはFacebooページに表示したいコンテンツを入力し、タグに「@facebook」を加えます。

ウェブページの作成

6.iframeタブ内にコンテンツを出力する

サンプルでは、タブのコンテンツを外部ファイルを使って読み出す方法を紹介しましたが、iframeタブ内にコンテンツを出力し、それらをタブで切り替える場合、3項のインデックステンプレートは次のように変更します。赤色が変更点です。

…前略…
  <div id="fb-root">
    <div id="tabs">
<mt:Pages tag="@facebook">
  <mt:PagesHeader>
    <ul>
  </mt:PagesHeader>
      <li><a href="#<mt:PageBasename regex_replace="/\.html/","" />"><mt:PageTitle /></a></li>
  <mt:PagesFooter>
    </ul>
  </mt:PagesFooter>
</mt:Pages>
<mt:Pages tag="@facebook">
<div id="<mt:PageBasename regex_replace="/\.html/","" />">
<mt:PageBody />
</div>
</mt:Pages>
    </div>
  </div>
…後略…

タブのhref属性をフラグメント(#...)に変更しています。フラグメントの値はregex_replaceモディファイアを利用して、ベースネームからファイルの拡張子を除去した形式を利用しています。

コンテンツ(ウェブページ本文)の出力にはMTPagesタグとtagモディファイを組み合わせます。

Comments [0] | Trackbacks [0]
2011年4月 2日

Facebookアプリの「タブのURL」の形式変更について

April 2,2011 3:33 AM
Tag:[]
Permalink

FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の中でFacebookアプリの設定方法を紹介していますが、「Page Tabs」の設定が変更されていました。すでにご存知の方も多いと思いますが情報展開しておきます。

httpsから始まるSSLページを設定できる「Secure Tab URL」が追加されることは知っていたのですが、「タブのURL」について、以前は「Canvas Page」のURLにサブディレクトリを追加する形式になっていたものが独自URLを設定できるようになっていました。

以前のフォーマット
以前のフォーマット

2011年4月現在のフォーマット
2011年4月現在のフォーマット

新しい「タブのURL」に設定する内容は、「Canvas URL」の末尾に任意のファイル名を追加した形式はもちろん、「Canvas URL」と異なるドメインを設定しても表示されることを確認しています。過去に作成したFacebookアプリは自動的に新フォーマットに変更されているようです。

ネット上の情報では、この部分の設定が過去のフォーマットのものがあるので、新たに作る場合は気をつけましょう。

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