怎么添加QQ、微博、Twitter、Facebook的社交分享鏈接？ – wordpress開發(fā)

當(dāng)訪客看到一篇不錯的文章，自然而然的就想收藏或是轉(zhuǎn)發(fā)出去，這樣一來，就有一點裂變的味道，可以極大的提升你的網(wǎng)站曝光率，如你所見，在一些主流的網(wǎng)站都會在頁面中的適當(dāng)位置添加分享鏈接。這一節(jié)的wordpress開發(fā)教程就和大家分享下，怎么添加QQ、微博、Twitter、Facebook的社交分享鏈接。

• 參考壹：詳情
• 參考貳：詳情
• 參考叁：詳情

• 分發(fā)：知乎

原理分析：

各大平臺都有提供指定格式，根據(jù)格式傳遞參數(shù)即可

有哪些格式？

常用：

1.分享到QQ空間接口：

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的網(wǎng)址&sharesource=qzone&title=你的分享標(biāo)題&pics=你的分享圖片&summary=你的分享描述信息

2.分享給QQ好友接口：

http://connect.qq.com/widget/shareqq/index.html?url=你的分享網(wǎng)址&sharesource=qzone&title=你的分享標(biāo)題&pics=你的分享圖片地址&summary=你的分享描述&desc=你的分享簡述

3.分享到新浪微博接口：

http://service.weibo.com/share/share.php?url=你的分享網(wǎng)址&sharesource=weibo&title=你的分享標(biāo)題&pic=你的分享圖片&appkey=你的key，需要在新浪微博開放平臺中申請

其他：

<ul>
    <li><a title="新浪微博" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?url=<?php echo $permalink; ?>&title=<?php echo $title; ?>&content=utf-8" target="_blank"><img title="新浪微博" src="http://www.cngump.com/images/bookmark/sina.png" alt="新浪微博" /></a></li>
    <li><a title="騰訊微博" rel="nofollow" target="_blank" href="javascript:window.open('http://v.t.qq.com/share/share.php?title='+'<?php echo $title; ?>'+encodeURIComponent(document.title)+'&url='+encodeURIComponent('<?php echo $permalink; ?>')+'&jumpback=2&noui=1','favit','width=700,height=546,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)" >
        <img title="騰訊微博" src="http://www.cngump.com/images/bookmark/tqq.png" alt="騰訊微博" />
    </a></li>
    <li><a title="網(wǎng)易微博" rel="nofollow" href="http://t.163.com/share/popup?sourceUrl=<?php echo $domainurl; ?>&source=<?php echo $sitename; ?>&title=<?php echo $title; ?>&link=%20<?php echo $permalink; ?>&content=utf-8" target="_blank"><img title="網(wǎng)易微博" src="http://www.cngump.com/images/bookmark/t163.png" alt="網(wǎng)易微博" /></a></li>
    <li><a title="鮮果" rel="nofollow" href="http://www.xianguo.com/service/submitdigg/?link=<?php echo $permalink; ?>&title=<?php echo $title; ?>&content=utf-8" target="_blank"><img title="鮮果" src="http://www.cngump.com/images/bookmark/xianguo.png" alt="鮮果" /></a></li>
    <li><a title="九點" rel="nofollow" href="http://www.douban.com/recommend/?url=<?php echo $permalink; ?>&title=<?php echo $title; ?>&n=1" target="_blank"><img title="九點" src="http://www.cngump.com/images/bookmark/douban9.png" alt="九點" /></a></li>
    <li><a title="人人" rel="nofollow" href="http://share.renren.com/share/buttonshare.do?link=<?php echo $permalink; ?>&title=<?php echo $title; ?>" target="_blank"><img title="人人" src="http://www.cngump.com/images/bookmark/renren.png" alt="人人" /></a></li>
    <li><a title="抽屜" rel="nofollow" href="http://dig.chouti.com/digg.action?newsURL=<?php echo $permalink; ?>&title=<?php echo $title; ?>&content=utf-8" target="_blank"><img title="抽屜" src="http://www.cngump.com/images/bookmark/chouti.png" alt="抽屜" /></a></li>
    <li><a title="百度搜藏" rel="nofollow" href="http://cang.baidu.com/do/add?it=<?php echo $title; ?>&iu=<?php echo $permalink; ?>" target="_blank"><img title="百度搜藏" src="http://www.cngump.com/images/bookmark/baidu.png" alt="百度搜藏" /></a></li>
    <li><a title="Follow5" rel="nofollow" href="http://www.follow5.com/f5/discuz/sharelogin.jsp?url=<?php echo $permalink; ?>&title=<?php echo $title; ?>&content=utf-8" target="_blank"><img title="Follow5" src="http://www.cngump.com/images/bookmark/f5.png" alt="Follow5" /></a></li>
    <li><a title="Twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo $title; ?>%20-%20<?php echo $permalink; ?>" target="_blank"><img title="Twitter" src="http://www.cngump.com/images/bookmark/twitter.png" alt="Twitter" /></a></li>
    <li><a title="Facebook" rel="nofollow" href="http://www.facebook.com/share.php?u=<?php echo $permalink; ?>&t=<?php echo $title; ?>" target="_blank"><img title="Facebook" src="http://www.cngump.com/images/bookmark/facebook.png" alt="Facebook" /></a></li>
