Geek Answers Handbook

How to make a very large facebook share button?

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

But I have no idea how?

I am using Joomla.

Thanks!

+8
facebook button share
source share
4 answers

Here is the code for the sharing 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 is as follows:

enter image description here

+14
source share

Here is the code in 2 parts:

CSS

 #like_btn IFRAME { 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: bottom left; -ms-transform-origin: bottom left; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; }

Then the HTML part:

 <div id="like_btn"><iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:90px; height:22px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXXXXX&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=22&amp;appId=XXXXXXXXXXXXXX"></iframe></div>

Please note that you need to replace the inside of like_btn div with your Facebook IFRAME. You can also change 3.5 to another number to increase or decrease the size.

+1
source share

I added the FB sharing code inside the div with any background image that I wanted to display (in this case, the Facebook logo in 64x64), and set the opacity to zero. I used Transform: Scale to scale the widget (14x17 by default) to the size of the parent div.

HTML:

 <!-- FB SDK --> <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.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Facebook share button 64x64 --> <div id="fb-share" class="social" style="background-image: url(/assets/images/FB-f-Logo__blue_144.png);"> <div class="fb-share-button" data-href="http://my.website.com" data-layout="icon"></div> </div>

CSS

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

The site you linked to does not use the Facebook SDK.

What the share button does, a pop-up window opens with the following URL:

https://www.facebook.com/sharer/sharer.php?u=[url-to-share]

Thus, you can make the button look like anything, and catch a click on the button to open a popup window with the above URL.

Here's a basic example: (Synoptype doesn't actually work because pop-ups are blocked by SO - not sure how to enable this.)

 $(function() { $("#facebook-share-button").on("click", function() { var url = "https://www.facebook.com/sharer/sharer.php?u=" + window.location.href; var width = 595; var height = 465; var left = window.screenX + window.outerWidth / 2 - width / 2; var top = window.screenY + window.outerHeight / 2 - height / 2; window.open(url, 'facebookShareWindow', 'height=' + height + ',width=' + width + ',left=' + left + ',top=' + top); }); }); 
 .custom-button { background: black; color: white; font-size: 30px; border: none; border-radius: 5px; padding: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="facebook-share-button" class="custom-button">Share this on Facebook</button>
0
source share

More articles:


All Articles