Fb共享按钮只能工作一次而无需重新加载页面

时间:2016-11-29 16:49:11

标签: facebook facebook-javascript-sdk fb.ui

我试图在页面上添加几个Facebook分享按钮,但是调用"分享"功能,在Facebook上共享当前材料,只在页面上工作一次,点击一下后,你必须重新加载页面以便进行另一次共享。

这是我的HTML:

<button class="share js-share-btn">Share</button>
<button class="share js-share-btn">Share</button>
<button class="share js-share-btn">Share</button>

CSS:

body {
  text-align: center;
}
.share {
  display: inline-block;
  width: 40px;
  height: 20px;
  margin: 20px;  
}

和JS:

$(".js-share-btn").each(function(){
  $(this).on('click', function(event){
    event.preventDefault();
    fbShare('title','description');
    return false;
  })
});


function fbShare(title, description, image) {
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'id',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.ui({
      method: 'share_open_graph',
      action_type: 'og.shares',
      action_properties: JSON.stringify({
        object : {
         'og:url': 'http://dla.dev',
         'og:title': title,
         'og:description': description,
         'og:image': image
        }
      })
    }, function(response){});
  };
}

以下是codepen上的链接:http://codepen.io/jumkarto/pen/YprMbK

如果有人知道我的问题的解决方案,我将非常感谢你的帮助。

1 个答案:

答案 0 :(得分:0)

将此代码添加到 body 的最上方:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/cs_CZ/sdk.js#xfbml=1&version=v3.3"></script>

该位置后的“共享按钮”:

<div class="fb-share-button" data-href="[your_page]" data-layout="button_count" data-size="large">
<a target="_blank" 
href="https://www.facebook.com/sharer/sharer.php?u=[your_page];src=sdkpreparse" 
class="fb-xfbml-parse-ignore">Sdílet
</a>
</div>

只需动态调用函数FB.XFBML.parse();即可,而不是重新加载页面。

FB.XFBML.parse(); <-为我固定