原文地址:https://doterlin.github.io/blog/2017/01/07/fb-share/
前言
對(duì)固定內(nèi)容的分享，我們可以查看文檔（Fb分享文檔, TW card）后就大概知道怎么去做。但如果我們想對(duì)動(dòng)態(tài)內(nèi)容進(jìn)行分享收厨，比如我們想把用戶的昵稱加到分享里，應(yīng)該怎么做呢诵叁？
我們可以先了解一下"分享"的大致過(guò)程。
社交平臺(tái)如何對(duì)頁(yè)面抓取分享信息
社交平臺(tái)是會(huì)抓取目標(biāo)頁(yè)面的代碼（注意是服務(wù)器返回的html代碼拧额，由js操作后的html它們是抓不到的）彪腔，
然后對(duì)html中的<title/>和<meta/>標(biāo)簽進(jìn)行分析。一般來(lái)說(shuō)<title/>會(huì)作為要分享的標(biāo)題,<meta name="description" content="">會(huì)作為分享的正文德挣。這是最基本的兩個(gè)抓取點(diǎn)。
另外的可選的抓取點(diǎn)則是其他meta標(biāo)簽番挺，比如插入圖片的meta標(biāo)簽是：
<meta property="og:image" content="圖片地址" /> <!-- facebook -->
<meta name="twitter:image" content="圖片地址" /> <!-- twitter -->
所有相關(guān)的meta寫(xiě)法請(qǐng)參考平臺(tái)開(kāi)發(fā)文檔屯掖，或者查看這篇文章來(lái)大致了解(英文的，我都能大概看懂贴铜，請(qǐng)放心看)：
What You Need to Know About Open Graph Meta ...
就是說(shuō)如果你的html像這樣：
...
<meta property="og:image" content="xxx" /> <!-- facebook -->
<meta name="twitter:image" content="xxx" /><!-- twitter-->
<meta name="description" content="雷好右蒲，我系要分享的內(nèi)容balabala...">
<title>這是標(biāo)題</title>
最后社交平臺(tái)會(huì)解析出來(lái)你的要分享的信息，并加上平臺(tái)自己的樣式(此處以twitter效果為例)：
twitter效果
js分享操作
有了填寫(xiě)好<title>和<meta>的頁(yè)面陷嘴。接下來(lái)是對(duì)頁(yè)面地址進(jìn)行分享的操作。
- Facebook
首先先引入fb的sdk：
<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;
//下面填入一個(gè)你的app id邑退，如果還沒(méi)劳澄，請(qǐng)?jiān)趂b開(kāi)發(fā)者平臺(tái)注冊(cè)一個(gè)
js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId={your app id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
觸發(fā)事件進(jìn)行分享示例：
var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
FB.ui({
method: 'share',
href: "htttp://www.eaxmple.com/share.html" //這里換成你的網(wǎng)址
}, function(response){
//分享回調(diào)
})
}
- Twitter
簡(jiǎn)單的tw分享并不需要調(diào)用sdk，只需要跳轉(zhuǎn)到一個(gè)特定頁(yè)面：
var shareToTwBtn = document.getElementById('tw-btn');
var twTitle = '輸入標(biāo)題';
var twUrl = '要分享的頁(yè)面地址';
shareToTwBtn.onclick = function(){
window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(twTitle)).concat(' ').concat(encodeURIComponent(twUrl))
}
服務(wù)端生成html
當(dāng)我們知道如何對(duì)頁(yè)面進(jìn)行分享操作以后莫矗，就要考慮怎樣對(duì)這個(gè)頁(yè)面進(jìn)行動(dòng)態(tài)內(nèi)容的生成將要被抓取的html代碼。這就需要服務(wù)端腳本寫(xiě)一個(gè)頁(yè)面(一下為php實(shí)現(xiàn)),代碼解說(shuō)加在注釋中方便查看：
<?php
//如果傳入image參數(shù)就生成相關(guān)的meta作谚，以下幾條類似
if(isset($_GET["image"])){
$image=$_GET["image"];
$meta_image_fb = '<meta property="og:image" content="'.$image.'" />';
$meta_image_tw = '<meta name="twitter:image" content="'.$image.'" />';
}
if(isset($_GET["description"])){
$description=$_GET["description"];
}
if(isset($_GET["title"])){
$title=$_GET["title"];
$meta_title = '<meta property="og:title" content="'.$title.'" />';
$meta_title = '<meta name="twitter:title" content="'.$title.'" />';
}
if(isset($_GET["type"])){
$type=$_GET["type"];
$meta_type_fb = '<meta property="og:type" content="'.$type.'" />';
}
if(isset($_GET["url"])){
$url=$_GET["url"];
$meta_url_fb = '<meta property="og:url" content="'.$url.'" />';
$meta_url_tw = '<meta name="twitter:url" content="'.$url.'" />';
}
//如果傳入video參數(shù)就生成video相關(guān)的meta
if(isset($_GET["video"])){
$video=$_GET["video"];
$meta_video_fb = '<meta property="og:video" content="'.$video.'" /><meta property="og:video:type" content="video/mp4" /><meta property="og:video:width" content="487" />';
$meta_video_tw = '<meta name="twitter:player" content="'.$video.'" />';
}
if(isset($_GET["card"])){
$card=$_GET["card"];
$meta_card_tw = '<meta name="twitter:card" content="'.$card.'" />';
}
?>
<!DOCTYPE html>
<html>
<head>
<!-- 這段是移動(dòng)端需要的meta設(shè)置妹懒，如果是pc請(qǐng)按需要做相關(guān)修改 -->
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=yes" name="">
<?php echo isset($image)?$meta_image_fb:'' ?>
<?php echo isset($url)?$meta_url_fb:'' ?>
<?php echo isset($video)?$meta_video_fb:'' ?>
<?php echo isset($title)?$meta_title_fb:'' ?>
<?php echo isset($type)?$meta_type_fb:'' ?>
<meta property="og:description" content="<?php echo isset($description)?$description:'' ?>" />
<?php echo isset($image)?$meta_image_tw:'' ?>
<?php echo isset($url)?$meta_url_tw:'' ?>
<?php echo isset($video)?$meta_video_tw:'' ?>
<?php echo isset($title)?$meta_title_tw:'' ?>
<?php echo isset($card)?$meta_card_tw:'<meta name="twitter:card" content="summary" />' ?>
<meta name="twitter:site:id" content="">
<meta name="twitter:title" content="<?php echo isset($title)?$title:'' ?>">
<meta name="twitter:site" content="">
<meta name="twitter:description" content="<?php echo isset($description)?$description:'' ?>" />
<meta name="description" content="<?php echo isset($description)?$description:'' ?>">
<title><?php echo isset($title)?$title:'' ?></title>
<script type="text/javascript">
//如果希望用戶點(diǎn)擊了你的分享內(nèi)容后跳轉(zhuǎn)到特定頁(yè)面
window.location.;
</script>
</head>
<body></body>
</html>
這樣眨唬，我們就可以利用上一節(jié)介紹的方法在你進(jìn)行分享操作的頁(yè)面（比如說(shuō)這個(gè)頁(yè)面包含了fb分享按鈕）寫(xiě)好js(假設(shè)你把剛才的share.php文件部署在http://www.example.com/share.php)：
var shareTitle = encodeURIComponent('我的昵稱是:'+userName); //假設(shè)你要在標(biāo)題中分享用戶名，需要先定義好userName
var shareContent = encodeURIComponent('這里是要分享的內(nèi)容balabala....'); //如果內(nèi)容也不固定請(qǐng)傳入內(nèi)容
var shareUrl = 'http://www.example.com/share.php?'+'title='+shareTitle+'&description='+shareContent; //如果有其他需要請(qǐng)拼接匾竿，比如+"&image="+ encodeURIComponent(shareImageUrl)曹宴；
//facebook
var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
FB.ui({
method: 'share',
href: shareUrl
}, function(response){
//分享回調(diào)，可留空
})
}
//twitter
var shareToTwBtn = document.getElementById('tw-btn');
shareToTwBtn.onclick = function(){
window.open('http://twitter.com/home/?status='.concat(shareTitle).concat(' ').concat(encodeURIComponent(shareUrl))
}
到此就ok区转！
最后幾句
- 當(dāng)然你要查看到這些效果（或者引入FB sdk）是需要能訪問(wèn)
facebook和twitter，不過(guò)不能就那啥一下... - 教程類文章只是更通俗和直接些废离，如果仍有疑問(wèn)和需要更深入礁芦，還是推薦多翻翻官網(wǎng)文檔悼尾，
facebook的開(kāi)發(fā)文檔是做了些漢化的, Twitter的文檔就堅(jiān)持國(guó)(wo)際(ca)化(lie)肖方。 - 貼出兩個(gè)東西，分別是fb和tw的抓取調(diào)試工具：
https://developers.facebook.com/tools/debug/sharing/
https://about.twitter.com/zh-hans/resources/buttons#tweet
