同一页面中有许多 FACEBOOK SHARE 按钮？

Question

我使用 javascript 在我的页面中实现了 facebook 分享按钮，如下所示：

<script type="text/javascript">
$(document).ready(function(){
        $('#share_button').click(function(e){
            e.preventDefault(); 
            FB.ui(
            {
                method: 'feed',
                name: "{{ user_name }}'s 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>

它工作得很好，但现在我想在同一个页面中放置许多帖子，并为每个帖子使用不同的分享按钮（非常 FB 分享按钮应该有不同的链接、标题和图像）。有什么想法吗？

它与like按钮一起工作，使用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>  

但是如何用 share_button 做类似的事情呢？有什么想法吗？

干杯，

Answer 1

为每个“分享”按钮指定一个不同的 ID，并更改每个项目的其他选项（不同的链接、标题和图片）。
例如：

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

按钮可能是：

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