Facebook 分享按钮 - 自定义图片

Posted 2023-03-17

【中文标题】Facebook 分享按钮 - 自定义图片

【英文标题】：Facebook share button - custom image

【发布时间】：2012-04-29 19:18:03

【问题描述】：

我正在尝试将 facebook 的分享按钮集成到我的页面中。我正在使用以下代码：

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

这会生成图像和共享代码。但是，我正在尝试将自己的图像用于共享按钮。我正在使用以下代码：

<a name="fb_share"><img src="fb.png" /></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script> 

其中 fb.png 是带有 FB 徽标的自定义图像。

问题是我的图像与左侧的通用 Facebook 共享图像一起显示...您知道是否有一种方法可以为共享按钮实现自定义图像？

提前致谢！！

【问题讨论】：

我认为 FaceBook 禁止编辑它的按钮。我想做同样的事情并放弃了......

【参考方案1】：

你应该这样做：

HTML：

<a id='share'><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
    type="text/javascript"></script></a>

CSS：

#share *
   filter:alpha(opacity=0.1); 
   opacity:0.01;/*Hide Facebook button*/


#share
  display:inline-block;

  /*The width and height of your image. Not bigger than the Like button!*/
  width: 10px;
  height: 10px;

  /*Your image*/
  background:url(fb.png);

【讨论】：

“不比点赞按钮大”是因为

@Pro83：那是因为Like按钮有固定的高度和宽度；如果图像大于该图像，则图像在Like 按钮之外的部分将不会触发Like。如有必要，您可以将多个按钮直接并排放置，以覆盖整个图像。