如何将自定义图像添加到多个Facebook共享按钮中的每一个?我在单页中有多个共享按钮

时间:2017-04-06 18:11:26

标签: facebook facebook-javascript-sdk facebook-like facebook-sharer

我尝试过og:图片元标记,如https://developers.facebook.com/docs/plugins/like-button所示。这似乎支持一个页面的一个图像,而facebook似乎假设您在一个html页面中需要一个共享按钮。

此外,类似的问题 - 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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

根据http://example.com/

,您需要有一个网页(例如Multiple Facebook, Twitter share buttons in one page with custom image and title)才能拥有FB共享按钮脚本和html标记

然后您需要每个图片网页(例如http://example.com/image/1)拥有Open Graph元标记,按照https://developers.facebook.com/docs/sharing/opengraph/using-objects#objectapi

<meta property="...">标记放在与FB共享按钮脚本和标记相同的页面上。这就是WizKid和CBroe在评论中试图解释的内容。