I implemented the facebook share button in my page using javascript, like this:
Give each of your "share" button a different id and alter the other options(different link, title and image) for each item.
For example:
<script type="text/javascript">
$(document).ready(function(){
$('#share_button1').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: "{{ user_name }}'s 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 }}'s 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 }}'s 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>
The buttons could 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>