Question

我想创建一个动态的Facebook分享按钮，我当然可以在Facebook的页面上制作。但是，我想制作一个非常大的按钮，就像在这个网站上一样： http://fullym.com/these-photos-of-an-el-salvador-prison-for-gang-members-may-make-you-sick/

但我不知道怎么做？

我正在使用Joomla。

谢谢！

Answer 1

以下是分享按钮的代码，您也可以在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>

结果如下：

enter image description here

Answer 2

以下是两部分的代码：

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

然后 HTML 部分：

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

请注意，您需要使用Facebook IFRAME替换 like_btn div的内部。您还可以将 3.5 更改为其他数字以增加或减小尺寸。

Answer 3

我刚刚在div中添加了FB共享代码，其中包含我想要显示的任何背景图像（在这种情况下是64x64中的Facebook徽标），并将不透明度设置为零。我使用Transform：Scale将小部件（默认为14x17）缩放到父div的大小。

HTML：

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

CSS：

{{1}}

Answer 4

您链接到的网站不使用Facebook SDK。

分享按钮的作用是打开一个带有这样的URL的弹出窗口：

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

所以你可以让按钮看起来像你喜欢的任何东西，然后点击按钮打开一个带有上述URL的弹出窗口。

这是一个基本的例子:( sinippet实际上不起作用，因为弹出窗口被SO阻止 - 不知道如何启用它。）

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

如何制作一个非常大的Facebook分享按钮？

4 个答案: