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

I am using Facebook share button in my website. But it's a default share button from facebook developer site. I don't know how can i use my own custom png image in place of default share button. I studied the facebook developer tutorials too but couldn't get any help from there. I also googled and searched in various websites, but no help is there regarding my existing code. I guess, its not included there. Here is my code:

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

In 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>

In one of my dynamic page, i have facebook share button:

在我的一个动态页面中,我有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>

So how can I use my own custom png image by modifying this existing code?

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

3 个解决方案

#1

You can use your own image for the Share Button by opening a popup for sharer.php with Javascript or by using the FB.ui Share Dialog: https://developers.facebook.com/docs/sharing/reference/share-dialog

您可以通过使用Javascript打开sharer.php的弹出窗口或使用FB.ui共享对话框,将您自己的图像用于共享按钮:https://developers.facebook.com/docs/sharing/reference/share-dialog

sharer.php does not even need an App: https://www.facebook.com/sharer/sharer.php?u=[urlencoded-url]

sharer.php甚至不需要应用程序:https://www.facebook.com/sharer/sharer.php?u = [urlencoded-url]

#2

right click on the button that you want to change "Inspect element" and find out if it really is an image or a CSS if it's an image find where the image is and upload your file with the same name ontop of the old one or if it's a CSS look for a button generator in google and just paste the code from there.

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

#3

1) Create a simple anchor tag link with the image you want to show. Have a onclick method on anchor tag which would actually do the real job.

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

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

2) Next, we create the Javascript function which will show the actual popup and will fetch the complete user information, if user allows. We also handle the scenario if user disallows our facebook app.

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

#1