web 分享到facebook

公告

View Post

利用meta 使自己的页面变为一种富媒体文件，利用facebook的 open Graph

比如你的html页面想要以图片的形式被分享

<meta property="og:image"            content="http://food.png">
<meta property="og:image:secure_url" content="https://food.png">
<meta property="og:image:type"       content="image/png">
<meta property="og:image:width"      content="200">
<meta property="og:image:height"     content="500">

元标签	说明
`og:image`	图片的网址。要在发布图片后更新图片，请为新图片使用新网址。系统会根据之前的网址缓存图片，除非网址更改，否则不会更新图片。
`og:image:url`	与 `og:image` 作用相同
`og:image:secure_url`	图片的 https:// 网址（非本地）
`og:image:type`	图片的 MIME 类型。`image/jpeg`、`image/gif` 或 `image/png` 中的一个
`og:image:width`	以像素为单位的图片宽度。指定图片的高度和宽度，确保图片在第一次分享时正确加载。
`og:image:height`	以像素为单位的图片高度。指定图片的高度和宽度，确保图片在第一次分享时正确加载。

当然还可以分享视频音频文本等；详见https://developers.facebook.com/docs/sharing/opengraph/object-properties

完整代码示例

将代码示例复制粘贴到您的网站。将 data-href 值调整为您网站的网址。然后使用 og:*** 元标记调整链接预览。og:url 和 data-href 应使用相同的网址。

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

类似的还有收藏此处不做详细接收详见：https://developers.facebook.com/docs/plugins/share-button/#example

可以使用分享对话框来让用户从您的应用分享开放图谱动态。

若要集成开放图谱动态的分享对话框：

在应用面板中配置应用。
将开放图谱标记添加至您希望用户分享的页面。
在应用的代码中添加分享对话框代码。

详见： https://developers.facebook.com/docs/opengraph/getting-started

配置应用

使用应用面板访问应用的基本设置，然后找到应用域名字段。在要集成共享对话框的位置添加应用的域名。

开放图谱标记

使用开放图谱标记来标记您希望用户分享的页面。请记录此页面的网址，因为您需要将其添加到分享对话框的代码中。

分享对话框代码

以下对话框代码示例可以通过帖子中的“赞”操作将开放图谱动态分享至用户的时间线。

将脚本加入在上面配置的应用。在脚本中，使用应用编号替换 your-app-id。

<script type="text/javascript">

// Initialize the Facebook JS SDK.
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });

    // Put additional init code here
  };

  // Load the Facebook JS SDK Asynchronously
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

    // Custom function to call when user initiates a share
    function ogShare() {
       FB.ui({
         method: 'share_open_graph',
         action_type: 'og.likes',
         action_properties: JSON.stringify({
             object:'https://developers.facebook.com/docs/opengraph/getting-started',
         })
    }, function(response){
         // Debug response (optional)
         console.log(response);
    });
  }

</script>

现在，您可以将 ogShare() 功能与网页应用中的按钮相关联。当用户点击该按钮时，将触发分享对话框，并在其标题中显示“赞”动作。

类似的分享到其他网站可以参考：

https://blog.csdn.net/yq_dxp1218/article/details/79417040

https://www.zcfy.cc/article/the-essential-meta-tags-for-social-media-css-tricks-658.html

分享到whatApp

http://www.conversabit.com/wasap.js/demos/number.html

posted on 2018-11-19 15:29 凉梁凉糕阅读(3145) 评论(0) 收藏举报

刷新页面返回顶部