0

我已嘗試使用og:image meta tag,如https://developers.facebook.com/docs/plugins/like-button所示。這似乎支持一個頁面的一個圖像,並且Facebook似乎假設您需要在一個html頁面中有一個共享按鈕。如何將自定義圖像添加到多個Facebook分享按鈕中的每一個?我在單個頁面中有多個分享按鈕

此外,類似的問題 - Multiple Facebook, Twitter share buttons in one page with custom image and title不會自定義圖像到頁面中的多個分享按鈕中的每一個。以下是我爲每個插入添加og:image的方式。下面的代碼片段在循環中。

非常感謝您的幫助。

    <div class="row"> 
 
        <div class="col-sm-12"> 
 
         
 
         <% @map_url = ('http://maps.google.com/?q='.to_s + @user.address.to_s) %> 
 
         <small><%= link_to @user.address, @map_url, target: "_blank", style: 'color:#0645AD;' %> 
 
         </small> 
 

 
         <% @facebook_comment_url = ('https://wobbleapp.in/users/'.to_s + @user.id.to_s) %> 
 
         <meta property="fb:app_id" content="XXXXXXXXXX" /> 
 
         <meta property="og:url" content= <% @facebook_comment_url%> /> 
 
         <meta property="og:image" content="https://d2l5nbch64gdxx.cloudfront.net/uploads/user/image/47287/upload_image.jpeg" /> 
 
         <meta property="og:description" content="Potholes in your locality!" /> 
 

 
         <div class="fb-like pt-2" 
 
         data-href= <%= @facebook_comment_url %> 
 
         data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> 
 

 
         <div 
 
          class="fb-comments" 
 
          data-href= <%= @facebook_comment_url %> ></div> 
 

 
        </div> 
 
        </div> 
 
       </div>

+0

正確。一個網址=一個圖片。只是分享不同的獨特的URL,並設置正確的OG:圖像爲他們每個人的 – WizKid

+0

@WizKid我加入唯一的網址使用數據href標記每股按鈕

data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true">
不知道如何OG:可以添加圖像meta標籤到每個分享按鈕。你能舉個例子嗎? – anubhav16

+0

那麼你需要爲每個這樣的URL的HTML文檔,包含相關OG元數據... – CBroe

回答

0

你需要有一個網頁(如:http://example.com/)有FB分享按鈕腳本和HTML標記,按Multiple Facebook, Twitter share buttons in one page with custom image and title

然後,你需要在每個圖像的網頁(例如http://example.com/image/1)擁有Open Graph元標記,按照https://developers.facebook.com/docs/sharing/opengraph/using-objects#objectapi

你做不是<meta property="...">標籤放在與FB共享按鈕腳本和標籤相同的頁面上。這就是WizKid和CBroe在評論中試圖解釋的內容。

相關問題