如何自定义 Facebook 发送按钮？答案

【问题标题】：How to customize a Facebook Send Button?如何自定义 Facebook 发送按钮？
【发布时间】：2016-12-07 14:51:26
【问题描述】：

我正在尝试自定义 facebook“发送”按钮的外观。

我使用docs 中提供的代码生成按钮，但是我不知道如何修改按钮的图像或文本？

谁能给我一个例子？我想javascript是我唯一的选择吗？

我的代码现在看起来像这样：

<fb:send href="http://www.mywebsite.com/something"></fb:send>

这会生成一个如下所示的按钮：

谢谢！

【问题讨论】：

这篇文章可能对business.com/b2bmarketing/create-share-buttons有帮助
你也可以影响<a href="https://www.facebook.com/sharer.php?u=<url to share>&t=<title of content><img src="your_image.xxx"></a>
这不是分享按钮，这就是我的意思...不敢相信没有可能的方法来定制这个？

标签： facebook

【解决方案1】：

您无法自定义<fb:send /> 按钮。但是，您可以使用FB.ui (http://developers.facebook.com/docs/reference/javascript/FB.ui/) 实现相同的功能。使用send 方法，例如。

FB.ui({
    method: 'send',
    name: 'People Argue Just to Win',
    link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});

【讨论】：

【解决方案2】：

您可以随时创建自己的链接并根据需要设置样式，然后添加来自this list of all social sharing button links list 的链接 - 这适用于分享到各种社交网站。

对于 Facebook 的分享链接，将 [URL] 和 [TITLE] 替换为您的数据，在链接的 href 中使用以下代码中的 urlencode()：

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

【讨论】：

【解决方案3】：

在自定义这些 Facebook 按钮方面，您非常擅长。他们有意设计了他们的按钮，这样您就无法在 Facebook 提供的有限范围之外更改或自定义它们。

【讨论】：

有什么办法可以克服这个问题吗？也许使用发送对话框？
只是它们位于页面上的脚本无法访问的 iframe 中。如果您使用浏览器扩展程序，您可以修改它们的外观...或使用 FB.ui

【解决方案4】：

Facebook 的发送按钮位于 iframe 中。如果您等待iframe 加载，您可以使用$('iframe').contents() 选择其内容。所以替换文本看起来像

$(function(){
    $('.fb_iframe_widget iframe').on('load', function(){
        $(this).contents().find('.pluginButtonLabel').text('Custom Text');
    });
});

【讨论】：