Facebookタイムラインに公開するためのアプリケーションのセットアップと作成

この記事では、タイムラインで何かを公開する最小限のアプリケーションを作成する方法を説明し、このパスに沿って発生する可能性のある問題について説明します。

まず第一に、Facebookのタイムラインは現在ベータ版であり、開発者のみが利用できるため、最初に行うことはアカウントのタイムラインをアクティブにすることです。 このテーマについては、たとえばwww.makeuseof.com/tag/enable-facebooks-timeline-profileのような多くの指示が書かれています。

指示のすべての手順を完了し、数分待ってから、壁ではなく名前をクリックすると、待望のタイムラインが開きます。

ステップ1. facebookアプリケーションを構成する





これは最も重要なステップであり、予期しない合併症が発生する可能性があります。 アプリケーション(https://developers.facebook.com/apps)を作成したら、まずtest.comまたはnews.test.comの形式で「App Domain」を指定します。 さらに、「Website」セクションで、すでにnews.test.comの形式でサイトへのリンクを記入する必要があります。 次に、「詳細」設定に移動し、「サンドボックスモード」が「無効」に設定されていることを確認します。 サンドボックスモードを無効にしないと、ログインにエラーが発生します。たとえば、出版権のリクエストでgetLoginStatus API関数を呼び出すと、コールバックは機能しません。

「グラフを開く」セクションに進み、記事の読み取りアクションを追加します。「開始」をクリックして、動詞の読み取りを構成します。すべてが直感的にわかりやすく、落とし穴はありません。 保存して、オブジェクトの構成に移動します。 次のページは「集計」設定になります-作成された動詞ごとにかなり重要な設定である、集計を構成する必要があります。 そうしないと、facebookは少し不明瞭に反応します-publish_actionsへのアクセス許可を要求しようとすると、アプリケーションへのログインを促すダイアログが開きますが、タイムラインでパブリケーションに関する言葉を言わず、対応するアクセス許可は取得されません。 集計を設定した後、そのための「プレビュー」があることを確認する必要があります。それらがなければ、認証ダイアログでエラーを繰り返すことができます。 [グラフを開く]-> [集計]設定で[プレビュー]をクリックし、集計にプレビューがあることを確認します(プレビューがない場合は、開くダイアログで追加できます)。 Facebookプレビューを作成するには、サンプル記事へのリンクをフィードする必要があります。 適切な「記事」の作成方法については、以下で説明します。



ステップ2.タイムラインで公開するオブジェクトを作成する



オブジェクトとは、インターネットからアクセス可能な通常のWebページを意味します。 ユーザーが読んだ記事に関する情報を公開したいとします。つまり、タイムラインの「記事を読む」にメモを置きます。つまり、ページは記事になります。 公開プロセスの仕組み-facebook APIを使用して、オブジェクト(記事のあるWebページ)へのリンクがタイムラインに送信され、facebookがこのページを処理し、グラフにオブジェクトを作成します。 Facebookが記事を適切に処理するためには、正しい開始グラフタグが含まれている必要があります。 「右ページ」の例はこちら



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta property="fb:app_id" content="{id }"/>

<meta property="og:type" content="{namespace }:article"/>

<meta property="og:url" content="http://{ }/Article.html"/>

<meta property="og:title" content="article about article"/>

<meta property="og:description" content="cool article"/>

<meta property="og:image" content="{ }"/>



<title>Article</title>

</head>

<body>

<h2>just article about article</h2>

Some text ...

</body>

</html>









facebookデバッガーユーティリティを使用して、開いているグラフタグの正確性についてページを確認できます。

タイムラインで公開できる正しいオブジェクトを作成したら、集計のプレビューを構成します(手順については前の段落の手順を参照してください)。

開いているグラフ設定に入り、プレビューを設定すると、プレビューを追加するためのダイアログは次のようになります





ステップ3.タイムラインで公開する権利をリクエストする



タイムラインでFB APIを有効にして発行権をリクエストするための最小コードは次のとおりです。



<html>

<head>

<title>log in</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>



<!-- Fb API Initialisation -->

<div id="fb-root"></div>

<script>

window.fbAsyncInit = function () {

FB.init({

appId: '{fb app id}', // App ID

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

oauth: true, // enable OAuth 2.0

xfbml: true // parse XFBML

});

};



// Load the SDK Asynchronously

(function (d) {

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js";

d.getElementsByTagName('head')[0].appendChild(js);

} (document));

</script>



<script type="text/javascript">

$(document).ready(function () {

$("#post").click(function () {

FB.login(function (response) {

if (response.authResponse) {

console.log('logged in');

} else {

console.log('failed.');

}

}, { scope: 'publish_actions' });

});

});

</script>

<input id="post" type='button' value='post' />

</body>

</html>











ボタンをクリックすると、ダイアログが開き、このアプリケーションがタイムラインに書き込むことを示すダイアログが開きます。以下に例を示します。







下線付きのクエリに権限がない場合、アプリケーションは正しく構成されていません(この場合は、前の手順を読み直して、すべての「動詞」にprevertsの「集約」があることを確認する必要があります)。

[アカウント設定]-> [アプリ]でアプリケーションを削除できます。同じ場所で、アプリケーションにどの権限が付与されているかを確認できます。



ステップ4.タイムラインに公開する



必要なAPI呼び出しを追加して取得します。



<html>

<head>

<title>log in</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>



<!-- Fb API Initialisation -->

<div id="fb-root"></div>

<script>

window.fbAsyncInit = function () {

FB.init({

appId: '{your fb app id}', // App ID

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

oauth: true, // enable OAuth 2.0

xfbml: true // parse XFBML

});

};



// Load the SDK Asynchronously

(function (d) {

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js";

d.getElementsByTagName('head')[0].appendChild(js);

} (document));

</script>



<script type="text/javascript">

$(document).ready(function () {

$("#post").click(function () {

FB.login(function (response) {

if (response.authResponse) {

console.log('logged in. Try to publish in timeline');

var verb = '{your_app_namespace}:read';

var objectType = 'article';

var permalink = link to article';

FB.api('/me/' + verb + '?' + objectType + '=' + permalink, 'post', function (result) {

console.log('published with id = ' + result.id);

});

} else {

console.log('failed.');

}

}, { scope: 'publish_actions' });

});

});

</script>

<input id="post" type='button' value='post' />

</body>

</html>











コールバックには、facebookグラフのidを含む発行結果が付属しています(たとえば、作成されたレコードを削除できます)。 「 'published with id ...」という碑文がブラウザコンソールに表示される場合、すべてが正しく構成されています。 ユーザー名(右上)をクリックする必要があるパブリケーションを表示するには、タイムラインが開き、[アクティビティログ]をクリックします(追加されたアクションをより便利に表示するため)。 次の出版物では、複数の「既読記事」が1つの集約にグループ化されます。 タイムライン自体では、次のようになります。







動詞-動詞はFB API呼び出しに表示されます。この場合は、アプリケーションの名前空間、次にコロンと動詞です。 新しい動詞(ウォッチなど)を作成するときに、facebookが既存の動詞から選択するようプロンプトを表示すると、アプリケーションに関連付けられていない元の動詞が作成されます。この場合、動詞は「namespace:watch」と「video.watches」アプリケーションの開いているグラフ設定で[コードを取得]をクリックします。

すべてが動作する場合は、少なくともIE 8でIEで動作を確認する必要があります。驚いたことに、facebookの指示から取られたこのコードでさえ、IEでの動作を拒否しました(console.logをコメントアウト)。 執筆時点では、IEのプラグインFBスクリプトのエラーは再現しませんでしたが、IEの権限に問題が発生した場合は、便利なリンクgkirok.blogspot.com/2011/11/ie-facebook-connect.htmlを参照してください

たぶん私は自分自身になったある種のレーキについて言及するのを忘れましたが、基本的にそれらはすべて非常に簡単に解決されます-エラーをGoogleに送り、stackoverflowの答えを探します。 fb.getloginstatusが呼び出され、それ以上何も起こらない場合(エラーが発生していなくても)、ネットワークタブに移動してfacebookからの回答を確認し、Googleに再度送信します。

さらに、アプリケーションの管理者/開発者/テスターからのみpublish_actionをリクエストできることを忘れてはなりません。この状況はfacebookのタイムラインがデモ中であっても続きます。 アプリケーション自体の「ロール」設定から、アプリケーションの管理者/開発者になるための招待状を送信できます。

みんなハッピー!



All Articles