如何将自定义图像添加到多个Facebook共享按钮中的每个按钮?我在一个页面中有多个共享按钮 [英] How to add custom image to each of the multiple facebook share buttons? I have multiple share buttons in single page

问题描述

我尝试了此处给出的og:image元标记 https://developers. facebook.com/docs/plugins/like-button .这似乎支持一页显示一个图像，而facebook似乎假设您在一个html页面中需要一个共享按钮.

I have tried og:image meta tag as given here https://developers.facebook.com/docs/plugins/like-button. This seem to support one image for one page, and facebook seem to be assuming that you need one share button in one html page.

还有一个类似的问题-

Also, a similar looking question - Multiple Facebook, Twitter share buttons in one page with custom image and title does not answer custom image to each of the multiple share buttons in page. Here's how I'm adding og:image for each insertion. Below snippet is in the loop.

非常感谢您的帮助.

                  <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>

推荐答案

您需要拥有一个网页(例如 http://example.com/)，按照多个Facebook，Twitter在一页中共享带有自定义图像和标题的按钮

You need to have one webpage (eg. http://example.com/) to have the FB share button script and html tags, as per Multiple Facebook, Twitter share buttons in one page with custom image and title

然后，您需要每个图像网页(例如 http://example.com/image/1)，以符合 https://developers.facebook.com/docs/sharing/opengraph/using-objects#objectapi

Then you need each image webpage (eg. http://example.com/image/1) to have the Open Graph meta tags, as per https://developers.facebook.com/docs/sharing/opengraph/using-objects#objectapi

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

You do not put the <meta property="..."> tags on the same page as the FB share button script and tags. This is what WizKid and CBroe were trying to explain in the comments.

这篇关于如何将自定义图像添加到多个Facebook共享按钮中的每个按钮?我在一个页面中有多个共享按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！