9

拡張機能に単純な Facebook の「いいね」ボタンを実装しました。ただし、機能していないようです。

追加のスクリプトが必要ないという理由だけiframeで、「いいね」ボタンのバージョンを使用しています。

<iframe src="//www.facebook.com/plugins/like.php?href=[dummy_text]&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;blah..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

最初は、ボタンはうまく正しく表示されます。

ここに画像の説明を入力

ただし、クリックすると、赤で「エラー」と表示されます。

ここに画像の説明を入力

したがって、マニフェスト バージョン 2 に追加された(一種の愚かで)制限されたポリシーが原因である可能性があると考えています。通常のWebページに配置すると機能するためです。（いいねボタンを押すと「確認」と表示されます。）

ここに画像の説明を入力

これを修正する方法について何か考えはありますか?

4

2 に答える 2

6

//www.facebook.com/...プロトコル相対 URL です。このような URL を通常の http(s) サイトに埋め込むと、URL は に解決されhttp(s)://www.facebook.com/...ます。ただし、Chrome 拡張機能では、次のように解決されchrome-extension://www.facebook.com/...ます...

この問題を解決するには、URL の前に を付けます。https:つまり、 を使用しますhttps://www.facebook.com/...。

それを行った後、 Content Security Policyのため、ボタンはまだ表示されません。望ましい結果を得るには、マニフェストファイルを介して CSP を緩和して、Facebook の埋め込みを許可する必要があります。

"content_security_policy": "script-src 'self'; object-src 'self'; frame-src https://www.facebook.com",


"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com"(またはを使用して http サイトをホワイトリストに登録することもできます
"script-src 'self'; object-src 'self'; frame-src http://www.facebook.com https://www.facebook.com")

于 2014-03-02T20:51:18.410 に答える
2

Rob W の推奨事項以外 - 同じエラーに直面している可能性があるが、 Facebook アプリ を使用している他のユーザーをカバーするためのいくつかのポイント(つまり、fb にログインしていて、iframe コードの生成中に、「このスクリプトはアプリ ID を使用します。あなたのアプリの:' 上記のドロップダウンで fb アプリを選択します) :

html の頭

<head>
    <!-- for Facebook --> 
    <meta property='og:image' content="http://example.com/logo.jpg"/>
    <meta property='og:url' content="http://example.com"/>
    <meta property="og:title" content="Example"/>
    <meta property="og:description" content="Description"/>
    <meta property="fb:admins" content="<admin name>" />
    <meta property="fb:app_id" content="<app id>" /> 
    <meta property="og:type" content="article" /> 
</head>
  • 上記の og:url の URL が、Facebook アプリのまったく同じ URLに関連付けられていることを確認してください。
  • app id追跡の目的で Facebook アプリ ID と一致する必要があります (上記のパラメーターが同じ場合、いいね! を別のドメインの別のページに「転送」することもできます)。

FB アプリで設定された URL は、ページへのアクセスに使用する URL と同様に、HTML の URL と一致する必要があります。

デバッグ

それでもうまくいかない場合は、Facebookの「デバッガー」を使用します-

https://developers.facebook.com/tools/debug

あなたのURLを入力して、Facebookにアドバイスをさせてください:)

于 2014-03-07T04:01:26.700 に答える