Question

我知道之前已经问过这个问题，但答案是过时的（谈论iframe），错误的（不允许更改）或混淆。

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

将他们的代码粘贴到我的网站中会产生一些看起来很糟糕并且语言错误的丑陋东西。

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

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

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

但是，Web共享对话框是我读过的最令人困惑的事情。它给出了零实际指导，并伴随着一堆令人困惑的陈述。

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

什么？没有脸书帐户的人可以在时间轴上分享内容吗？他们甚至没有时间表......

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

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

这种情况一直持续下去，我完全理解NOTHING，而且我不是一个愚蠢的Wordpress博主。

有人可以解释一下，如果Facebook拒绝这样做会怎么做？

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

他们的网页说app_id是：

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

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

Answer 1

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

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

尽管Facebook的文档声称不然，但你绝对需要创建一个“Facebook App”，就像开发者/管理页面，你可以在其中编辑一些设置（并给Facebook你的电话号码）。

然后您需要在页面上初始化JavaScript SDK（不要忘记将您的Javascript App页面中的实际应用ID添加到<ul class="nav"> <li id="options"><a href="#">Options</a> <ul class="subnav"> <li><a href="#">Settings</a> </li> <li><a href="#">Application</a> </li> <li><a href="#">Board</a> </li> <li><a href="#">Options</a> </li> </ul> </li> </ul>）：

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>

要在单击它时执行某些操作，请使用常规JS或jQuery事件侦听器：

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

这只能在正确的网页上使用，而不能在本地使用。

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

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

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

使用社交插件 - 除正式设置外，不允许更改外观
创建您自己的Share按钮图形并使用Share Dialog或sharer.php。对于Share Dialog，您需要包含JavaScript SDK（因为它基于那个）并创建一个App。对于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

Answer 3

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

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

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

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

3 个答案: