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!

回答1:

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:

回答2:

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

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

回答3:

I just added the FB share code inside a div with whatever background image I wanted to display (in this case the Facebook logo in 64x64), and set opacity to zero. I used Transform: Scale to scale the widget (default 14x17) 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;
}

回答4:

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

What the share button does is opens a popup with a url like this:

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

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

Here's a basic example: (The sinippet doesn't actually work because popups are blocked by SO - not sure how to enable that.)

$(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>

来源：https://stackoverflow.com/questions/21301189/how-to-make-a-very-large-facebook-share-button

标签

facebook

button