如何更改 Facebook 分享按钮的样式？答案

【问题标题】：How to change the style of the Facebook share button?如何更改 Facebook 分享按钮的样式？
【发布时间】：2016-01-14 07:17:48
【问题描述】：

我知道以前有人问过这个问题，但答案要么过时（谈论 iframe）、错误（不允许更改），要么令人困惑。

一劳永逸，如何改变 Facebook 分享按钮的样式？

将他们的代码粘贴到我的网站中会产生一些看起来很丑的东西，大小错误，语言错误。

我希望它看起来像我网站上的其他按钮，并且我希望它上面的文字是我所说的那样。即使它不是我想要的确切文字使用时，它至少应该使用正确的语言，例如 Twitter 按钮。

浏览 Facebook 网站上的开发指南，我发现以下引用：

如果您的网站不需要按钮来打开分享对话框或 Facebook 提供的按钮不适合您的网站设计，网络共享对话框还提供用于共享链接。

但是，Web 共享对话框是我读过的最令人困惑的东西。它给出了零实际指导，并带有一堆令人困惑的陈述。

共享对话框使人们能够发布个人故事到他们的时间线、朋友的时间线、小组或私人 Messenger 上的消息。这不需要 Facebook 登录或任何扩展权限，因此这是启用共享的最简单方法网络。

什么？没有 Facebook 帐户的人可以在他们的时间线上分享内容吗？他们甚至没有时间表……

使用 FB.ui 函数和 share 方法触发共享对话框共享链接的参数。

我不知道它是什么，他们也没有解释。

这种情况一直持续下去，我真的什么都不懂，而且我不是什么愚蠢的 Wordpress 博主。

由于 Facebook 拒绝，有人能解释一下如何去做吗？

编辑：我现在已经使用 Facebook Javascript SKD，但它要求app_id。

他们的页面显示app_id 是：

您应用的唯一标识符。必填。

但我不是在制作应用程序。我正在制作网页...

【问题讨论】：

您能展示一下您当前的社交按钮设计吗？我可以整理出来，并会解释您发布的每条报价。
@AdamAzad 不确定，但官方的 Tweet 按钮看起来不错，我想更改同样复杂，所以我不妨采用这种风格。否则，我会使用语义 UI 的按钮布局 (semantic-ui.com/elements/button.html)。不需要完整的风格指南，只需了解如何改变一切！
“不工作”不是一个足够的错误/问题描述。作为开发者，首先要做的就是打开浏览器控制台。那里有任何错误/警告吗？有测试链接吗？
@luschn 这不是我的问题描述。错误在代码下方。
我没有看到任何错误信息

标签： javascript html css facebook

【解决方案1】：

首先，请忽略那些说您无法更改 Facebook 分享按钮布局的人。这是允许的，很多网站都这样做。

另外，请忽略这些文档，因为它们没有用，只会让您感到困惑。他们的代码 sn-ps 是错误的，他们的 FAQ 也是如此。

尽管 Facebook 的文档声称并非如此，但您绝对需要创建一个“Facebook 应用”，这就像一个开发人员/管理页面，您可以在其中编辑一些设置（并为 Facebook 提供您的电话号码）。

然后您需要在您的页面上初始化 JavaScript SDK（不要忘记将您的实际应用程序 ID 从您的 Javascript 应用程序页面添加到 appId）：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (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>

然后你可以使用任何你想要的按钮，像这样：

<button class="ui facebook button">Share</button>

要让它在你点击它时做一些事情，使用常规的 JS 或 jQuery 事件监听器：

<script>
    $(".ui.facebook.button").click(function() {
        FB.ui({
            method: 'share',
            href: 'your-webpage.html',
}, function(response){});
    })
</script>

这仅适用于正确的网页，而不是本地。

然后你需要让分享页面显示正确的图片和文字。这是一个不同的主题，根据您使用的平台，它的范围从容易到非常烦人。搜索适合您情况的说明。

【讨论】：

在这种情况下 is 不是默认样式 - 因为您只是在自己的代码中调用对话框，但是您喜欢 - 它可以是一个按钮、一张图片、一个链接……这完全取决于你。
默认样式：我想摆脱的默认按钮。阅读问题。
评论不用于扩展讨论；这个对话是moved to chat。
如果我想将这个解决方案用于动态页面，这个解决方案是否可行？像 href: your_webpage.html 总是会改变，所以我不能把静态 url 放在 JS 代码或 jQuery 上。我怎样才能做到这一点？

【解决方案2】：

您不得以任何方式更改社交插件的外观，但您可以通过Share Dialog 或sharer.php 链接使用您自己的图片。对于第二个选项，您甚至不需要 App ID，只需打开带有 urlencoded URL 的链接：

https://www.facebook.com/sharer.php?u=[urlencoded-url]

关于分享对话框：他们说“这不需要 Facebook 登录”，这并不意味着“您不需要 Facebook 帐户”。这些是完全不同的事情。在这种情况下，“Facebook 登录”是指“您的应用程序中的授权”。您需要阅读以下内容：https://developers.facebook.com/docs/facebook-login

现在的文档非常好，但您应该花时间阅读所有文档，而不仅仅是您现在需要的部分：https://developers.facebook.com/docs/

换句话说，您有两种选择：

使用社交插件 - 不允许更改外观，官方设置除外
创建您自己的共享按钮图形并使用共享对话框或 sharer.php。对于共享对话框，您需要包含 JavaScript SDK（因为它基于那个）并创建一个应用程序。对于sharer.php，你真的只需要打开链接。

关于分享按钮的语言：您可以通过JS SDK轻松设置语言，查看这篇文章：http://www.devils-heaven.com/facebook-javascript-sdk-login/ - 有这行，语言：

js.src = "//connect.facebook.net/en_US/sdk.js";

顺便说一句，关于使用/更改 Facebook 图形的非常重要的信息：https://www.facebookbrand.com/dos-donts

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案3】：

可以覆盖按钮的 CSS 样式，这仍然是一种有效的方法。只需查找 Facebook 正在使用的 CSS 类并根据您的偏好覆盖它们。

确保您的自定义样式遵循默认的 FB 样式。

https://developers.facebook.com/docs/plugins/share-button/

【讨论】：