CODEWITHSUNDEEP
javascriptfacebook
JP.
JP.

Reputation: 1075

How can I change the size of the Facebook share button icon

The size of the share icon by default is very small. I want to replace the icon with a bigger one.

I am using the Share Button API with the following code:

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

... and I placed this the code for my plugin wherever I want the share button to appear on my page:

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

I would like the icon used for such buttons to be larger, but cannot figure out how to do so.

fyi: The share dialog should open on the same page, It shouldn't take the user to another page when someone click on the icon.

The facebook icon on this page is a great example, : http://plnkr.co/

Here's the plunk for current code.

Upvotes: 3

Views: 8275

Answers (2)

Shuhad zaman
Shuhad zaman

Reputation: 3390

try this 

.fb-share-button {
    opacity: 1;
    transform: scale(4.5);
    transform-origin: top left;
}

Upvotes: 3

Naqvi
Naqvi

Reputation: 43

You can customize your facebook share button(by adding it yourself) and resize it by adding the following code in your CSS file

.FBConnectButton {
  height: 15px;
  float: left;
  background-position-y: -251px;
  background-position-x: -1px;
  border-bottom: 1px solid #1a356e;
   }
 .FBConnectButton_Text {
  font-size: 8px ;
  height: 9px;
    }
 .fb_share_count_inner {
 height: 9px;
 position: relative;
  }
.fb_share_count .fb_share_count_right {
float: left;
 }

this will solve your problem just enter the height/font size and position of your button in the above code. There are few answers already present on this forum they may be helpful

Link 1

Link 2

Upvotes: 0

Related Questions