MANY FACEBOOK SHARE buttons on the same page?

Question

I implemented the sharebook button on my page using javascript, for example:

<script type="text/javascript"> $(document).ready(function(){ $('#share_button').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: "{{ user_name }} FOF", link: "https://www.example.com/uploader/{{current_fof}}/share_fof/", picture: imgsArray[0].src, caption: window.location.href, description: 'This FOF was taken by {{ user_name }}', message: '' }); }); }); </script> <div class="share"> <img src = "{{ STATIC_URL }}images/share_facebook.png" id="share_button" type='button_count'></div> 

It works very well, but now I would like to post many messages on one page and use a different sharing button for each message (a very important FB button should have a different link, name and image) . Any ideas?

It worked with a similar button using the FB API:

 <div class="fb-like" data-href="https://www.example.com/uploader/{{current_fof}}/share_fof/" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div> 

But how to do a similar thing with share_button? Any idea?

Greetings

Answer 1

Give each of your "common" buttons a different identifier and change other parameters (different links, title and image) for each element.
For instance:

 <script type="text/javascript"> $(document).ready(function(){ $('#share_button1').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: "{{ user_name }} FOF", link: "https://mysite.com/uploader/{{current_fof}}/share_fof/", picture: imgsArray[0].src, caption: window.location.href, description: 'This FOF was taken by {{ user_name }}', message: '' }); }); $('#share_button2').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: "{{ user_name }} FOF", link: "https://mysite.com/uploader/{{current_fof}}/share_fof/", picture: imgsArray[0].src, caption: window.location.href, description: 'This FOF was taken by {{ user_name }}', message: '' }); }); $('#share_button3').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: "{{ user_name }} FOF", link: "https://mysite.com/uploader/{{current_fof}}/share_fof/", picture: imgsArray[0].src, caption: window.location.href, description: 'This FOF was taken by {{ user_name }}', message: '' }); }); }); </script> 

Buttons can be:

 <div class="share"> <img src = "{{ STATIC_URL }}images/share_facebook.png" id="share_button1" type='button_count'></div> <div class="share"> <img src = "{{ STATIC_URL }}images/share_facebook.png" id="share_button2" type='button_count'></div> <div class="share"> <img src = "{{ STATIC_URL }}images/share_facebook.png" id="share_button3" type='button_count'></div>