wrodpress文章点赞插件

原创 华熙网络  2016-05-13 17:15  阅读 113 次

在博客各种赞按钮上线之后,收到很多朋友想知道怎么用插件点赞,下面胜达博客给大家介绍一下款赞按钮插件,让你的用户轻松表达态度,当用户在你的站点上某个网页点击了赞按钮后,同时会同步一条包含网页内容的动态信息到博客显示。

文章使用点赞的好处:

1. 随时随地轻松表达态度
用户浏览网页,发现喜欢的内容,通过“赞”按钮只需轻松点击一下,即可表达心情,方便快捷

2. 发现好友
“赞”按钮同时会显示已表达态度的用户,如果您的微博好友也“赞”过,那么您将看到她/他

3. 内容同步分享
点击按钮后,用户会同步一条包含对象内容的动态信息到微博中,通过微博继续传播

通过wrodpress后台我们可以直接搜索安装插件WTI Like Post Options,实现点赞功能。如果会写代码的朋友也可以自己加入代码来实现。

代码实现具体流程

完整版本的代码内容如下:

  1. <?php
  2. $path = "zan.txt";
  3. if(isset($_POST['zan'])){
  4. $num = (int)$_POST['zan'];
  5. $save = fopen($path,"w");
  6. fwrite($save,$num);
  7. fclose($save);
  8. echo "good";
  9. exit();
  10. }
  11. $zan = file_exists($path) ? intval(file_get_contents($path)) : 0;
  12. ?>
  13. <!doctype html>
  14. <html>
  15. <head>
  16. <meta charset="utf-8">
  17. <title>我要点赞</title>
  18. <style>
  19. .main { position: relative; font-size: 10pt; line-height: 18px; margin: 40px auto; width: 800px; height: 170px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
  20. .zan { position: absolute; top: 20%; left: 45%; width: 160px; height: 110px; background: url("http://cdn0.yuxiaoxi.com/zan.jpg") center no-repeat; cursor: pointer; opacity: 0.85; }
  21. .zan:active { opacity: 1; }
  22. .zan em { position: absolute; color: #333; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
  23. .zan i { font-style: normal; color: #E94F06; }
  24. .zan b { position: absolute; color: #E94F06; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="main">
  29. <div class="zan"><em>看官们给了 <i><?php echo $zan; ?></i> 个赞</em></div>
  30. </div>
  31. <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
  32. <script>
  33. jQuery(document).ready(function($) {
  34. $(".zan").click(function(e){
  35. var $i=$(".zan i"), $b=$("<b>").text("+1"), n=parseInt($i.text());
  36. $b.css({
  37. "bottom":0,
  38. "z-index":999,
  39. });
  40. $i.text(n+1);
  41. $(".zan").append($b);
  42. $b.animate({"bottom":100,"opacity":0},1000,function(){$b.remove();});
  43. var d = setInterval(function(){
  44. clearInterval(d);
  45. if($(".zan b").length == 1){
  46. $.post("",{zan:$i.text()})
  47. }
  48. },1000)
  49. e.stopPropagation();
  50. });
  51. });
  52. </script>
  53. </body>
  54. </html>

由于部分朋友可能需要将点赞功能放在不同的位置,所以将上述代码分割出来,整理成以下几部分,您可以在需要放置的地方加入相应的代码.

jQuery代码:

  1. jQuery(document).ready(function($) {
  2. $(".zan").click(function(e){
  3. var $i=$(".zan i"), $b=$("<b>").text("+1"), n=parseInt($i.text());
  4. $b.css({
  5. "bottom":0,
  6. "z-index":999,
  7. });
  8. $i.text(n+1);
  9. $(".zan").append($b);
  10. $b.animate({"bottom":100,"opacity":0},1000,function(){$b.remove();});
  11. var d = setInterval(function(){
  12. clearInterval(d);
  13. if($(".zan b").length == 1){
  14. $.post("",{zan:$i.text()})
  15. }
  16. },1000)
  17. e.stopPropagation();
  18. });
  19. });

php代码:

  1. <?php
  2. $path = "zan.txt";
  3. if(isset($_POST['zan'])){
  4. $num = (int)$_POST['zan'];
  5. $save = fopen($path,"w");
  6. fwrite($save,$num);
  7. fclose($save);
  8. echo "good";
  9. exit();
  10. $zan = file_exists($path) ? intval(file_get_contents($path)) : 0;
  11. }
  12. ?>

html代码:

  1. <div class="main">
  2. <div class="zan"><em>看官们给了 <i><?php echo $zan; ?></i> 个赞</em></div>
  3. </div>

配上合适的css样式:

  1. .main { position: relative; font-size: 10pt; line-height: 18px; margin: 40px auto; width: 800px; height: 170px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
  2. .zan { position: absolute; top: 20%; left: 45%; width: 160px; height: 110px; background: url("http://cdn0.yuxiaoxi.com/zan.jpg") center no-repeat; cursor: pointer; opacity: 0.85; }
  3. .zan:active { opacity: 1; }
  4. .zan em { position: absolute; color: #333; font-style: normal; bottom: -15px; width: 100%; text-align: center; }
  5. .zan i { font-style: normal; color: #E94F06; }
  6. .zan b { position: absolute; color: #E94F06; font-style: normal; bottom: -15px; width: 100%; text-align: center; }

PS:有很多朋友指出用不了,其实是自己没有布局好相应的代码,实在搞不好就只能使用插件来实现wrodpress文章点赞插件功能了。

本文地址:http://www.szsdseo.com/jpcjp/513.html
版权声明:本文为原创文章,版权归 华熙网络 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情

  1. 洋洋洋博客
    洋洋洋博客 【队长】 @回复

    一般的博客系统都在点赞插件的,不用去单独去弄的,直接下载安装就可以了。
    支持博主,支持作者,欢迎回访 洋洋洋博客 谢谢

  2. 斯托克笔记
    斯托克笔记 【农民】 @回复

    WP就是插件多,ZB就少太多了。

  3. 真我风采
    真我风采 【队长】 @回复

    不错。

  4. 成都川科卫校
    成都川科卫校 【农民】 @回复

    这个可以