Question

我添加了一个Facebook分享按钮，它运行正常。但是，我想自定义我的按钮样式，它不起作用。我试图使用外部style.css文件设置按钮样式，调用我使用Fire Bug找到的类，但是当我使用这些类指定我自己的样式时没有任何反应。

这是我的代码的外观：

HTML：

<div class="fb-share-button" data-href="http://localhost/dfs/jersey.php" data-layout="button_count"></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>

有人可以帮帮我吗？

我的Twitter按钮也遇到了同样的问题。

Answer 1

你不能，你只能使用Facebook本身提供的按钮。如果您确实找到了这样做的方法，那么Platform Policy

中仍然不允许您这样做

至于Twitter，请参阅此帖子here

Answer 2

你当然可以设计自己的Facebook（和Twitter）按钮......我自己也做过。

我将 Facebook 按钮设置如下：

我创建了一个部门来设置我的Facebook按钮。
我将<a>属性provided by Facebook放在我的Facebook按钮div周围。

注意：我没有使用Facebook提供的div，也不需要为我的Facebook共享链接使用任何data属性。我不太清楚如何添加这些属性。

对于 Twitter ，我使用了类似的方法：

我创建了一个部门来设置我的Twitter按钮。
我将<a>属性provided by Twitter放在我的Twitter按钮div周围。
我从Twitter的<a>属性中删除了“twitter-share-button”类，以删除Twitter提供的按钮样式。
我使用了here描述的方法将必要的数据添加到我的按钮（例如要包含在共享推文中的文本）。

代码看起来像这样：

...

<style>

    .facebookButton {
        /* Style Button */
    }

    .twitterButton {
        /* Style Button */
    }

</style> 

...

<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">
    <div class="facebookButton">Share</div>
</a>

<a href="https://twitter.com/share?url=http%3A%2F%2Fyourwebsite.com%2F&text=Youre%20Text%20Here%20" target="_blank">
    <div class="twitterButton">Tweet</div> 
</a>

...

如果您需要有关如何设置社交媒体按钮样式的进一步帮助，我建议您访问this w3schools link。

注意：看看奥斯曼提供的link，我在Facebook社交插件部分看不到任何暗示我们不允许设置Facebook共享按钮的样式。但是，我可能找不到合适的地方。

最后注意：这不适用于OP，但对于阅读此答案的其他人，请不要忘记提供Facebook和Twitter提供的必要<script>以使按钮正常运行！

Answer 3

我也发现了这篇文章http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/。不允许更改此按钮。

如何设置Facebook和Twitter共享按钮的样式？

3 个答案: