使用 javascript SDK 自定义皮肤 facebook like 按钮

Posted 2023-03-17

【中文标题】使用 javascript SDK 自定义皮肤 facebook like 按钮

【英文标题】：Custom skinned facebook like button using javascript SDK

【发布时间】：2011-11-09 10:24:23

【问题描述】：

我有一张我想使用的自定义图片，而不是标准的 facebook 风格的图片。我有这个工作，但它只是“分享”页面而不是“喜欢”它。

我想知道是否有办法使用 jQuery 或 javascript SDK 使该按钮“喜欢”页面，因为我不同意使用 CSS 来“屏蔽”标准按钮？

可惜它不是像twitters API那样简单的自定义按钮...

对此的任何帮助将不胜感激！

干杯，

戴夫

【参考方案1】：

一般来说，facebook like 图标的图标包含在：

.connect_widget_like_button .liketext

所以你可以使用 :

覆盖 css

.connect_widget_like_button .liketext background-image : url('path_of_my_customized_image.jpg') !important;

使用 !important 将强制 css 将其覆盖到您的设置中，即使在这段代码之后加载了类似 Facebook 图标的 css ;)

希望对你有帮助；）

编辑：在 JQuery 中使用它也很容易，只需编写：

$('.connect_widget_like_button .liketext').css('background-image', "url('path_of_my_customized_image.jpg') !important;");

【讨论】：

我们是否必须在 iframe 已加载的函数中调用此 jquery 对吗？我正在尝试类似的东西，但like按钮仍然没有改变。我在 $('iframe').load(function()); 中调用的函数中调用 jquery功能。关于我在哪里犯错的任何建议？

我也试过了。我还注意到fb 的like button 的span,div 标签在标签中有它们的style 属性。我认为因为这将覆盖指定的任何其他样式信息，我想这就是我看不到任何东西的原因......

你使用了关键字!important 吗？

如果在标签属性中，可以尝试使用.attr()重载这些属性。更改宽度示例：$('selector').attr('width', '100%')

【参考方案2】：

您可以使用Graph API，但问题是您需要创建一个应用程序，然后让用户允许该应用程序发布到他们的流。在我看来，这是一大堆废话。

我对为什么会这样的理解是，如果一个人可以在没有用户验证应用程序的情况下对其进行编程，那么该应用程序可以向大量用户发送垃圾邮件，让他们喜欢他们不喜欢的东西。