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

时间:2015-05-11 07:13:18

标签: php facebook

我在我的网站上使用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图像呢?

3 个答案:

答案 0 :(得分:3)

您可以使用自己的图像作为共享按钮,方法是使用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]

答案 1 :(得分:-1)

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

答案 2 :(得分:-1)

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);
}());