Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a very large facebook share button?

I would like to make a dynamic facebook share button, which I can of course make on facebook's page. However, I would like to make a very large button, just like on this website: http://fullym.com/these-photos-of-an-el-salvador-prison-for-gang-members-may-make-you-sick/

But I have no idea how?

I'm using Joomla.

Thanks!

like image 945
user1328977 Avatar asked Jan 23 '14 06:01

user1328977


People also ask

How do I create a custom Share button on Facebook?

To generate a Facebook Share Button, visit https://developers.facebook.com/docs/plugins/share-button and specify the URL you want people to share as well as the width. Then generate the code, and paste it into your site where you want the button to appear.


1 Answers

Here is the code for a share button, you can also see it on JS Bin.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <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/all.js#xfbml=1&appId=236759163171393";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
  .fb-share-button
{
transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
-o-transform: scale(3.5);
-moz-transform: scale(3.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
  </style>

  <div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button"></div>
</body>
</html>

The result looks like this:

enter image description here

like image 79
Metablocks Corp Avatar answered Oct 20 '22 06:10

Metablocks Corp