给WordPress的文章添加新浪微博的“赞“和百度分享

add-like-and-share-on-wordpress-article

开始的时候,我想在博客里引入一些社交化的元素——比如 赞和分享 ,很明显新浪微博的赞和百度分享很适合。此前,我在站点里添加新浪微博的“赞”和百度“分享”组件用的都是官方或者非官方的插件,直接在站点的后台插件里搜索安装,启用/设置,一气呵成。但是,这些插件其实或多或少都会影响网站的加载速度,还是江湖上流传的那句话:“能用代码解决的,坚决不用插件!”皮特说:“不要插件的!”于是,便有了这篇文章。还是老样子:技术来源各位网友,皮特只是拿来主义,在此整理以备后用。(内容啰嗦,只看加粗的就差不多了。)

赞和分享 按钮的获取

1.先 “赞”为敬

  1. 获取新浪微博的“赞”组件,请猛戳:这里到赞按钮设置页
  2. 按照步骤一路下来得到按钮的代码;
     赞和分享
    第一句 HTML 标签要不要无所谓,因为我都没用过;就按照理解知道把第 3 条放到要显示“赞”按钮的位置,第2行放到页尾,在 wordpress 里可以放到页脚 footer.php (其实放一起也行,但据说是 script 放到页尾可以提升页面的加载速度,反正我也不懂。),操作流程简单如下: WordPress 控制台 – 外观 – 编辑 – footer.php ,然后把 JS 代码粘贴在 </body> 前;
  3. 因为这些按钮都是要放到文章内文相关位置的,所以直接在站点的后台管理里面找到“外观-编辑”就到了主题编辑界面,文章页面一般是 single.php (皮皮这个站点的主题在 single.php 下还有 content-single.php 这么个页面,皮皮就在这个页面动的刀子),所以只要在右边栏找到这个页面点一下就可以编辑了。
    like button
    首先,你要知道自己想把按钮插在哪个位置,比如本站就是文章最后,在文章分类、标签这些小“尾巴”后面,这时候你要知道这些对应的代码/单词是什么,比如标题 Title 、标签 Tags 等等,找到相关位置。比如皮特以聪明才智找到了 span class=”tags-links” 标签的位置(如下图黄框),因为“编辑”这一项是登录用户才能看到的,所以 span class=”tags-links” 下面 4 行就是“标签”,在下面的就是评论和编辑“ edit ”,我们要插入的位置就是 edit 后面,所以在 edit 这行代码结束的下一行就是我们要插的位置,忽然觉得好邪恶,把第3行“赞”按钮的代码粘贴就行了。
    like button
  4. 至此,“赞”组件就安放好了,遗世而独立的站在文章的最后,所以我选择了把百度分享的按钮放在了它的后面,让他们一起在这里发骚。

2. “分享”一下又不会怀孕

  1. 获取百度分享的代码,猛戳这里: 百度分享
  2. 按照步骤一路下来得到按钮的代码;猛戳度娘给的蓝色的“直接复制代码”就行了;
     赞和分享
    这个就不要点了,点了也没用,这就是张图片~~~
  3. 像刚才添加“赞”组件一样,因为我是同一个位置添加的,所以不用费劲再找了,直接粘贴(因为刚才在度娘那复制过了),然后你会发现出来一堆这么个玩意:

    <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_duitang" data-cmd="duitang" title="分享到堆糖"></a><a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a></div><script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","duitang","huaban"]}};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>

  4. 上面这坨东西就是你配置好的代码,以 script 为分界线,前面保留,后面剪切到页尾,跟刚才微博的 JS 放一起(不剪也行,不影响运行的)。
  5. 至此,“分享”按钮也站好位了。哎呦卧槽咋会多一步?

稍微美化一下吧

这个看个人情况,我这个主题因为比较“素”,所以上面组件选择的都是灰色调为主的,然后此时,“赞”组件和分享按钮是以上下顺序在一起的(也就是两行),皮特就像要不放一行好看点吧,绞尽脑汁想到了 div 来解决:

<div style="background-color:#ffffff;margin-top:15px;margin-bottom:25px"><!--大 div 块-->
<div style="float:left;display:inline;"><!--包含“赞”组件的 div 块-->
<wb:like appkey="PqGBM" type="simple" skin="silver"></wb:like><!--“赞”组件-->
</div>
<div class="bdsharebuttonbox" style="float:left;display:inline;margin-left:15px;"><!--百度分享的块-->
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_duitang" data-cmd="duitang" title="分享到堆糖"></a>
<a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a>
</div>
</div>

具体就是大缸套小缸,先来一个大 div ,然后把两个组件塞进俩小 div 里(为了形象比喻一下而已啦~~),然后为了防止组件们和上面的标签间距过小,所以在大 div 里用 margin 定义了一下区域,然后用了 display:inline 这个代码让俩组件走到了一起;为了防止“赞”组件和分享组件走得太近,就在后面分享组件里加了 margin-left:15px 的间距宽度。同时为了好看,在组件代码的上面一行加了一个横线,同时给他也定义了一下:

<hr style="margin-top:15px;margin-bottom:15px">

这样看起来就差不多了。

更新的话( 2016.05.09 )

虽然这篇文章写得冗杂,但是毕竟是摸索着写的,有些东西不明所以,但是还是决定不删除了,另外新发现了一款点赞按钮,简单易用,分享在另一篇文章了。而且因为博客没内容,很少有访客,为了加载速度,我删除了包括点赞之内的很多插件。

写在最后:因为皮特初出茅庐尚未入门,一切都是摸索着来的,所以写的比较乱不专业,还请见谅。

One thought on “给WordPress的文章添加新浪微博的“赞“和百度分享

  1. 看起来有必要抽时间重新编一下这篇文章了,最近这篇早期的写得很乱的文章访问量成了最高的(除了首页)……神无语/(ㄒoㄒ)/~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注