2

私はあちこちグーグルで検索しましたが、この問題について明確な答えをまだ見つけていません。この質問は私にとって最も役に立ちましたが、いいねボタンを使って画像をユーザーのタイムラインに投稿するのにまだ問題があります。

私のサイト example.com/gallery/my-gallery のいくつかのページには、10 枚の写真があります。Fancyboxを画像ビューアとして使用しています。私の意図は、各スライドに [いいね] ボタンを付けて、ユーザーが画像にいいね! を付け、そのアクティビティをタイムラインに記録できるようにすることです。

一意のクエリでエンコードされた URL を使用すると、アクティビティをタイムラインに記録できますが、問題は、最初に FB のデバッガーを使用してカスタム URL をリントしない限り、画像が表示されないことです。

iFrame Like ボタンを使用して、次のように一意の画像 URL を取得しています。

// Inside my call to Fancybox, I am using two event listeners
beforeLoad : function(){
    var that = this

    // this/that is the absolute url to the image.
    // I split it off into a variable img that I will use as a query string.
    a = function(){
        var url = that.href
        var img = url.split("http://example.com").pop()
        return img
    }
},
afterLoad : function(e){
    // argument "e" lets me dig in and the current Gallery URL 'example.com/gallery/my-gallery' 
    var galUrl = e.parent.context.URL
    // now I have pathToImg that I can use as a query string
    var pathToImg = a()

galUrlでは、との組み合わせを使用してpathToImg、一意の URL を作成します。

var thisURL = encodeURIComponent(galUrl + '?' + pathToImg)

// still in afterLoad() at this point, so I dynamically create a Like button with the proper parameters
<iframe src="//www.facebook.com/plugins/like.php?href=' + thisURL + '&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=21&amp;appId=########" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>

FWIW、appID パラメーター ( ########) は、FB の開発者ダッシュボードの「アプリ」にリンクされています。アプリのドメインは example.com に設定され、[Facebook との統合] で [Web サイトと Facebook ログイン] を選択し、サイトの URL はhttp://example.comです(プロトコルの追加に注意してください)。他の構成変更は行っていません。サンドボックス モードはオフです。

わかりました。最後のビットは、参照 URL の OG タグを変更することです (thisURL解決されるもの)。ご存じないかもしれませんが、FB は OG パーサーを href パラメーターで指定された URL に送信します。これはhttp://example.com/gallery/my-gallery?/path/to/image.jpg (ただし、実際には URL エンコードされています)。メタ タグで PHP を使用して、クエリ文字列を取得し、表示したいものを FB に表示しています。

<meta property="og:type" content="article" />
<meta property="og:image" content="<?= "http://example.com".$_SERVER['QUERY_STRING']; ?>" />
<meta property="og:url" content="<?= "http://example.com".$_SERVER['REQUEST_URI']; ?>" />

のような URLを指定するとhttp://example.com/gallery/my-gallery?/path/to/image.jpg、タグは にog:image解決されhttp://example.com/path/to/image.jpg、og:urlタグは に解決されhttp://example.com/gallery/my-gallery?/path/to/image.jpgます。

これはCMS（ExpressionEngine）上にあるため、そのブロックは実際には条件付きでラップされています。

私の他のメタタグ:

<meta property="og:title" content="WEBSITE TITLE - {embed="includes/page-title segment='{segment_1}'"}" />      
<meta property="og:description" content="WEBSITE DESCRIPTION">
<meta property="og:site_name" content="WEBSITE NAME" />
<meta property="fb:app_id" content="#########" />

写真が気に入ると、Facebook プロフィールの最近のアクティビティに、その画像を除いて、予想されるすべての OG タグが表示されます。FB のデバッガーを使用してhttp://example.com/gallery/my-gallery?/path/to/image.jpgを調べると、 IMAGEを含むすべての期待値が取得されます。

最初にその URL をリントしてから、画像にいいね! をすると、タイムラインに画像が表示されます。すべてのクエリ文字列 URL をプログラムで lint するオプションがあるかどうかはわかりません。

ほぼ私の知恵の終わりに。誰か助けてくれませんか？

4

0 に答える 0