CODEWITHSUNDEEP
htmlcssfacebook
Mikey
Mikey

Reputation: 396

Styling the Facebook share API button

I am trying to integrate Facebook sharing on a site for the first time and am having a bit of a problem trying to figure out how to change the appearance of the button. Currently my code looks like this:

<div id="fb-root"></div>
<script>
    (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_US/sdk.js#xfbml=1&version=v2.0";

        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div id="share">
    <div class="share-box">
        <div class="fb-share-button" data-layout="icon" data-href="https://developers.facebook.com/docs/plugins/"></div>
    </div>
</div>

And this creates a small image like this: enter image description here

I want to change the button that is shown as this button is way too small, trying to style it and increase the widths and heights through CSS does not work. Is there a way to set a custom Facebook image?

Upvotes: 2

Views: 1388

Answers (1)

Mikey
Mikey

Reputation: 396

I have found a solution that involves using the Facebook javascript SDK to create my own share button that I am able to style at will. First, include the Facebook javascript SDK script right after the body tag:

<div id="fb-root"></div> 
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.1'
    });
  };

  (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_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Then create the element you wish to function as your share button:

<div id="share">
  <div class="share-box"><div class="facebook-share">f</div></div>
</div>

Lastly add the facebook share function in your javascript (I am using jQuery)

$('.facebook-share').click(function() {
    FB.ui({
        method: 'share',
        href: 'https://developers.facebook.com/docs/',
        }, function(response){});
});

Upvotes: 4

Related Questions