TopFacebook > 2012年5月
2012年5月27日

FacebookのJavaScript SDKをテストできる「JavaScript Test Console」の徹底解説

May 27,2012 11:55 PM
Tag:[, , ]
Permalink

Facebookのアプリ開発でJavaScript SDKをテストできる「JavaScript Test Console」について紹介します。

JavaScript Test Console
JavaScript Test Console

1.「JavaScript Test Console」とは

文字通り、Facebook上でJavaScript SDKをテストするためのコンソールで、テキストエリアにFacebookアプリ用のJavaScriptコードを書いて実行させるというものです。

テキストエリアにはアプリ(HTML)の内容を丸ごと記述すればいいようです。その際、JavaScript SDKの読み込みは不要です。

2.「JavaScript Test Console」にログイン

最初は「Status」が「not_authorized」になっているので、「Login」をクリック。

Login

Rellというアプリのログイン画面が表示されるので「Facebookでログイン」をクリック。

Rell

なお「このアプリによるFacebookタイムラインへの投稿の公開範囲」というのがあるので、テストを行う場合は、ログイン前に「自分のみ」を選択しておいた方がいいでしょう。

このアプリによるFacebookタイムラインへの投稿の公開範囲

これで「Status」が「connected」になりました。その右にある「Disconnect」をクリックすればRellアプリからログアウトします。「Logout」をクリックするとFacebookからログアウトされるので注意しましょう。

connected

3.サンプルによる動作確認

まずサンプルで動作を確認してみましょう。テキストエリア下にある「Examples」をクリック。

JavaScript Test Console画面

「account-info」をクリックします。他にも多くのサンプルが用意されています。

サンプル

クリックすると、前の画面に自動的に戻って、テキストエリアにサンプルコードが表示されます。また同時に実行内容がテキストエリア下に表示されます。

「account-info」選択後の画面

実行後、テキストエリア右にはこのようなものが表示されます。

実行後の画面

三角マークをクリックすると内容が表示されます。これは実行プログラムの中に埋め込まれた「Log.info()」、つまりログが表示されるようです。

ログ表示

「Log.info()」とログの内容はスクリーンショットのような対応になっています。

「Log.info()」とログの対応

ページをリロードすれば、Rellアプリのログイン状態以外はすべてクリアされます。

ログのみをクリアしたい場合は、ログのエリアにマウスをポイントすれば「Clear」が表示されるので、それをクリックします。

ログのクリア

4.手入力による動作確認

サンプルでかなりまかなえそうですが、プログラムを手入力する場合の使い方も紹介します。

簡単なところで、次のような「いいね!」ボタンのxfbmlを入力します。手入力した場合は「Run Code」をクリックします。

手入力による実行

これで実行されました。

実行結果

サンプル・手入力にかかわらず、「Run Code」をクリックすれば何回でも実行できます。

5.実行場所の変更

実行場所を変更するには、テキストエリア下にあるプルダウンメニューから「Website」「Canvas」「Page Tab」のいずれかを選択します。

実行場所の変更

選択すると同時にそのページに移動して、同じようにプログラムを実行することができます。

6.コードの保存

「Save Code」をクリックするとコードが保存されるようです。が、どこに保存されたコードがどうやって再利用できるかは不明です。

コードの保存

Comments [0] | Trackbacks [0]
2012年5月23日

Facebookが新しいタイムラインの機能をテスト

May 23,2012 6:00 PM
Tag:[, ]
Permalink

ブログヘラルド経由の情報で、Facebookが新しいタイムラインの機能をテストしているようです。

スクリーンショットは元記事に掲載されている新旧タイムラインです。上がテスト中の画面です。下のリンクをクリックすれば、さらに拡大した画面を確認できます。

新旧タイムライン

ユーザー名やユーザー画像下に表示されているユーザー情報(生年月日・職業など)は情報がカバーに表示されるようです。また、「友人」「写真」「地図」「いいね!」はサムネイルからアイコンに変わってユーザー画像右に並ぶようです。

「Summary」にはユーザータイムラインの重要なイベントが掲載されるようです。

テストはユーザータイムラインのみのようですが、いずれFacebookページも変更になりそうな予感がします。

Comments [0] | Trackbacks [0]
2012年5月21日

Facebookページへのページタブ追加が一瞬で行えるブックマークレット

May 21,2012 11:55 PM
Tag:[, , ]
Permalink

以前、「FacebookページへのIFrameタブ追加方法が変更」で紹介したとおり、FacebookページにIFrameタブ(以下ページタブ)を追加するには、次のようなURLをたたき、表示された画面でページタブを追加したいFacebookページを選択する必要があります。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

が、手動でURLを入力するのは面倒なので、その後「Facebookページ IFrameタブ追加ツール(下)」を作りました。

Facebookページ IFrameタブ追加ツール
Facebookページ IFrameタブ追加ツール

気がついたら340いいね!ほど頂いてます。ありがとうございます。

