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/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="/" 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, : /

Here's the plunk for current code.

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

• javascript
• facebook

• If you want a bigger button its better to use a custom one not the one from Facebook itself. As you can't change the size or design of that one – Rohit Batra Commented Apr 15, 2015 at 3:52
• @RohitBatra Please share the link for the custom one. – JP. Commented Apr 15, 2015 at 3:53
• 1 refer: stackoverflow./a/6138879/1741052 – Rohit Batra Commented Apr 15, 2015 at 3:56
• See also this answer: http://stackoverflow./questions/21301189/how-to-make-a-very-large-facebook-share-button - for using css to simply expand the display of the button. – DRosenfeld Commented Jan 18, 2016 at 15:47
• Possible duplicate of facebook like button larger size – rogerdpack Commented May 15, 2017 at 16:28

2 Answers 2

try this

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

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