zoukankan      html  css  js  c++  java
  • FaceBook的Link Button添加方式

    一、源文介绍
    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; 450px; height:40px;"
    allowTransparency="true"></iframe>

    3)界面效果:

  • 相关阅读:
    国外的零日漏洞记录片(中文字幕)
    浅谈网络爬虫中广度优先算法和代码实现
    浅谈网络爬虫中深度优先算法和简单代码实现
    Python正则表达式的简单应用和示例演示
    Python正则表达式初识(十)附正则表达式总结
    Python正则表达式初识(九)
    Python正则表达式初识(八)
    Python正则表达式初识(七)
    Python正则表达式初识(六)
    Python正则表达式初识(五)
  • 原文地址:https://www.cnblogs.com/catcat811/p/2009189.html
Copyright © 2011-2022 走看看