が、これもアプリIDやページタブURLの入力をしないといけないのでやや面倒です。

ということで前置きが長くなりましたが、Facebookページへのページタブ追加用ブックマークレットを作ってみました。

これを使えば、アプリIDやページタブURLをコピペする必要もなく、一発でページタブ選択画面を開けます。

1.使い方

まず、下記の「ページタブを追加」のリンクをブックマークしてください。

ページタブを追加

次に、Facebook開発者ページから、「アプリ」をクリック。

Facebook開発者ページ

アプリの一覧から、追加したいアプリ名をクリック。

アプリの一覧

ページ右側にある「設定を編集」をクリック。

アプリの概要

これでアプリの「基本設定」ページが表示されました。

基本設定

この状態で、さきほど登録したブックマークレットをクリック(または選択)すれば、ページタブ追加用のダイアログがずばっと開きます。多分。

ダイアログ

ページタブ用アプリをばりばり開発されている方、いかがでしょうか。

Comments [0] | Trackbacks [0]
2012年5月20日

Facebookページのページタブ(IFrameタブ)で「Method Not Allowed」になる不具合の対処

May 20,2012 9:00 PM
Tag:[, ]
Permalink

すでにご存知の方も多いと思われますが、Facebookページのページタブ(IFrameタブ)で「Method Not Allowed」になる不具合の対処について情報展開します。

1.問題点

Facebookページのページタブ(IFrameタブ)のファイルの拡張子に「.html」で指定すると、ページタブを表示したときに「Method Not Allowed」というエラーになる場合があります。

Method Not Allowed

「Method Not Allowed」は、「対象URLに対してメソッドが許可されていない」という意味で、その下にある詳細メッセージよりPOSTメソッドが許可されていないのが原因のようです。

この問題はレンタルサーバによって異なるようですが、今回はさくらインターネットでしか確認できていないので真偽は不明です。

2.対処方法1

拡張子を「.php」に変更します。

アプリの「ページタブ」→「Page Tab URL」や「Secure Page Tab URL」にファイル名まで設定している場合は、その項目もあわせて修正してください。

ページタブ

「.cgi」に変更しても動作するようになりますが、ファイルの内容も変更しないと正常に表示されないため、「.php」に変更するのが無難でしょう。

なお、レンタルサーバによって動作が異なるようです。

3.対処方法2

IFrameタブページと同じディレクトリか上位のディレクトリに、.htaccessを作成し、以下のAddHandlerディレクティブの1行を設定します。

AddHandler application/x-httpd-php .php .html

ディレクトリに.htmlファイルしかないのであれば、以下でもOKです。

AddHandler application/x-httpd-php .html

AddTypeディレクティブでも大丈夫みたいです。

AddType application/x-httpd-php .php .html

これで.htmlファイルを.phpとして処理できるようになります。サーバによって動作が異なるかもしれません。

4.参考サイト

参考サイトは以下です。ありがとうございました。

Comments [0] | Trackbacks [0]
2012年5月16日

Facebookアプリの「Page Tab Edit URL:」について

May 16,2012 1:31 AM
Tag:[]
Permalink

Facebookアプリの「Page Tab Edit URL:」について調べてみました。

「Page Tab Edit URL:」はFacebookアプリ管理ページの「ページタブ」に表示されている項目のひとつですが、この項目に言及している記事がほぼありません。

Page Tab Edit URL:

ということで、ざっくりですが調べた内容を展開します。認識誤りがありましたらご指摘ください。

1.「Page Tab Edit URL:」の役割

「Page Tab Edit URL:」は、Facebookページにアプリを登録したあと、アプリの編集を行う場合のURLを設定するためのもののようです。

Facebookアプリを開発されている方は、この項目についてよくご存知かと思いますが、アプリというほどのものでもない、いわゆる「IFrameタブページ」を表示するだけであれば、この項目は利用することがないと思われます。

2.アプリの編集リンクはどこに?

アプリの編集リンクは、Facebookページのアプリ設定画面に表示されたアプリの「アプリケーションへ移動」のリンクが該当します。

Page Tab Edit URL:

このリンクをクリックすると、「Page Tab Edit URL:」に指定したURLにジャンプします。

またURLのクエリーデータとして「fb_page_id(FacebookページのID)」が渡されます(サンプルの数字はでたらめです)。

http://user-domain/hoge.php?fb_page_id=205512332781231

3.編集画面できること

Facebookページ用アプリケーションとして、この編集画面でアプリの各種設定を行います。

たとえば、アプリ開発側で自前のデータベースを用意して、fb_page_idをキーにしたアプリ用の各種設定項目の保存などを行うことが想定されます。

また、次のような実装をすれば(認証が必要であれば必ずするものかもしれませんが)、facebookデータを利用することもできます。

<?php
require_once('facebook.php');
 
$facebook = new Facebook(array(
     'appId' => 'アプリID',
     'secret' => 'シークレットID',
     'cookie' => true
));
…中略…
?>

ということで、参考になりましたでしょうか。

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