1

I have added a Facebook share button and it works fine. However, I want to customize my button style and it is not working. I have tried to style the button using an external style.css file, calling classes that I found using Fire Bug, but when I specify my own style using those classes nothing happens.

This is how my code looks:

HTML:

<div class="fb-share-button" data-href="http://localhost/dfs/jersey.php" data-layout="button_count"></div>

Script:

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

Can anybody help me please?

I am also having the same problem with my Twitter button.

Donald Duck
  • 8,409
  • 22
  • 75
  • 99
snoopy_15
  • 1,273
  • 4
  • 18
  • 31
  • You'll need to include all the relevant code, with file names. – BaseZen Mar 01 '15 at 08:19
  • I was following instructions on fb development page, this is all I got. – snoopy_15 Mar 01 '15 at 08:22
  • But the question is about styling, and we'd need to see your `style.css`, know what directory it's in relative to the HTML source, how you're referencing the CSS file from within the HTML source, and also the relevant HTML snippet that results from evaluating the facebook script. This has to come from a browser HTML debugger, not the static HTML file. By relevant I mean the elements you're trying to customize with CSS. – BaseZen Mar 01 '15 at 08:33
  • I'm not sure how this whole thing with fb share button works. I don't get any css for this to add in my website, but when I use debugger in Browser I find everything that I want to change, whole classes, ids, but when I tried to change those classes and add changes in my own style.css nothing happens, Browser can't find them, I tried with !important also, it's like you haven't add any style. It seams to me that I can't change it, like it is default style for buttons and they can't be changed. :( – snoopy_15 Mar 01 '15 at 08:38
  • If you refuse to show *how* you're attempting to do the styling (as I spelled out) nobody can help. You're not integrating the `style.css` file properly even though you've written one. At this point it is just complaining. I move to delete/close. – BaseZen Mar 01 '15 at 08:42
  • For example I find this class in Browser debugger .pluginCountButton{background: white; border: 1px solid #9197a3; -webkit-border-radius: 2px; color: #4e5665; display: inline-block; font-size: 11px; height: auto; line-height: 18px; margin-left: 6px; min-width: 15px; padding: 0 3px; text-align: center; white-space: nowrap;} and I want to change for example font-size:14px, a tried to add this class to my own style.css and to do this changes, but nothing happens. – snoopy_15 Mar 01 '15 at 09:02

3 Answers3

2

You most certainly can style your own Facebook (and Twitter) buttons... I've done it myself.

I styled my Facebook button as follows:

  1. I created a division to style my Facebook button.
  2. I placed the <a> attribute provided by Facebook around my Facebook button div.

Note: I did not use div provided by Facebook, nor did I need to use any of the data attributes for my Facebook share link. I'm not too sure how you would go about adding such attributes.

For Twitter, I used a similar method:

  1. I created a division to style my Twitter button.
  2. I placed the <a> attribute provided by Twitter around my Twitter button div.
  3. I removed the class "twitter-share-button" from Twitter's <a> attribute to remove the button styling provided by Twitter.
  4. I used the method described here to add the necessary data to my button (such as the text to include in a shared tweet).

The code would look something like this: 

...

<style>

    .facebookButton {
        /* Style Button */
    }

    .twitterButton {
        /* Style Button */
    }

</style> 

...

<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">
    <div class="facebookButton">Share</div>
</a>

<a href="https://twitter.com/share?url=http%3A%2F%2Fyourwebsite.com%2F&text=Youre%20Text%20Here%20" target="_blank">
    <div class="twitterButton">Tweet</div> 
</a>

...

If you need further help on how to style social media buttons, I'd suggest visiting this w3schools link.

Note: Looking at the link provided by Osman, I cannot see anything in the Facebook social plugins section that suggests we are not allowed to style the Facebook share button. However, I may not be looking in the right place.

Last Note: This doesn't apply to the OP, but to anyone else reading this answer, don't forget to provide the necessary <script> provided by Facebook and Twitter to make the buttons functional!

ADB
  • 1,372
  • 1
  • 8
  • 11
1

You can't, you can only use the button provided by Facebook itself. If you do find a way to do so, you're still not allowed to as mentioned in the Platform Policy

As for Twitter, see this post here

Community
  • 1
  • 1
0

I have found this post too http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/ . It isn't allowed to change this buttons.

snoopy_15
  • 1,273
  • 4
  • 18
  • 31