网页一键分享到新浪,facebook,twitter,linki

最新由于项目需要, 要做一键分享的交互.

---

分享的本质是请求其一个公开的页面. 通过参数告诉社交网站你需要分享的网页的网址,然后社交网站的爬虫会去爬取这个网址. (查了资料, 说fb,twitter都有自己的sdk,但我们只需要做比较简单的带内容的分享. 直接用html+a标签来完成. )

html body部分:

 <div class="share-weibo" data-pic="shareLogo" data-title="shareTitle">
    <p>Sina</p>
 </div>
 <div class="share-ld">
    <a href="javascript:window.open('http://www.linkedin.com/shareArticle?mini=true&url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent('shareTitle')+'&source='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
      <p>Linkedin</p>
    </a>
 </div>
 <div class="share-fb">
    <a id="fbShare" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&amp;t='+encodeURIComponent('shareIntroEn'),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
       <p>Facebook</p>
    </a>
 </div>
 <div class="share-t">
    <a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(window.location.href)+' '+encodeURIComponent('{{pageDetail.nameEn }}'),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
       <p>Twitter</p>
    </a>
 </div >

社交平台根据html中的title和meta标签进行分析。 title是分享的标题, description是分享的正文....
除此之外, 还可以插入利用meta标签插入其他图片.
html meta 部分:

<!-- facebook -->
<meta property="og:title" content="shareTitle" />
<meta property="og:image" content="shareLogo" />
<meta property="og:type"   content="website" />
<!-- twitter-->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" class="share_title" content="shareTitle"/>
<meta name="twitter:description"  content="shareIntro" />
<meta name="twitter:site" content="@chenpeishi">
<meta name="twitter:image" content="{{pageDetail.shareLogo}}" />

og是一种新的HTTP头部标记.
用了Meta Property=og标签，意味着同意了其他网站可以引用本网页内容，目前这种协议被很多SNS网站采用。也就是所谓的富媒体对象.
og:title 标题
og:image 图片
og:type 类型,一般选择website即可
twitter:title ,des,image也是同理. 如果twitter没有,也是会获取og的数据, 只不过以防万一所以我加上一个.

----- 我是小仙女的分割版 -----

1. 前端本地开发,如果我们直接用localhost:xxx + fan墙来进行分享, 能分享成功, 可社交平台会抓不到数据. 分享上去的也只能是占据地方可看不到真实内容的东西.

image.png

推文的第一部分是进行分享的url, twitter就是根据这个地址来获取数据的.
红色部分是图片, 抓不到.
图片的右侧是分享的摘要.和网址.

解决办法: 如果希望在开发环境也能查看真实效果, 可以找运维同事配置一个公网映射.

2. 上线后....facebook. linkin 都能成功分享,并且能获取图片. 可twitter不行...twitter不行...不行...
   明明开发环境公网映射的都能拿到图, 怎么上线了就不行了呢...
   排查过程中发现: 线上环境分享的时候, 如果前部分的url替换成公网映射的地址, 图片就能分享成功.
   问题来了: 公司项目的线上地址类似于: www.nancy.com/sharepro/home/detail?id=23fndak
   而公网映射的地址类似于: wx.nancy.com/home/detail?id=23fndak
   差别就在于: 线上www.nancy.com是我们公司的官网, sharepro一个项目挂在官网下. 属于二级目录.
   而twitter拿不到二级目录里的图片....
   而映射的地址wx.nancy.com下直接就是这个项目的页面, twitter才能爬到数据...
   (真是醉了...)
   因为要紧急修复上线, 所以找运维配置了一个线上的二级域名. 在twitter分享的时候, 替换成这个二级域名. 让twitter去爬图片.

 <div class="share-t">
    <a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent('这是新配置的二级域名' + document.location.pathname + window.location.search)+' '+encodeURIComponent('{{pageDetail.nameEn }}'),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)">
       <p>Twitter</p>
    </a>
 </div >

参考文章:
https://developers.facebook.com/docs/sharing/best-practices
https://neilpatel.com/blog/open-graph-meta-tags/
https://blog.csdn.net/ligang2585116/article/details/44960767