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