Javascript 如何更改Facebook共享按钮的样式？

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

一劳永逸，你如何改变Facebook共享按钮的风格

将他们的代码粘贴到我的网站上会产生一些外形丑陋、大小错误、语言错误的东西

我希望它看起来像我网站上的其他按钮，我希望它上的文本是我说的应该是的。即使它不能是我使用的确切文本，它至少应该使用正确的语言，比如Twitter按钮

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

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

然而，Web共享对话框是我读过的最令人困惑的东西。它没有提供任何实际指导，并且附带了一系列令人困惑的陈述

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

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

通过Share方法使用FB.ui函数触发共享对话框 参数以共享链接

我不知道是什么，他们也不解释

这种情况一直持续下去，我真的什么都不懂，我也不是什么愚蠢的Wordpress博客作者

既然Facebook拒绝这样做，有人能解释一下怎么做吗？

Edit:我现在已经开始使用Facebook Javascript SKD，但它需要一个

应用程序id

他们的页面上说

应用程序id

是：

你的应用程序的唯一标识符。必需的

---

但我不是在做应用程序。我正在制作一个网页…

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

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

---

您不允许以任何方式更改社交插件的外观，但您可以通过或

sharr.php

链接使用自己的图像。对于第二个选项，您甚至不需要应用程序ID，只需打开一个带有URL编码URL的链接：

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

关于共享对话框：他们说“这不需要Facebook登录”，这并不意味着“你不需要Facebook帐户”。这些是完全不同的事情。在这种情况下，“Facebook登录”意味着“应用程序中的授权”。您需要阅读以下内容：

现在的文档非常好，但你应该花时间阅读所有文档，而不仅仅是你现在需要的部分：

换句话说，您有两个选项：

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

关于共享按钮的语言：您可以轻松地使用JS SDK设置语言，请参阅本文：-这里有一行，语言：

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

---

顺便说一句，关于使用/更改Facebook图形的非常重要的信息：

首先，忽略那些说你不能更改Facebook共享按钮布局的人。这是允许的，很多网站都这样做

另外，忽略文档，因为它们是无用的，只会让你感到困惑。他们的代码片段是错误的，他们的常见问题也是错误的

尽管Facebook的文档声称并非如此，但你绝对需要创建一个“Facebook应用程序”，它就像一个开发者/管理员页面，你可以在其中编辑一些设置（并给Facebook你的电话号码）

然后，您需要在页面上初始化JavaScript SDK（不要忘记将JavaScript应用程序页面中的实际应用程序id添加到

appId

）：

window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
xfbml：是的，
版本：“v2.5”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

然后你可以使用任何你想要的按钮，比如：

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

$（“.ui.facebook.button”）。单击（函数（）{
FB.ui({
方法：'共享'，
href:'your webpage.html'，
}，函数（响应）{}；
})

这将只在正确的网页上工作，而不是在本地工作

---

然后，您需要使共享页面显示正确的图像和文本。这是一个不同的主题，根据您使用的平台的不同，它可以是容易的，也可以是相当烦人的。搜索适合您情况的说明。

您能展示一下当前社交按钮的设计吗？我可以把它整理出来，并解释你发布的每一条引语。@AdamAzad不确定，但官方的推特按钮看起来不错，我想它同样复杂，所以我还是选择那种风格吧。否则，我将使用Semantic UI（）的按钮布局。不需要一个完整的风格指南，只是如何让事情改变在第一位！“不起作用”是不够的

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