</ul>

以上內(nèi)容僅供參考。

實際結(jié)合：

結(jié)合實際分析，我選取了以下幾個主流平臺來進行選取：QQ空間、QQ好友、新浪微博、Twitter、Facebook。

需要注意的是，下面提供的方法僅供參考演示，不能直接使用。注意圖片防盜鏈。

方法：

<?php
//社交分享
if ( ! function_exists( 'npcink_post_share' ) ) :
	function npcink_post_share() {
		//獲取當(dāng)前頁面鏈接
		$share_permalink = "http://m.kartiktrivedi.com/15839.html";
		//當(dāng)前頁面標(biāo)題
		$share_title = "我是Npcink的頁面標(biāo)題";
		//當(dāng)前頁面分享圖片
		$share_img = "互聯(lián)網(wǎng)圖片URL";
		//當(dāng)前頁面的描述信息
		$share_describe = "我是一段Npcink的簡單描述";
		//當(dāng)前頁面的分享簡述（QQ好友）
		$share_briefly_describe = "我是一段分享Npcink優(yōu)質(zhì)內(nèi)容的簡述，僅用在QQ好友中";
?>

<a title="QQ空間" rel="nofollow" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php echo $share_permalink; ?>&sharesource=qzone&title=<?php echo $share_title; ?>&pics=<?php echo $share_img; ?>&summary=<?php echo $share_describe; ?>" >QQ空間</a>
<a title="QQ好友" rel="nofollow" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=<?php echo $share_permalink; ?>&sharesource=qzone&title=<?php echo $share_title; ?>&pics=<?php echo $share_img;?>&summary=<?php echo $share_describe;?>&desc=<?php echo $share_briefly_describe;?>">QQ好友</a>
<a title="新浪微博" rel="nofollow" target="_blank" href="http://v.t.sina.com.cn/share/share.php?url=<?php echo $share_permalink; ?>&title=給你推薦一個很棒的網(wǎng)站:<?php echo $share_title; ?>?-&content=utf-8">微博</i></a>

<a title="Twitter" rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?text=給你推薦一個很棒的網(wǎng)站:<?php echo $share_title; ?>?-&url=<?php echo $share_permalink; ?>">Twitter</a>
<a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<?php echo $share_permalink; ?>&t=<?php echo $share_title; ?>">Facebook</i></a>

<?php
	}
endif;

調(diào)用：

<?php npcink_post_share(); //社交分享?>

實際效果：

• 

• 

• 

• 

補充：

微博還有一個：

<a title="新浪微博" rel="nofollow" target="_blank" href="http://service.weibo.com/share/share.php?url=<?php echo $share_permalink; ?>&sharesource=weibo&title=給你推薦一個很棒的網(wǎng)站:<?php echo $share_title; ?>?-&pic=<?php echo $share_img; ?>">微博（來自互聯(lián)網(wǎng)）</i></a>

關(guān)于Facebook的分享中，請查閱：

社交平臺是會抓取目標(biāo)頁面的代碼（注意是服務(wù)器返回的html代碼，由js操作后的html它們是抓不到的），
然后對html中的<title/>和<meta/>標(biāo)簽進行分析。一般來說<title/>會作為要分享的標(biāo)題,<meta name="description" content="">會作為分享的正文。這是最基本的兩個抓取點。

實戰(zhàn)

以上內(nèi)容為原理分析，在實際運用中可參考下列代碼：

• 代碼來源：詳情

請將下面的代碼放在您主題的function.php里面即可，無需任何其它設(shè)置。

<?php
/* QQ H5 Card posts
/*-----------------------------------------------------------------------------------*/
add_action('wp_enqueue_scripts', 'ieoptimize_qq_register', 10, 5);
function ieoptimize_qq_register() {
          if( is_singular()) ieoptimize_qq_data();
}
function ieoptimize_qq_data() {
	global $post ;
    $qqh5_title 		= strip_shortcodes(strip_tags(( get_the_title() ))) .' - '. get_bloginfo('name') ;
	$qqh5_description = strip_tags(strip_shortcodes( apply_filters('ie_exclude_content', $post->post_content) ) );
	$qqh5_image_data = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
    if( is_home() || is_front_page() ){
	   $qqh5_title 		= get_bloginfo('name');
	   $qqh5_description = get_bloginfo( 'description' );
    }
?>
<meta itemprop="name" content="<?php echo $qqh5_title ?>">
<meta itemprop="description" content="<?php echo wp_html_excerpt( $qqh5_description , 100 ) ?>">
<meta itemprop="image" content="<?php echo $qqh5_image_data ?>">
<?php
}

搞這么些花里胡哨的，弄個二維碼，讓訪客在自己的手機上訪問然后分享就好啦。

代碼太麻煩了，還是用wordpress插件比較爽。