html、js实现facebook、twitter分享

html、js实现facebook、twitter分享

分享到facebook:

<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?
       u=http%3A%2F%2Fdolphin.com%2Fhappy-new-year%2F &
       t=Enter%20your%20name%20and%20see%20what%20you%20might%20encounter%20in%20the%20new%20year."
       target="_blank" id="J-share-facebook">
</a>


分享到facebook时,需在html头中加入<meta property="og:" content=" " />的标签,发布分享时,需加载这些html头中的meta标签中的property属性。

<meta property="og:url" content="http://dolphin.com/happy-new-year/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="In 2016,you will get a gift - Dolphin Browser" />
<meta property="og:description" content="Enter your name and see what you might encounter in the new year." />
<meta property="og:image" content="images/share-logo.png" />   //facebook分享的图片

og是一种新的HTTP头部标记,即Open Graph Protocol:

The Open Graph Protocol enables any web page to become a rich object in a social graph.

这种协议可以让网页成为一个“富媒体对象”。用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、 renren采用。SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会 议上Facebook公布了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息,并呈现给用户


分享到twitter:

<a class="twitter" href="https://twitter.com/intent/tweet?
        url=http%3A%2F%2Fdolphin.com%2Fhappy-new-year%2F &
        text=" 
   target="_blank" id="J-share-twitter">
</a>

分享twitter不需要访问html头中的meta,直接指定,如果需要动态生成分享的标题头,则需要在js中动态的生成标题头,并在js中拼接给href属性。


通过encodeURIComponent() 函数,将字符串作为URI 组件进行编码。

例如: encodeURIComponent('http://www.google.search.com');

输出:http%3A%2F%2Fwww.google.search.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值