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)界面效果:

  • 相关阅读:
    "字符反向拼接"组件:<reverse> —— 快应用组件库H-UI
    "首字母变大写"组件:<capitalize> —— 快应用组件库H-UI
    "字母全变大写"组件:<uppercase> —— 快应用组件库H-UI
    "字母全变小写"组件:<lowercase> —— 快应用组件库H-UI
    "多行文本"组件:<multi> —— 快应用组件库H-UI
    "斜体显示"组件:<i> —— 快应用组件库H-UI
    捕捉AVPlayerViewController 系统原生工具栏的出现、隐藏事件
    (简单实用)Android支付宝商家收款语音播报
    使用wkwebview时,push后,再pop返回,报错
    安卓进度条两边圆角+渐变的拓展
  • 原文地址:https://www.cnblogs.com/catcat811/p/2009189.html
Copyright © 2011-2022 走看看