Facebook fan page页面上添加facebook share按钮链接-有趣的事

Facebook fan page页面上添加facebook share按钮链接

2011-01-19 阅读 35

在Facebook fan page页面上，添加facebook share按钮链接。看了无数的帮助，搞了3个多小时。

在静态fbml中使用fb:share-button，并且button可以设置成自己喜欢的图片，当然也可以是默认按钮。

fb:share-button标签非常有用，在fan page的一个tab中，可以多次引用，而且可以设置不同的弹出层图片和提示信息。

按钮样式可以使用默认样式或者自定义图片。

在fbml中创建默认share按钮：

<pre class="brush:xml;">    ＜fb:share-button class="meta"＞
＜meta name="medium" content="mult"/＞
＜meta name="title" content="Mate of Mine"/＞
＜meta name="description" content="Mate of mine description"/＞
＜link rel="image_src" href="http://www.mateofmine.com/beta/images/logo.png" /＞
＜link rel="target_url" href="http://www.facebook.com/MateofMine"/＞
＜/fb:share-button＞
```
<p>
	显示样式可以使用如下的代码进行指定：</p>
<p>
	&nbsp;</p>
<p>
	请注意代码中的class='meta'是非常重要的。</p>
<p>
	在你的fan page最上方，加上如下style，就可以设置自己想要的按钮样式，甚至是一张图片了。</p>
<pre class="brush:css;" style="background-color: rgb(240, 240, 240); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; ">    a {
text-indent:-9999px;
display: block;
border:0; padding:0; margin:10px auto;
width: 278px; height: 187px;
background:url(http://www.mateofmine.com/beta/facebook/images/button_tex.png) top left no-repeat;
overflow: hidden;
text-decoration:none !important;
}
```
<p>
	点击后可以看到：</p>
<p>
	<img alt="" src="http://huilinwang.com/flying_fish_v01/uploads/04-2011/1302603084.png" style="width: 608px; height: 431px; "></p>