私は以前に Facebook アプリを作成したことがなく、どこから始めればよいのかわからないことに注意することが重要です。答えは、開いているグラフのステップバイステップのチュートリアルで提供されることを前提としています。
ステップ 4 までたどり着くと、今では有名な「エラーが発生しました」というダイアログが表示されます。これは、1 つまたは複数の誤解とコード例の問題が原因である可能性があります。特定の「仮定」がすべての問題の根源である可能性があるため、明確に理解していただければ幸いです
時間を節約するために、チュートリアルの最後にジャンプしてサンプル コードをダウンロードし、それを最終的なコード (object.html) に使用しました。
- アプリ ドメインとサイト URL - チュートリアルでは、ウェブサイト オプションを選択するように指示されています。アプリ ドメインには次のものを使用しました。
www.teamworks.co.za およびサイト URL の場合: www.teamworks.co.za/grow/object.html
これは、ログインしているかどうかに関係なく、Facebook とは無関係にページにアクセスできることを意味します。
質問 :これは意図的なものですか、それとも facebook 内で実行されるはずでしたか? (つまり、ここで何か見逃したことがありますか?) （Facebookを開いて同じブラウザでログインした場合-ただし別のタブ）ページを開くためのリンク?
- 画像: ここのサンプル コードでは、画像の場所を変更する明示的な指示はありません。
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
またはここ：
<img title="Stuffed Cookies" src="http://fbwerks.com:8000/zhen/cookie.jpg" width="550"/>
以下を示す最終的なダウンロード可能なコード例を除きます。
<meta property="og:image" content="http://YOUR_URL/cookie.jpg" />
と
<img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
提供されたイメージの場所を使用すると、デバッグ時にエラーが発生します。次に例を示します。
Tiny og:image: og:image によって参照されるすべての画像は、両方の寸法で少なくとも 200px である必要があります。指定された URL でタグ og:image を持つすべての画像をチェックし、最小仕様を満たしていることを確認してください。
自分のイメージの場所、つまり mydomain/grow/cookie.jpg (両方のイメージ) を使用しても、デバッガーは文句を言いません。
質問: したがって、画像の URL を自分のものに置き換えることができ、それが「エラーが発生しました」ダイアログの原因ではないと安全に想定できますか?
ダウンロードの例には、余分なコードがあります。つまり
<fb:add-to-timeline></fb:add-to-timeline>、> 末尾のダブル >> に注意してください - チュートリアルでカバーされていないため、今のところ削除しました発生」ダイアログ？ダウンロードした例のタグ: は、次の
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACE#">ように変換されます:<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/groworganic#">受信オブジェクトの [コードを取得] ボタンをクリックしたときに生成されるものとは見た目が異なり<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# groworganic: http://ogp.me/ns/fb/groworganic#">ます。
5.ダウンロードした例には、このスクリプトタグがあります
<script src="http://connect.facebook.net/en_US/all.js"></script>
チュートリアルの次のコードを置き換えると思います：
// 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));
質問: この仮定は正しいですか?
エラーが発生しなくなりましたが、成功もしていません。現在、応答がありませんが、コードはデバッグテストに合格しています。
もう一度やり直す必要がありますが、それまでの間、上記の質問に対する回答が得られることを期待して、以下のコードをコピーしました。
以下は私のobject.htmlのコードです：
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/groworganic#">
<meta property="fb:app_id" content="472670852757244" />
<meta property="og:type" content="groworganic:recepie" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://www.teamworks.co.za/grow/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://www.teamworks.co.za/grow/object.html"> <script type="text/javascript">
function postCook()
{
FB.api(
'/me/groworganic:cook',
'post',
{ recipe: 'http://www.teamworks.co.za/grow/object.html' },
function(response) {
if (!response) {
alert('Error occurred : No Response');
} else if (response.error) {
alert('Error occurred : ' + response.error);
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'472670852757244', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://www.teamworks.co.za/grow/cookie.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="groworganic:cook"></fb:activity>
</body>
</html>