As a respond to the previous post (How To Add Facebook Box Count Like Button To Blogger), I would like to share with you how to custom your Facebook Share button on Blogger. Since the default Facebook Share button does not fit well with the others social media share button in term of width like for example ~ Twitter, it is end up look not so good. But not to worry, there is a solution for this problem..

Default and Custom Facebook Share with Twitter tweet button as a comparison


Share

Now, how to do it?
Say this is your Facebook share button..

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Go to your your Blogger dashboard Click 'Layout' ► 'Edit Html' ► 'Expand Widget Templates'. Don't forget to backup your template first. Search for ]]></b:skin> and paste the CSS below before it.

.FBConnectButton_Text {
font-size: 9px;
padding:2px 3px 3px !important;
}

Updates : Or you can do this too. Facebook Share with Rounded corners


.fb_share_count_top {width:53px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:54px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 3px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:10px;font-weight:normal !important;}

Adjust the width (red color) to match the Twitter tweet button. Go0d luck.



You may also like this [...]
Fellow Readers