创建Facebook共享按钮

Question

我正在我的网站上创建一个分享按钮，以便用户能够将该页面分享到Facebook，但是我很难理解如何正确地执行此操作。

在这个页面https://developers.facebook.com/docs/plugins/share-button上会自动生成一个按钮的代码，但是只允许三个或四个不同的按钮外观，这些都不符合我的要求。

我还发现了这篇文章http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/

在此页面上有一些代码可以添加到您希望共享按钮的位置。我按照此页面上的说明操作，但当我尝试分享到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>

我添加了帖子中描述的元标记：http://www.phpscholar.com/tutorials/custom-thumbnail-title-and-description-for-facebook-share-using-open-graph

像这样：

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

我想要做的就是在我的页面上有一个分享按钮，我可以指定要使用的图像，以便它符合我的外观和感觉

Answer 1

这是你的解决方案：

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