久久精品天堂,又黄又爽又色的视频在线看,欧美日韩在线视频观看

雖然國內上這些社交平臺有一些困難，但作為主要的國外平臺，還是需要了解一下的。一起來看看，web怎么將動態內容分享到Facebook,Twitter等社交平臺吧

雖然國內上這些社交平臺有一些困難，但作為主要的國外平臺，還是需要了解一下的。一起來看看，web怎么將動態內容分享到Facebook,Twitter等社交平臺吧。

對固定內容的分享，我們可以查看文檔（Fb分享文檔,?TW card）后就大概知道怎么去做。但如果我們想對動態內容進行分享，比如我們想把用戶的昵稱加到分享里，應該怎么做呢？
我們可以先了解一下”分享”的大致過程。

原文來源：詳情

社交平臺如何對頁面抓取分享信息

社交平臺是會抓取目標頁面的代碼（注意是服務器返回的html代碼，由js操作后的html它們是抓不到的），
然后對html中的<title/>和<meta/>標簽進行分析。一般來說<title/>會作為要分享的標題,<meta name="description" content="">會作為分享的正文。這是最基本的兩個抓取點。
另外的可選的抓取點則是其他meta標簽，比如插入圖片的meta標簽是：

<meta property="og:image" content="圖片地址" /> <!-- facebook -->
<meta name="twitter:image" content="圖片地址" /> <!-- twitter -->

所有相關的meta寫法請參考平臺開發文檔，或者查看這篇文章來大致了解(英文的，我都能大概看懂，請放心看)：
What You Need to Know About Open Graph Meta …

就是說如果你的html像這樣：

...
<meta property="og:image" content="xxx" /> <!-- facebook -->
<meta name="twitter:image" content="xxx" /><!-- twitter-->
<meta name="description" content="雷好，我系要分享的內容balabala...">
<title>這是標題</title>

最后社交平臺會解析出來你的要分享的信息，并加上平臺自己的樣式(此處以twitter效果為例)：

js分享操作

有了填寫好<title>和<meta>的頁面。接下來是對頁面地址進行分享的操作。

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;
  //下面填入一個你的app id，如果還沒，請在fb開發者平臺注冊一個
  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>

觸發事件進行分享示例：

var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
  FB.ui({
    method: 'share',
    href: "htttp://www.eaxmple.com/share.html" //這里換成你的網址
  }, function(response){
    //分享回調
  })
}

Twitter

簡單的tw分享并不需要調用sdk，只需要跳轉到一個特定頁面：

var shareToTwBtn = document.getElementById('tw-btn');
var twTitle = '輸入標題';
var twUrl = '要分享的頁面地址';
shareToTwBtn.onclick = function(){
     window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(twTitle)).concat(' ').concat(encodeURIComponent(twUrl))
}

服務端生成html

當我們知道如何對頁面進行分享操作以后，就要考慮怎樣對這個頁面進行動態內容的生成將要被抓取的html代碼。這就需要服務端腳本寫一個頁面(一下為php實現),代碼解說加在注釋中方便查看：

<?php
//如果傳入image參數就生成相關的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參數就生成video相關的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>
    <!-- 這段是移動端需要的meta設置，如果是pc請按需要做相關修改 -->
    <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">
        //如果希望用戶點擊了你的分享內容后跳轉到特定頁面
    	window.location.; 
    </script>
</head>
<body></body>
</html>

這樣，我們就可以利用上一節介紹的方法在你進行分享操作的頁面（比如說這個頁面包含了fb分享按鈕）寫好js(假設你把剛才的share.php文件部署在http://www.example.com/share.php)：

var shareTitle = encodeURIComponent('我的昵稱是:'+userName); //假設你要在標題中分享用戶名，需要先定義好userName
var shareContent = encodeURIComponent('這里是要分享的內容balabala....'); //如果內容也不固定請傳入內容
var shareUrl = 'http://www.example.com/share.php?'+'title='+shareTitle+'&description='+shareContent; //如果有其他需要請拼接，比如+"&image="+ encodeURIComponent(shareImageUrl)；
//facebook
var shareToFbBtn = document.getElementById('fb-btn');
shareToFbBtn.onclick = function(){
  FB.ui({
    method: 'share',
    href: shareUrl 
  }, function(response){
    //分享回調，可留空
  })
}
//twitter
var shareToTwBtn = document.getElementById('tw-btn');
shareToTwBtn.onclick = function(){
     window.open('http://twitter.com/home/?status='.concat(shareTitle).concat(' ').concat(encodeURIComponent(shareUrl))
}

到此就ok！

最后幾句

當然你要查看到這些效果（或者引入FB sdk）是需要能訪問facebook和twitter，不過不能就那啥一下…
教程類文章只是更通俗和直接些，如果仍有疑問和需要更深入，還是推薦多翻翻官網文檔，facebook的開發文檔是做了些漢化的, Twitter的文檔就堅持國(wo)際(ca)化(lie)。
貼出兩個東西，分別是fb和tw的抓取調試工具：
https://developers.facebook.com/tools/debug/sharing/
https://about.twitter.com/zh-hans/resources/buttons#tweet

以上內容僅作補充，下面的內容可供各位參考：