同一页面中有多个FACEBOOK SHARE按钮？ [英] MANY FACEBOOK SHARE buttons in the same page?

问题描述

 < script type =text /的javascript> 
 $（document）.ready（function（）{
 $（'＃share_button'）。click（function（e）{
 e.preventDefault（）; 
 FB。 ui（
 {
 method：'feed'，
 name：{{user_name}}'FOF，
 link：https://mysite.com/uploader / {{current_fof}} / share_fof /，
图片：imgsArray [0] .src，
 caption：window.location.href，
 description：'这个FOF是由{{ user_name}}'，
 message：''
}）; 
}）; 
}）; 
< / script> 
 
 
< div class =share> < img src ={{STATIC_URL}} images / share_facebook.pngid =share_buttontype ='button_count'>< / div> 
  

它的工作相当不错，但现在我想在同一页面中放置许多帖子，并使用每个帖子不同的分享按钮（非常FB共享按钮应该有不同的链接，标题和图像）。任何想法？

它使用类似的按钮，使用FB API：

 < div class =fb-likedata-href =https://mysite.com/uploader/{{current_fof}}/share_fof/data-send =truedata-layout = button_countdata-width =450data-show-faces =falsedata-font =arial>< / div> 
  

但是如何用share_button做类似的事情？任何想法？

干杯，

解决方案

分享按钮不同的ID，并更改每个项目的其他选项（不同的链接，标题和图像）。

例如：

 < 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 /，
图片：imgsArray [0] .src，
 caption：window.location.href，
 description：'这个FOF是由{{用户名}}'，
消息：''
}）; 
}）; 
 $（'＃share_button2'）点击（function（e）{
 e.preventDefault（）; 
 FB.ui（
 {
方法：'feed'，
名称：{{user_name}}的FOF，
链接：https://mysite.com/uploader/{{current_fof}}/share_fof/，
图片：imgsArray [0] .src，
 cap这个FOF由{{user_name}}，
消息：''
}）采用; 
}）; 
 $（'＃share_button3'）。click（function（e）{
 e.preventDefault（）; 
 FB.ui（
 {
 method：'feed '，
名称：{{user_name}}的FOF，
链接：https://mysite.com/uploader/{{current_fof}}/share_fof/，
图片：imgsArray [0] .src，
 caption：window.location.href，
 description：'这个FOF是由{{user_name}}，
消息：''
}）; 
}）; 
}）; 
< / script> 
  

按钮可以是：

 < div class =share> < img src ={{STATIC_URL}} images / share_facebook.pngid =share_button1type ='button_count'>< / div> 
< div class =share> < img src ={{STATIC_URL}} images / share_facebook.pngid =share_button2type ='button_count'>< / div> 
< div class =share> < img src ={{STATIC_URL}} images / share_facebook.pngid =share_button3type ='button_count'>< / div> 
  

I implemented the facebook share button in my page using javascript, like this:

<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://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_button" type='button_count'></div>

It is working pretty well but now I'd like to put many posts within the same page and use a different share button for each post (very FB share button shall have a different link, title and image). Any ideas?

It worked with the like button, using the FB API:

<div class="fb-like" data-href="https://mysite.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 the share_button? Any idea?

Cheers,

解决方案

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>

这篇关于同一页面中有多个FACEBOOK SHARE按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！