How to customize/style Facebook share Button

Question

I search and i tried so much for the ways to make my own style for Facebook share button (this button allows you to share the current page)

https://developers.facebook.com/docs/plugins/share-button/

Since the button is an iframe we couldn't access to it and style it , I understand that . But i don't know how some websites have the share button with different styles ??

<!DOCTYPE html>
<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
  <!-- Load Facebook SDK for JavaScript -->
  <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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>
</body>
</html>

https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button — bhansa, Sep 12 '17 at 13:57

senojoeht · Answer 1 · 2017-09-12T14:47:00.773

1

A lot of sites have their own implementations of social share buttons, not calling the Facebook API. That's how they customise it.

For example, take a look at any Arcticle on The Next Web.

Also, duplicate of this this which talks about how much work would have to be done to actually implement the open-graph API with custom share/like buttons.

edited Sep 12 '17 at 14:47

answered Sep 12 '17 at 14:40

senojoeht

312
1
12

score 1 · Answer 2 · edited Sep 02 '18 at 16:51

1

The only way to style social buttons is to create your own with

Ridiculously Responsive Social Sharing Buttons

https://rrssb.netlify.com/

edited Sep 02 '18 at 16:51

ˈvɔlə

9,204
10
63
89

answered Sep 12 '17 at 15:03

David Leuliette

1,595
18
26

How to customize/style Facebook share Button

2 Answers2