3

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.

JP.
  • 1,035
  • 2
  • 17
  • 39
  • 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 Apr 15 '15 at 03:52
  • @RohitBatra Please share the link for the custom one. – JP. Apr 15 '15 at 03:53
  • 1
    refer: http://stackoverflow.com/a/6138879/1741052 – Rohit Batra Apr 15 '15 at 03:56
  • See also this answer: [http://stackoverflow.com/questions/21301189/how-to-make-a-very-large-facebook-share-button](http://stackoverflow.com/questions/21301189/how-to-make-a-very-large-facebook-share-button) - for using css to simply expand the display of the button. – DRosenfeld Jan 18 '16 at 15:47
  • Possible duplicate of [facebook like button larger size](http://stackoverflow.com/questions/3938201/facebook-like-button-larger-size) – rogerdpack May 15 '17 at 16:28

2 Answers2

3

try this 

.fb-share-button {
    opacity: 1;
    transform: scale(4.5);
    transform-origin: top left;
}
Shuhad zaman
  • 3,156
  • 32
  • 32
0

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

Community
  • 1
  • 1
Naqvi
  • 43
  • 9