如何制作一个非常大的Facebook分享按钮？
use*_*977 8 share facebook button
我想制作一个动态的Facebook分享按钮,我当然可以在facebook的页面上制作.但是,我想制作一个非常大的按钮,就像在这个网站上一样:http: //fullym.com/these-photos-of-an-el-salvador-prison-for-gang-members-may-make-你变态/
但我不知道怎么样？
我正在使用Joomla.
谢谢!
Met*_*orp 14
这是分享按钮的代码,你也可以在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>
结果如下:
这是分为两部分的代码：
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&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font&height=22&appId=XXXXXXXXXXXXXX"></iframe></div>
请注意，您需要将like_btn div 的内部替换为 Facebook IFRAME。您还可以将3.5更改为其他数字以增大或减小尺寸。
- 应该是同样的原理 (3认同)
| 归档时间： |
|
| 查看次数： |
18180 次 |
| 最近记录： |