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