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