设置Facebook共享API按钮的样式

Question

我试图首次在网站上整合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 id="share">
    <div class="share-box">
        <div class="fb-share-button" data-layout="icon" data-href="https://developers.facebook.com/docs/plugins/"></div>
    </div>
</div>

这会创建一个像这样的小图像：

我想更改显示的按钮，因为此按钮太小，尝试设置样式并通过CSS增加宽度和高度不起作用。有没有办法设置自定义Facebook图像？

Answer 1

我找到了一个解决方案，涉及使用Facebook javascript SDK创建我自己的分享按钮，我可以随意设置。首先，在正文标记后面加上Facebook javascript SDK脚本：

<div id="fb-root"></div> 
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.1'
    });
  };

  (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'));
</script>

然后创建您希望用作分享按钮的元素：

<div id="share">
  <div class="share-box"><div class="facebook-share">f</div></div>
</div>

最后在你的javascript中添加facebook共享功能（我正在使用jQuery）

$('.facebook-share').click(function() {
    FB.ui({
        method: 'share',
        href: 'https://developers.facebook.com/docs/',
        }, function(response){});
});