How to change the style of the Facebook share button?

Question

I know this question has been asked before, but the answer is either outdated (talking about iframes), wrong (not allowed to change it), or confusing.

Once and for all, how do you change the style of the Facebook share button?

Pasting their code into my site produces some ugly looking thing of the wrong size and in the wrong language.

I want it to look like the other buttons on my site, and I want the text on it to be what I say it should be. Even if it can't be the exact text I use, it should at least be in the right language, like the Twitter button.

Browsing the dev guide on Facebook's site I found the following quote:

If your website doesn't need a button to open share dialog or Facebook provided button doesn't fit into your website design, Web Share Dialog is also provided for sharing links.

However, the Web Share Dialog is the most confusing thing I've ever read about. It gives zero actual guidance and comes with a bunch of confusing statements.

The Share dialog gives people the ability to publish an individual story to their timeline, a friend's timeline, a group, or in a private message on Messenger. This does not require Facebook Login or any extended permissions, so it is the easiest way to enable sharing on the web.

What? People without Facebook accounts can share things on their timeline? They don't even have a timeline...

Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link.

I have no idea what it is and they don't explain it.

This goes on and on, and I literally understand NOTHING and I'm not some stupid Wordpress blogger.

Can someone please explain how to go about doing this since Facebook refuses to?

Edit: I've gotten as far as using the Facebook Javascript SKD now, but it requests an app_id.

Their page says that an app_id is:

Your app's unique identifier. Required.

But I'm not making an app. I'm making a webpage...

Solution 1

First, ignore people who say you can't change the layout of Facebook's share button. It is allowed and a lot of sites do it.

Also, ignore the docs because they are useless and will only confuse you. Their code snippets are wrong, and so is their FAQ.

Despite Facebook's docs claiming otherwise, you absolutely need to create a "Facebook App", which is like an developer/admin page where you can edit some settings (and give Facebook your phone number).

Then you need to initialize the JavaScript SDK on your page (don't forget to add your actual app id from your Javascript App page into the appId):

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

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

And then you can use whatever button you want, like this:

<button class="ui facebook button">Share</button>

To get it do something when you click on it, use regular JS or jQuery event listener:

<script>
    $(".ui.facebook.button").click(function() {
        FB.ui({
            method: 'share',
            href: 'your-webpage.html',
}, function(response){});
    })
</script>

This will only work on the correct webpage, not locally.

Then you need to make the share page show the correct image and text. This is a different topic and it can range from easy to quite annoying depending on what platform you're working with. Search for instructions that fit your case.

Solution 2

You are not allowed to change the appearance of Social Plugins in any way, but you can use your own image with the Share Dialog or the sharer.php link. For the second option, you don´t even need an App ID, just open a link with the urlencoded URL:

https://www.facebook.com/sharer.php?u=[urlencoded-url]

About the Share Dialog: They say "This does not require Facebook Login", which does not mean "you don´t need a Facebook account". Those are completely different things. "Facebook Login" means "authorization in your App" in that case. You need to read this: https://developers.facebook.com/docs/facebook-login

The docs are really good nowadays, but you should take your time reading all of it, not just the parts you need right now: https://developers.facebook.com/docs/

In other words, you have 2 options:

• Use Social Plugins - NOT allowed to change the appearance, except for the official settings
• Create your own Share Button graphics and use the Share Dialog or sharer.php. For the Share Dialog, you need to include the JavaScript SDK (because it is based on that one) and create an App. For the sharer.php, you really just need to open the link.

About the language of the Share Button: You can set a language with the JS SDK easily, check out this article: http://www.devils-heaven.com/facebook-javascript-sdk-login/ - there is this line, with the language:

js.src = "//connect.facebook.net/en_US/sdk.js";

Btw, very important information about using/changing Facebook graphics: https://www.facebookbrand.com/dos-donts