Facebook 分享按钮等于 Twitter 推文按钮答案

【问题标题】：Facebook Share Button equal to Twitter Tweet ButtonFacebook 分享按钮等于 Twitter 推文按钮
【发布时间】：2014-02-11 22:17:35
【问题描述】：

我通过 https://about.twitter.com/resources/buttons#tweet 制作了一个有效的 Twitter“Tweet”按钮（确实出现在我的 localhost 网站上），并且确实需要一个 Facebook“分享”按钮，该按钮在配色方案、字体类型/颜色和突出效果。然而：

-由 Facebook 的代码生成的按钮https://developers.facebook.com/docs/plugins/share-button/ 似乎无法通过 CSS 编辑，所以我无法让它看起来像我拥有的 Twitter 按钮。

希望得到一些帮助，谢谢！

***编辑根据要求，这里有一些代码 sn-ps 可以帮助那些想要帮助我的人：

我正在使用的 Twitter 按钮：

 <a href="https://twitter.com/share" class="twitter-share-button" data-    
url="http://example.com" data-size="large" data-count="none" data-dnt="true">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)
[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) 
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

...这是我开始使用的 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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

和

<div class="fb-share-button" data-href="http://example.com" data-width="75" data-type="button"></div>

【问题讨论】：

把它也放在那里。看起来那里的用户并不多。 “CSS”标签有 96 次使用，超过 188,000 次使用。
...有人刚刚在那里留下了评论，它属于这里。请删除反对票，这可能会导致人们认为这不是与编码相关的问题。
这不是一个 UX 问题，因为看起来 OP 清楚地知道他想向用户展示什么以及他们如何交互，但他在实现方面遇到了困难实现他预期设计的代码。
提示- 把你已经做过的事情贴在这里，人们将更有可能提供帮助。如果我们可以将您的 sn-p 复制并粘贴到 jsfiddle 或 codepen 并从那里修改，那就容易多了

标签： javascript css facebook button twitter

【解决方案1】：

是的，Facebook 按钮没有可编辑的 CSS，因为 Facebook 想要他们的按钮样式。

也就是说，您可以使用不受支持的* facebook sharer.php 链接绕过样式限制。基本上，它是共享按钮的旧版本，虽然您不能定义尽可能多的东西（或在共享发生时获取回调等），因为它是常规的 html 标签，但您可以随意设置它的样式。

如需了解如何自定义链接参数，check out this blog post。

*虽然 Facebook 已经弃用了 sharer.php，并且真的希望人们使用新版本以便 Facebook 可以控制样式等，但他们仍然保持它的活力，因为它在网络上有如此广泛的使用。 YMMV，但目前我知道这是唯一一种设置 Facebook 分享按钮样式的方法。

【讨论】：