现在的位置:首页>wordpress>正文

百度分享代码优化:自动获取文章内容和图片作为分享摘要和最后加载

2016年09月15日 ⁄ 共 5066字 评论 1 条

百度分享这玩意,部落相信所有的站长,应该都是知道的,而且大多数网站都在使用,可能有的站长朋友,是自己直接使用代码来完成的,但现在由于百度分享已经支持微信二维码内容分享,如果靠代码来完成,明显还不如直接加载百度的代码.这里主要是优化一下分享的内容,在用户进行分享的时候,我们可以自动获取分享摘要和图片,再提取这些内容进行分享,另外还有一个就是js分享的代码在网站的最后加载以提高网站加载速度.

实话说,部落其实之前一直没有怎么去关注过这个问题,之前一直是右侧浮动分享的,而且是老版本,也不支持微信二维码分享.现在的版本已经全面支持,而且好像也不再有分享者的ID了.

百度分享,如果用得好,对网站的权重会产生一定的影响,部落之前介绍过百度分享对关健词排名的影响有多大,大家可以了解一下,当然,我们在样式设置中,可以设置回流量的显示,这个在百度分享的帮助里可以找到相关的参数.部落一般都是直接查看数据.

默认情况下,我们获得的百度分享代码内容如下:

  1. <div class="bdsharebuttonbox">
  2. <a href="#" class="bds_more" data-cmd="more"></a>
  3. <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  4. <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  5. <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
  6. <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
  7. <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
  8. <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

分享的效果如下图:

bdfxyhzytp1

百度分享自动获取文章内容和图片作为分享摘要

这个其实我们在百度分享的后台,是有相关的说明,百度分享的官方地址是:由此直达.我们可以自己在帮助说明的由文档里查看相关的参数设置.

其中bdText就是分享文章页面的标题,默认的是title,把网站的那些SEO信息都获取过来了,不太美观,我们可以修改为只获取文章标题加摘要.

非wordpress类的程序,可以参考下面的方法.

把 'bdText':""

修改为

"bdText":"【{$title}】:{$SEO['description']}"

bdPic是分享文章页面的缩略图,只要将页面中图片的代码写入到这个位置就可以了,把

"bdPic":""

修改为

"bdPic":"{$thumb}",这样就能获取到文章摘要及文章图片了.

wordpress获取文章内容和图片作为分享摘要

这里我们首先需要取得当前文章或者页面的描述,然后将获得的内容输出到百度分享的js代码上,修改过的内容如下:

  1. <?php
  2. if (!function_exists('utf8Substr')) {
  3.    function utf8Substr($str$from$len)
  4.    {
  5.      return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.
  6. '((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s',
  7. '$1',$str);
  8.     }
  9. }
  10. if ( is_single() ){
  11.    if ($post->post_excerpt) {
  12.       $description = $post->post_excerpt;
  13.      } else {
  14.      if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){
  15.       $post_content = $result['1'];
  16.      } else {
  17.       $post_content_r = explode("\n",trim(strip_tags($post->post_content)));
  18.       $post_content = $post_content_r['0'];
  19.        }
  20. $description = utf8Substr($post_content,0,200);
  21.     }
  22. }
  23. ?>

接下来,我们修改百度分享js中的"bdText"段的内容,如下:

  1. <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":'分享自免费部落的文章「<?php the_title(); ?>」:<?php echo trim($description); ?>...',"bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

嫌麻烦的朋友,可以直接套用下面的这一段分享代码:

  1. <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":'分享自免费部落的文章「<?php the_title(); ?>」:<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 50,"……","utf-8"); ?>',"bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

部落使用上面的代码分享后,效果如下图:

bdfxyhzytp2

数数的话,大家可以自己去修改.

还没有完,有的朋友,还想在分享的时候,顺带将图片一起选上的,我们可以直接使用特色图像功能,如果您的主题有缩略图功能,可以直接获取.

没有的朋友,可以在当前主题的function.php中新增如下代码(可能部分主题都自带了这个功能,先查找一下是否有下面的代码,否则会出错.):

  1. /*特色图片 from www.mfbuluo.com */
  2. function get_post_thumbnail_url($post_id){
  3. $post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
  4. $thumbnail_id = get_post_thumbnail_id($post->ID);
  5. if($thumbnail_id ){
  6. $thumb = wp_get_attachment_image_src($thumbnail_id, 'thumbnail');
  7. return $thumb[0];
  8. }else{
  9. return false;
  10. }
  11. }

然后在百度js代码里将

"bdPic":""

修改为

"bdPic":'< ?php echo get_post_thumbnail_url($post->ID); ?>',这样就能获取到文章摘要及文章图片了.

百度分享js提高速度最后加载

在需要显示分享的地方显示div字段内容:

  1. <!-- Baidu Button BEGIN -->   
  2. <div class="bdsharebuttonbox" style="margin:0px 0px 0px 300px;">   
  3. <a href="#" class="bds_more" data-cmd="more"></a>   
  4. <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>   
  5. <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>   
  6. <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>   
  7. <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>   
  8. <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a></div>   
  9. <!-- Baidu Button END -->  

然后在网站的footer.php里加载js段,内容如下:

  1. <!-- Baidu Button BEGIN -->   
  2. <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>  

小结

其实现在百度分享的代码,部落发现好像只有分享到微博上,没有出现摘要,其它很多会自动出现图片和摘要.

评论 1 条 评论内容很精采,有内幕,而且绝对有干货

  1. 我爱动感单车网 2016年09月16日 10:54  @回复  Δ-49楼 回复

    小站还没流量,暂时不整这个,一切保持原样!

给我留言