利用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
分享对话框代码
以下对话框代码示例可以通过帖子中的“赞”操作将开放图谱动态分享至用户的时间线。
将脚本加入在上面配置的应用。在脚本中，使用应用编号替换 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