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

Question

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>

Giacometti

Correct. One URL = one image. Just share different unique URLs and set the right og:image for each of them – Cipango

@Cipango I have added unique url for each share button using data-href tag in as <div class="fb-like pt-2" data-href= unique_comment_url > data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> Not sure how og:image meta tag can be added to each share button. Could you please give an example? – Giacometti

Well you need an HTML document for each such URL, that contains the relevant OG meta data ... – Aspergillum

@CBroe Here's the single page web - www.wobbleapp.in. Any idea on how can we have html document for each url when all images, share buttons, urls are infact present in the same page? Thanks! – Giacometti

By creating those HTML documents …? – Aspergillum

@CBroe I have added the piece through which I'm adding og:image for each share button. Not working. – Giacometti

That’s not how it works, the like button does not take a picture “parameter”. – Aspergillum

Let us continue this discussion in chat. – Giacometti

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

Wirth