Javascript 创建Facebook共享按钮

我在我的网站上创建了一个共享按钮，这样用户就可以将页面共享到facebook，但我很难理解如何正确地做到这一点

在这个页面上，一个按钮的代码会自动生成，但是你只能看到三到四个不同的按钮外观，这些都不符合我的要求

我也找到了这个帖子

在这个页面上有一些代码，您可以添加到您希望共享按钮的位置。我按照此页面上的说明进行了操作，但当我尝试共享到facebook时，不会出现如下正常共享弹出窗口：

相反，我的浏览器会打开一个新页面，如下所示：

这是我的按钮代码

<a href="http://www.facebook.com/sharer/sharer.php?s=100" target="_blank" id="u_0_1"><img src="Images/facebook_logo.png" /></a>

我添加了元标记，如本文所述：

像这样：

<meta property="og:url" content="http://localhost:81/Index.php" />
<meta property="og:title" content="Clothing" />
<meta property="og:description" content="South African streetwear by South African streetwear lovers" />
<meta property="og:image" content="Images/logo_thumbnail.png" />

这是我从facebook开发者网站获得的原始代码，它提供了一个打开弹出窗口的工作共享按钮，但不允许我指定用作图标的图像：

<div id="fb-root"></div>
    <script>(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#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<div class="share-box"><div class="fb-share-button" data-type="icon" data-href="http://localhost:81/DopeClothing/Index.php" data-width="30"></div></div>

---

我想做的就是在我的页面上有一个共享按钮，在这里我可以指定要使用的图像，使其符合我的外观和感觉这是您的解决方案：

<script type="text/javascript">
function fbs_click(width, height) {
    var leftPosition, topPosition;
    //Allow for borders.
    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
    //Allow for title and status bars.
    topPosition = (window.screen.height / 2) - ((height / 2) + 50);
    var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
    u=location.href;
    t=document.title;
    window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
    return false;
}
</script>

<!-- Please change the width and height to suit your needs -->
<a href="http://www.facebook.com/share.php?u=<full page url to share>" onClick="return fbs_click(500, 300)" target="_blank" title="Share This on Facebook"><img src="yourimage.jpg" alt="facebook share"></a>

---

您包括Facebook JS SDK，因此可以在任何元素的onclick句柄中使用FB.ui调用共享对话框。