如何使用我的自定义图像更改facebook登录按钮

我的脚本有如下代码

echo'
'。
__（“使用Facebook登录，'wdfb'）。'
 ",；

---

它使用facebook的默认设置。但我想使用我的自定义facebook connect图像。有人能帮我吗？

在谷歌上找到一个网站，解释了一些变化，据页面作者称fb不允许自定义按钮。

不幸的是，这违反了Facebook的开发者政策，该政策规定：

你不能绕过我们对Facebook核心功能的预期限制

FacebookConnect按钮是用FBML呈现的，这意味着它只是按照Facebook允许的方式呈现

---

您使用的方法是从Facebook Javascript代码中呈现登录按钮。但是，您可以编写自己的Javascript代码函数来模拟该功能。下面是如何做到这一点-

使用要显示的图像创建一个简单的锚定标记链接。在锚定标记上有一个

onclick

方法，该方法实际上可以完成真正的工作

接下来，我们创建Javascript函数，该函数将显示实际的弹出窗口，并在用户允许的情况下获取完整的用户信息。如果用户不允许我们的facebook应用，我们也会处理这种情况

window.fbAsyninit=function（）{
FB.init({
appId:'你的应用程序ID'，
真的，
状态：true，//检查登录状态
cookie:true，//启用cookie以允许服务器访问会话
xfbml:true//解析xfbml
});
};
函数fb_login（）{
FB.登录（功能（响应）{
if（response.authResponse）{
log（'欢迎！获取您的信息…）；
//console.log（响应）；//转储完整信息
access\u token=response.authResponse.accessToken；//获取访问令牌
user\u id=response.authResponse.userID；//获取FB UID
FB.api（'/me'，函数（响应）{
user\u email=response.email；//获取用户电子邮件
//您可以将这些数据存储到数据库中
});
}否则{
//用户点击取消按钮
log（'用户取消登录或未完全授权'）；
}
}, {
范围：“公共_档案，电子邮件”
});
}
（功能（）{
var e=document.createElement（'script'）；
e、 src=document.location.protocol+'//connect.facebook.net/en_US/all.js'；
e、 异步=真；
document.getElementById（'fb-root'）.appendChild（e）；
}());

我们完了

---

请注意，上述功能已经过全面测试，可以正常工作。你只需要输入你的facebook应用程序ID，它就会工作。

实际上，只有使用CSS才可能，但是，你用来替换的图像必须与原始facebook登录按钮的大小相同。幸运的是，Facebook提供了不同大小的按钮

来自facebook：

大小-不同大小的按钮：小、中、大、xlarge-最大 默认值为中等。

将登录iframe不透明度设置为0，并在父div中显示背景图像

.fb_iframe_widget iframe {
    opacity: 0;
}

.fb_iframe_widget {
  background-image: url(another-button.png);
  background-repeat: no-repeat; 
}

---

如果您使用的图像比原始facebook按钮大，则图像中超出原始按钮宽度和高度的部分将不可单击。

我是通过调用一个简单的

function fb_login() {
  FB.login( function() {}, { scope: 'email,public_profile' } );
}

我不知道facebook是否能够阻止这种规避，但现在我可以使用任何我想称之为

fb\u login

的HTML或图像，而且效果很好

---

参考资料：

但是为什么要使用？如果你看我链接的网站，你会发现允许进行一些修改，字体大小等，但不允许更改图像或其他内容。阅读这个网站，你会更好地理解，甚至学会如何改变它。很明显，在我发表之前，我已经阅读了你链接的那篇文章。mashable的自定义facebook connect图像。我确信他们使用的是自定义图像，而不是fbml代码。这是他们的按钮，他们的按钮非常类似于正常的fb按钮，所以它可能是允许的，我不知道。但他们这样做的方式只是一个图像链接到facebook登录，就像你做任何按钮链接一样。他们没有改变API中的任何内容。这是个好话题。那么，是否允许使用自定义按钮？不相似，但不同？可能重复！这太棒了，至少在chrome中很有魅力。。有些浏览器有问题吗？我还得测试一下。很好的回答我注意到在步骤1中有

href=“#”

。如果我想跳转到另一个链接怎么办？我尝试了

href=“www.google.com”

，但它不起作用。您好，您可以在收到用户的电子邮件后使用window.location进行操作。在您计划从页面上不同类型的锚定标记动态获取href的值之前，为“href”属性替换“#”不会有任何效果。但这是一个单独的用例，我得到的错误是fb root为null，而fb不是define。请回复以上代码对我也不起作用。经过一番挖掘，我终于找到了工作。这是我必须做的。调用图形时，需要显式调用所需的字段：

FB.api（'/me？locale=en_-US&fields=id、name、email、first_-name、last_-name'，function（response）{}

将

发布流

更改为

公共_-profile

，使其工作