Question

我在我的网站上使用Facebook分享按钮。但它是来自facebook开发者网站的默认分享按钮。我不知道如何使用我自己的自定义png图像代替默认共享按钮。我也研究过facebook开发人员教程，但是从那里得不到任何帮助。我也在各种网站上搜索和搜索，但对我现有的代码没有任何帮助。我想，它不包括在那里。这是我的代码：

在header.php中：

<div id="fb-root"></div>
<script>
// facebook like
(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_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

在我的一个动态页面中，我有facebook分享按钮：

<div id="deal_shares"><div id="facebook_share" class="fb-share-button" data-href="' . BASE . 'deals/' . $this->bus_url . '/' . $this->deal_url . '" data-layout="button"></div>

那么如何通过修改现有代码来使用我自己的自定义png图像呢？

Answer 1

您可以使用自己的图像作为共享按钮，方法是使用Javascript或使用FB.ui共享对话框打开sharer.php的弹出窗口：https://developers.facebook.com/docs/sharing/reference/share-dialog

sharer.php甚至不需要App：https://www.facebook.com/sharer/sharer.php?u=[urlencoded-url]

Answer 2

右键单击要更改“检查元素”的按钮，查看它是否真的是图像或CSS，如果图像找到图像所在的位置，并在旧图像上传上您的文件同名一个或者如果它是一个CSS寻找谷歌中的按钮生成器，只需从那里粘贴代码。

Answer 3

1）创建一个简单的锚标记链接，其中包含您要显示的图像。在锚标签上有一个onclick方法，它实际上可以完成真正的工作。

 <a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>

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

 window.fbAsyncInit = function() {
FB.init({
    appId   : 'YOUR_APP_ID',
    oauth   : true,
    status  : true, // check login status
    cookie  : true, // enable cookies to allow the server to access the session
    xfbml   : true // parse XFBML
});

 };

function fb_login(){
FB.login(function(response) {

    if (response.authResponse) {
        console.log('Welcome!  Fetching your information.... ');
        //console.log(response); // dump complete info
        access_token = response.authResponse.accessToken; //get access token
        user_id = response.authResponse.userID; //get FB UID

        FB.api('/me', function(response) {
            user_email = response.email; //get user email
      // you can store this data into your database             
        });

    } else {
        //user hit cancel button
        console.log('User cancelled login or did not fully authorize.');

    }
}, {
    scope: 'publish_stream,email'
});
}
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

如何更改Facebook分享按钮图像？

3 个答案: