FaceBook的Link Button添加方式

最新推荐文章于 2024-10-04 10:53:49 发布

weixin_30580943

最新推荐文章于 2024-10-04 10:53:49 发布

阅读量120

点赞数

文章标签： php 人工智能

原文链接：http://www.cnblogs.com/catcat811/archive/2011/04/08/2009189.html

版权

一、源文介绍
The Like button enablesusers to make connections to your pages and share content back to their friendson Facebook with one click. Since the content is hosted by Facebook, the buttoncan display personalized content whether or not the user has logged into yoursite. For logged-in Facebook users, the button is personalized to highlightfriends who have also liked the page.
The basic Like button isavailable via a simple iframe you can drop into your page easily. Afuller-featured Like button is available via the <fb:like> XFBML tag andrequires you use the new JavaScriptSDK. The XFBML version allows users to add a comment to their like as it isposted back to Facebook. The XFBML version also dynamically sizes its height;for example, if there are no profile pictures to display, the plugin will onlybe tall enough for the button itself.
If your web pagesrepresent profiles of real-world things — things like movies, sports teams,celebrities, and restaurants, you can optionally use the OpenGraph protocol to enable users to establish lasting connections to yourpages. Your pages show up in more places on Facebook and you gain the abilityto publish stream stories to connected users.
To customize how yoursite shows up when users share your page with the Like button, you can add metadata to your web pages:

og:title - The title of your page; if not specified, the title element will be used.
og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

For example if you arecreating a page about the movie 'The Rock' you would include this meta data:

<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

参考地址(需要使用代理访问)：
http://developers.facebook.com/docs/reference/plugins/like
其它效果地址：
http://developers. facebook.com/docs/reference/plugins/activity
http://developers. facebook.com/docs/reference/plugins/comments
http://developers. facebook.com/docs/reference/plugins/facepile
http://developers. facebook.com/docs/reference/plugins/like-box
http://developers. facebook.com/docs/reference/plugins/live-stream
http://developers. facebook.com/docs/reference/plugins/login
http://developers. facebook.com/docs/reference/plugins/recommendations
以上地址都带事相应的代码生成器
二、Link Button 例子
1）页头代码：

<head> <meta property="og:title" content="Test Like Button" /> <meta property="og:type" content="dev1.mytesting.net" /> <meta property="og:url" content="http://developers.facebook.com/docs/reference/plugins/like" /> <meta property="og:image" content="http://static.ak.fbcdn.net/rsrc.php/z7WV5/hash/ac3b8tmv.png" /> <meta property="og:site_name" content="Facebook Developers" /> </head>

2）正文代码：

<iframe src="http://www.facebook.com/plugins/like.php?href=[页面绝对地址]&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:40px;" allowTransparency="true"></iframe>

3）界面效果：