接入Twitter和Facebook分享踩坑記錄
準備工作
1、首先需要在HTML的head添加下述meta標籤內容，在分享時，Twitter和Facebook會爬取該網站頁面的meta內容，然後生成分享卡片。
2、按照下述配置完成後，需要把內容發布上線，否則Twitter和Facebook無法爬取到網頁配置的meta資訊。
3、完成上面的兩個步驟後，使用官方的測試工具測試分享效果，如果配置正確就可以預覽到分享的效果：
- Twitter測試工具：//cards-dev.twitter.com/validator
- facebook測試工具：//developers.facebook.com/tools/debug/
4、Twitter和Facebook爬取內容填寫的url位置有些區別，其中Facebook無法設置自定義內容。
切記： 配置完成後，請務必使用上述的測試工具進行測試，否則可能會出現即使配置正確了，在開發測試分享功能的時候，效果也可能沒生效。
Facebook分享
- meta標籤內容：
<meta property="og:title" content="Remove Image Background for Free">
<meta property="og:description" content="Remove Image Background for Free">
<meta property="og:site_name" content="xxxxxx.com">
<meta property="og:url" content="//xxxxxx.com">
<meta property="og:image" content="//xxxxx.com/image_background.jpg">
- 欄位對應關係預覽：
- 使用標籤即可調用：
<a target="_blank" href="//www.facebook.com/sharer/sharer.php?u='鏈接，分享爬取的內容就是這個從這個鏈接,該鏈接不會顯示在分享卡片上'">Facebook分享</a>
- 為了方便這裡封裝了方法：
/**
* 快速分享到Facebook
*/
export const facebookShare = () => {
const url = encodeURIComponent('鏈接,分享爬取的內容就是這個從這個鏈接，該鏈接不會顯示在分享卡片上');
const facebook = `//www.facebook.com/sharer/sharer.php?u=${url}`;
window.open(facebook, '_blank');
};
Twitter分享
- meta標籤內容：
<!-- 註：下述的twitter:url 鏈接,即為twitter從這個鏈接爬取分享的內容 -->
<meta property="twitter:url" content="//xxxxxx.com">
<meta name="twitter:title" content="Remove Image Background for Free">
<meta name="twitter:description" content="Remove Image Background for Free">
<meta name="twitter:site" content="@PixCut">
<meta property="twitter:image" content="//xxxxxx.com/image_background.jpg">
<meta name="twitter:card" content="summary_large_image">
- 欄位對應關係預覽：
<a target="_blank"href="//twitter.com/intent/tweet?text=自定義內容，可以文字➕鏈接之類的&via=twitter帳號名，會顯示@XXX">Twitter分享</a>
- 為了方便這裡封裝了方法：
/**
* 快速分享到twitter
*/
export const twitterShare = () => {
// 自定義內容
const content = '點擊此處鏈接領取獎品，可選'
const url = encodeURIComponent('鏈接，可選');
const text = `${content} ${url}&via=${via}`;
// 分享後會顯示 「via @張三」
const via = '張三';
// 拼接鏈接
const twitter = `//twitter.com/intent/tweet?text=${text}`;
window.open(twitter, '_blank');
};
