Facebook、Twitter网页分享

Facebook分享

Facebook分享是爬虫页面HTML文件配置的分享内容

Twitter分享

基本同Facebook分享。分享图不可动态修改。

差别：js触发的分享，Twitter可以修改分享文案，Facebook不可以。

HTML head 内配置

<!--twitter分享资料获 start-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="分享标题">
<meta name="twitter:description" content="分享文案">
<meta name="twitter:image" content="分享图片绝对链接">
<!--twitter分享资料获 end-->

<!--facebook分享资料获 start-->
<meta property="og:url" content="页面正式上线地址">
<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享文案">
<meta property="og:image" content="分享图片绝对链接">
<!--facebook分享资料获 end-->

如果需要点击按钮触发的情况，可以在对应按钮的点击事件中加入以下代码，触发分享页：

// 获取分享配置里面的分享信息
var sharePic = '图片地址';    //  分享图片地址
var shareTxt = '分享内容';       // 分享内容
var shareTitle = '分享标题';      // 分享标题

// 分享路径，如果测试环境要测试的话，建议把地址换成测试地址，同样一定要加https和index.html
var url = '分享地址';
// 推特按钮  推特可动态修改分享文案
$(".Jtwitter").on("click", function () {
    window.open("http://twitter.com/share?url=" + encodeURIComponent(url) + "&text=" + encodeURIComponent(shareTitle +'\n'+ shareTxt) + "&display=popup&ref=plugin&src=share_button", "twitter", "height=500, width=750, top=" + ($(window).height() / 2 - 250) + ", left=" + (document.body.offsetWidth / 2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
});
// Facebook按钮  Facebook不可动态修改文案
$(".Jfacebook").on("click", function () {
    window.open("https://m.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url) +
        "&description=" + encodeURIComponent(shareTxt) + "&title=" + encodeURIComponent(shareTitle) + "&display=popup&ref=plugin&src=share_button", "facebook",
        "height=500, width=750, top=" + ($(window).height() / 2 - 250) + ", left=" + (document.body.offsetWidth /
            2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
});

PS：

1、页面的正式上线地址协议一定要用https和加上index.html。

2、image 分享图片的绝对路径。

3、如果项目是有区分测试环境和正式环境的，在测试环境测试分享的时候，可以先将页面地址跟分享图片地址填成测试环境的地址。

纠错工具：

可用以下工具来测试查看分享或者刷分享缓存。

Facebook：https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Ftest.nie.163.com%2Ftest_html%2Fonmyoji%2Fclient%2Fe5278f48bf3c8c15%2F%23role_id%3D5a84693823e94a4954069d20%26server%3D21001Twitter：https://cards-dev.twitter.com/validator

Facebook、Twitter网页分享

Facebook分享

Twitter分享

纠错工具：

悦读