2016-07-11 32 views
2

this StackOverflow postで説明されているように、ページ上の複数の画像をFacebookに共有しようとしています。複数の画像を共有するには、og:imageという複数のタグを含める必要があります。 this pageからわかるように、私はこれらの指示に従った。複数の画像を共有するためにFacebook Sharerを使用する

ページのソースを表示すると、あなたは私が3 OG含まれていることが表示されます。画像タグ、ページの3枚の画像のそれぞれについて、1:

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"/> 
 
\t  <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"/> 
 
\t  <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"/>

をページ上の各画像には独自のFacebookリンクがあります。私は3つのog:imageタグを指定していたので、どのリンクをクリックしても、ページ上の3つの画像の1つを選択することになります。代わりに、あなたは選択肢がありません。 3つの画像のうち第2の画像のみが提供される。

これはキャッシングの問題かもしれないと私は考えていたので、Facebook共有デバッガーツールを使って、Facebookが見ていたものを見ました。 リンクプレビューには1つの画像しか表示されず、og:画像カテゴリには1つの画像しか表示されないため、疑わしいものでした。画像タグ:

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg" /> 
 
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg" /> 
 
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg" />

私はその後、クリックした私はをクリックするとすべての生のタグリンクを表示します、しかし、私はFacebookが本当に私のOGの3つすべてを拾ったことを発見しましたページの下部にあるAPIリンクを介してスクレイプに、これは私が得たものである:

{ 
 
    "url": "https://senatorforaday.emkinstitute.org/senator/ePT4B0td/joe-levinger", 
 
    "type": "website", 
 
    "title": "Senator Joe Levinger | Edward M Kennedy Institute for the United States Senate", 
 
    "image": [ 
 
    { 
 
     "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg" 
 
    }, 
 
    { 
 
     "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg" 
 
    }, 
 
    { 
 
     "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg" 
 
    } 
 
    ], 
 
    "description": "Visit the EMK Institute", 
 
    "site_name": "Edward M Kennedy Institute for the United States Senate", 
 
    "updated_time": "2016-07-11T19:51:09+0000", 
 
    "id": "1101245249919459" 
 
}

あなたが見ることができるように、画像キーは私のOGで指定された3枚の画像の配列で構成されています。画像タグので、これが動作しなければならないかのように思えるが、それはありません。

私は、ページに表示されている3つの中から1つの画像を選択する機能をユーザーに提供するために必要なことは何ですか?

+0

こんにちはジョー、私は同じことを達成しようとしています。成功しましたか? – Firoz

答えて

0

あなたの画像は1600 x 630で、少なくとも200 x 200ですが、40:21 recommended by Facebookには一致しません。あなたの1600ワイド画像should be 840 in height

+1

それは理にかなっています!説明をありがとう、ザック。私はイメージのアスペクト比を変更する自由がないので、ウェブページに各イメージに1つずつ3つの_iframes_を埋め込み、各_iframe_にはその特定の_og:image_タグが含まれています画像。私は、Facebookが仕様を満たすために各画像を切り抜くことを想定しているが、それは受け入れられるだろう。私の考えがうまくいくかどうかを知らせます。 –

+0

ソーシャルメディアプラットフォームごとにイメージを変更するのが一般的です。 Google+、LinkedIn、FaceBook、およびTwitter(名前のほんの一部)は、すべて画像の要件が異なります。 –

+0

私はFB共有ダイアログでも同じことを試みましたが、常に最初のog:画像を選択します。ポップアップで画像ピッカーオプションが表示されませんでした。最新のFB APIで共有ダイアログの画像ピッカーも許可されていますか? – nanbatman

関連する問題