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