How to add custom image to each of the multiple facebook share buttons? I have multiple share buttons in single page

问题

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.

Thanks a ton for the help in advance.

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

回答1:

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

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

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.

来源：https://stackoverflow.com/questions/43262782/how-to-add-custom-image-to-each-of-the-multiple-facebook-share-buttons-i-have-m