web 分享到facebook
利用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">
元标签 |
说明 |
---|---|
|
图片的网址。要在发布图片后更新图片,请为新图片使用新网址。系统会根据之前的网址缓存图片,除非网址更改,否则不会更新图片。 |
|
与 |
|
图片的 https:// 网址 (非本地) |
|
图片的 MIME 类型。 |
|
以像素为单位的图片宽度。指定图片的高度和宽度,确保图片在第一次分享时正确加载。 |
|
以像素为单位的图片高度。指定图片的高度和宽度,确保图片在第一次分享时正确加载。 |
当然 还可以分享视频音频文本等;详见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
分享对话框代码
以下对话框代码示例可以通过帖子中的“赞”操作将开放图谱动态分享至用户的时间线。
![](https://scontent-sjc3-1.xx.fbcdn.net/v/t39.2365-6/38032186_2026514001011825_3472528093002858496_n.png?_nc_cat=110&_nc_ht=scontent-sjc3-1.xx&oh=dbca193f41f43e8a418c65189049d138&oe=5C762755)
将脚本加入在上面配置的应用。在脚本中,使用应用编号替换 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