web 分享到facebook

时间：2022-02-20 08:36:13

利用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

配置应用

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

web 分享到facebook

 

开放图谱标记

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

 

分享对话框代码

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

web 分享到facebook

将脚本加入在上面配置的应用。在脚本中，使用应用编号替换 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

相关文章