分享是為了更好的傳播，尤其是做業(yè)務(wù)平臺網(wǎng)站的，傳播是自然的事情，而且要和國際化接軌，就要能分享到Facebook、Twitter這樣的網(wǎng)站，在中國這片土地上使用最多的就是微信了，所以微信也是一個(gè)很好的傳播平臺，但是自定義標(biāo)題和縮略圖在現(xiàn)在的微信是沒有辦法做到了。
分享到微信
1、 微信內(nèi)分享
不知有沒有發(fā)現(xiàn)，自己的網(wǎng)站鏈接有時(shí)候分享到微信群中，發(fā)到朋友圈，右下角的縮略圖沒了。之前以為是沒有集成JSSDK，但做了一個(gè)微信公眾號的項(xiàng)目，集成了JSSDK，發(fā)現(xiàn)有的頁面按照之前在body的最上方添加一張隱藏的默認(rèn)圖片形式也不行了，只有使用JSSDK中的分享方法，主動(dòng)設(shè)置分享icon和標(biāo)題才有作用。
網(wǎng)上查找才發(fā)現(xiàn)，微信6.5.5版本調(diào)整了分享規(guī)則，針對公眾號的網(wǎng)頁分享，必須接入微信認(rèn)證公眾號！
https://mp.weixin.qq.com/s/hAdtKl2i4ilyo9HxT1kXyw
所以沒有接入JSSDK的網(wǎng)站想要在微信中分享自定義標(biāo)題和icon是沒有希望了。
想要在微信中傳播自定義標(biāo)題和縮略圖就要乖乖的集成JSSDK，按照規(guī)則分享吧:)
2、從瀏覽器分享到微信
在瀏覽器打開后，點(diǎn)擊瀏覽器自帶的分享圖標(biāo)，選擇微信，這種方式獲取縮略圖的方法：
需要在head頭部添加Open Graph Meta Data
<meta property="og:type" content="website" />
<meta property="og:title" content="頁面標(biāo)題">
<meta property="og:description" content="頁面描述">
<meta property="og:image" content="http://www.example.com/img/thumbnail.png">
<meta property="og:url" content="http://www.example.com/">
其中og:image是完整的URL，最好不要太大，畢竟是縮略圖
親測這種方式可以實(shí)現(xiàn)從手機(jī)瀏覽器分享到微信可定制縮略圖和title。
注意
坑還在后面，如果分享的自定義的title中包含現(xiàn)金、提現(xiàn)、紅包等這類關(guān)鍵字是分享不出去的，坑啊……所以我們改為繁體字之后就可以了，如果一定要用這類字就先用繁體字代替吧，要不然就換成別的吧。
分享到 Facebook & Twitter & 微博
web頁面想要分享到Facebook、Twitter和微博，簡單的是需要在按鈕寫個(gè)a標(biāo)簽，將分享鏈接自定義，點(diǎn)擊之后就可以跳到一個(gè)它們提供的外部分享頁面，分享了。
web微博分享直接在按鈕上添加個(gè)a標(biāo)簽，直接調(diào)用微博開放出來的分享鏈接就可以了。標(biāo)題和url都可以根據(jù)自己的需求填寫。
<a target="_blank">Weibo</a>
web頁面分享到Facebook也可以直接使用鏈接跳轉(zhuǎn)。
<a target="_blank">Facebook</a>
但是Facebook自定義title不管用，它自己有抓取目標(biāo)頁面代碼的一套規(guī)則，對html中的<title/>和<meta/>標(biāo)簽進(jìn)行分析。一般來說<title/>會作為要分享的標(biāo)題，<meta name="description" content="">會作為分享的正文。這是最基本的兩個(gè)抓取點(diǎn)。
注意：抓取的內(nèi)容是從服務(wù)端返回的html代碼，由js操作后的html抓取不到。
所以想要Facebook分享能有圖片和頁面的標(biāo)題，需要提前將meta中的og定義好，注意og:image中圖片（完整url）的尺寸大小，最小不要小于200 x 200px，太小了也抓取不到。還有兩種尺寸的圖片大小，1200 x 630px 或者 600 x 315 根據(jù)自己的需要生成吧，而且圖片需要在國外能很好的加載出來，我們使用的是七牛的鏈接，發(fā)現(xiàn)七牛的圖片鏈接在國外支持的不太好，有時(shí)候會訪問失敗。
Facebook share best practices
如果是簡單的web分享，使用上面的分享鏈接就可以了，F(xiàn)acebook ID也沒有必要去申請，如果想要在本頁面中彈出彈窗分享鏈接，可以申請個(gè)Facebook app創(chuàng)建一個(gè)APP ID，要求不高一個(gè)鏈接完全就可以了。
沒有抓取到設(shè)計(jì)的圖片和標(biāo)題，檢測一下圖片的鏈接和og中設(shè)置title和image對不對，記住js修改的抓取不到哦，其他的應(yīng)該就沒什么問題了
web分享到Twitter，也可以直接使用分享鏈接，直接放到代碼中就可以了。
<a target="_blank">Twitter</a>
如果想要使用Twitter分享帶圖片的鏈接，生成Twitter Cards的形式，需要在meta中添加圖片的大小，官方文檔Twitter cards
<meta name="twitter:card" content="summary"></meta>
同樣cards上的title、描述和圖片也是抓取og中定義的title、description和image，提前在meta中定義好。
注意
Twitter也是只能抓取服務(wù)端返回的html，后來用js修改的meta抓取不到。
Facebook分享調(diào)試工具
https://developers.facebook.com/tools/debug/sharing/
微信分享沒縮略圖
注意：在body上添加圖片已經(jīng)失效。
Facebook & Twitter分享meta tag規(guī)則定義
What You Need to Know About Open Graph Meta Tag……
