如何更改facebook共享按钮图像？

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打开sharer.php的弹出窗口或使用FB.ui共享对话框，您可以将自己的图像用于共享按钮：https://developers.facebook.com/docs/sharing/reference/share-dialog

sharer.php甚至不需要应用程序：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);
}());