网站建设

分享张戈博客自用的仿百度打赏功能

Jager · 9月10日 · 2016年 11899次已读

分享前，我必须承认文章打赏功能，在大部分网站只是一个鸡肋、花哨的功能，食之无味，弃之可惜。但是，大部分站长为了丰富网站的各个方面，也是乐此不疲的折腾了这个然并卵的功能。

好了，我先不管它有没有用，先分享出来，想必还是有不少站长乐于折腾的。分享张戈博客自用的仿百度打赏功能

一、百度打赏

经常关注百度站长平台的朋友应该都知道百度推出过一个打赏的组件，目测主要是为了推广百度钱包，直到现在还处于内侧状态。张戈博客试着申请了下就通过了。分享张戈博客自用的仿百度打赏功能

它的原理很简单，就是在百度站长那设定打赏二维码图片（或百度钱包账号），然后在网站插入一段 js 代码，js 会在页面生成一个赏的按钮，点击后就弹出带有二维码的打赏页面了。分享张戈博客自用的仿百度打赏功能

张戈博客还是在使用 https 的时候就用过这个玩意，还利用七牛对百度打赏进行了 https 化。但是有 2 个弊端，驱使着我自己 DIY 一个：

1、使用百度打赏之后，打开博客网页经常会弹出一个连接超时的提示，甚是烦人；

2、百度打赏由于是实时调用百度在线资源，感觉点击后延迟很明显，给人迟钝的感觉。

二、DIY 版本

知道了它的原理，自己就可以 DIY 一个更丰富、灵活的打赏组件了！

分享张戈博客自用的仿百度打赏功能

Ps：具体效果以及和原版打赏的对比，可点击本文底部的打赏按钮和本站【关于页面】的打赏按钮。

①、js 代码

/*!
 * 仿百度打赏的博客打赏组件
 * Date: 2016-09-10 11:00
 * https://zhang.ge/5110.html
 * (c) 2013-2016 张戈博客保留所有权利.
 *
 * 给博客添加模仿百度打赏的打赏组件
 * 张戈博客基于百度打赏的原创功能，引用或转载请保留版权申明，谢谢合作！
 */
 
(function($){
	var id = Date.now();
	if($("#STYLE_"+id).size()<1){
		document.writeln("<style id='STYLE_"+id+"'>@CHARSET \"UTF-8\";*{-webkit-tap-highlight-color:rgba(255,0,0,0)}.box-size{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ds-hide{display:none}.ds-reward-stl{font-family:\"microsoft yahei\";text-align:center;background:#f1f1f1;padding:10px 0;color:#666;margin:20px auto;width:90%}#dsRewardBtn {padding: 0;margin: 0;position: absolute;background: #7ab951;left: 110px;top: -7px;width: 50px;height: 50px;font-size: 16px;font-weight: 600;line-height: 43px;display: block;border: 4px solid #fff;border-radius: 40px;color: #FFF;}#dsRewardBtn span{display:inline-block;width:50px;height:50px;border-radius:100%;line-height:58px;color:#fff;font:400 25px/50px 'microsoft yahei';background:#FEC22C}#dsRewardBtn:hover{cursor:pointer}.ds-dialog{z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0;border:1px solid #d9d9d9}.ds-dialog .ds-close-dialog{position:absolute;top:15px;right:20px;font:400 24px/24px Arial;width:20px;height:20px;text-align:center;padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;font-weight:700;line-height:20px;opacity:.6;filter:alpha(opacity=20)}.ds-dialog .ds-close-dialog:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.6;filter:alpha(opacity=40)}.ds-dialog-bg{position:absolute;opacity:.6;filter:alpha(opacity=30);background:#000;z-index:9999;left:0;top:0;width:100%;height:100%}.ds-dialog-content{font-family:'microsoft yahei';font-size:14px;background-color:#FFF;position:fixed;padding:0 20px;z-index:10000;overflow:hidden;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ds-dialog-pc{width:390px;height:380px;top:50%;left:50%;margin:-190px 0 0 -195px}.ds-dialog-wx{width:90%;height:280px;top:50%;margin-top:-140px;margin-left:5%}.ds-dialog-content h5{text-align:left;font-size:15px;font-weight:700;margin:15px 0;color:#555}.ds-payment-way{text-align:left}.ds-payment-way label{cursor:pointer;font-weight:400;display:inline-block;font-size:14px;margin:0 15px 0 0;padding:0}.ds-payment-way input[type=radio]{vertical-align:middle;margin:-2px 5px 0 0}.ds-payment-img{margin:15px 0;text-align:center}p.ds-pay-info{font-size:15px;margin:0 0 10px}.ds-pay-money{font-size:14px;margin-top:10px}.ds-pay-money p{margin:0}.ds-pay-money .ds-pay-money-sum{margin-bottom:4px}.ds-payment-img img{margin:0 auto;width:185px;}.ds-payment-img #qrCode_1{display:none}.ds-payment-img .qrcode-border{margin:0 auto}.ds-payment-img .qrcode-tip{width:48.13px;position:relative;margin:0 auto;font-size:12px;font-weight:700;background:#fff;height:15px;line-height:15px;margin-top:-12px}#qrCode_0 .qrcode-tip{color:#3caf36}#qrCode_3 .qrcode-tip{color:#e10602}.ds-payment-img #qrCode_3{display:none}.ds-payment-img #qrCode_2{display:none}#qrCode_2 .qrcode-tip{color:#eb5f01}#qrCode_1 .qrcode-tip{color:#6699cc}.wx_qrcode_container{text-align:center}.wx_qrcode_container h2{font-size:17px}.wx_qrcode_container p{font-size:14px}.ds-reward-stl{text-align:left;background:#fff;padding:0;color:#666;margin:0;width:0}#dsRewardBtn span{position:absolute;left:115px;top:-7px;background:#7ab951;width:50px;height:50px;font-size:16px;font-weight:600;line-height:43px;border:4px solid #fff;border-radius:40px}.share-s a{margin-top:-25px} .ds-payment-img .qrcode-border{border-radius: 29.97px; width: 236.89px; height: 236.89px; padding: 18.05px; margin-top: 25.53px; } </style>");
	}
	function write(){
		var content = "<div class=\"ds-dialog\" id='PAY_"+id+"'>"
		+"   <div class=\"ds-dialog-bg\" onclick=\"PaymentUtils.hide();\"></div>"
		+"   <div class=\"ds-dialog-content ds-dialog-pc \">"
		+"    <i class=\"ds-close-dialog\">&times;</i>"
		+"    <h5>选择打赏方式：</h5>"
		+"    <div class=\"ds-payment-way\">"
		+"     <label for=\"wechat\"><input type=\"radio\" id=\"wechat\" class=\"reward-radio\" value=\"0\" checked=\"checked\" name=\"reward-way\" />微信红包</label>"
		+ "     <label for=\"qqqb\"><input type=\"radio\" id=\"qqqb\" class=\"reward-radio\" value=\"1\" name=\"reward-way\" />QQ 钱包</label>"
		+"     <label for=\"alipay\"><input type=\"radio\" id=\"alipay\" class=\"reward-radio\" value=\"2\" name=\"reward-way\" />支付宝</label>"
		+ "     <label for=\"bdBaifubao\"><input type=\"radio\" id=\"bdBaifubao\" class=\"reward-radio\" value=\"3\" name=\"reward-way\" />百度钱包</label>"
		+ "    </div>"
		+ "    <div class=\"ds-payment-img\">"
		+ "     <div class=\"qrcode-img qrCode_0\" id=\"qrCode_0\">"
		+ "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(60, 175, 54\">"
		+ "       <img  class=\"qrcode-img qrCode_0\" id=\"qrCode_0\" src=\"http://res.zgboke.com/wp-content/themes/begin/img/wechat.jpg\" />"
		+ "      </div>"
		+ "      <p class=\"qrcode-tip\">打赏</p>"
		+ "     </div>"

        + "     <div class=\"qrcode-img qrCode_1\" id=\"qrCode_1\">"
		+ "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(102, 153, 204\">"
		+ "       <img  class=\"qrcode-img qrCode_1\" id=\"qrCode_1\" src=\"http://res.zgboke.com/wp-content/themes/begin/img/qqqb.png\" />"
		+ "      </div>"
		+ "      <p class=\"qrcode-tip\">打赏</p>"
		+ "     </div>"
		+ "     <div class=\"qrcode-img qrCode_2\" id=\"qrCode_2\">"
		+ "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(235, 95, 1\">"
		+ "       <img  class=\"qrcode-img qrCode_2\" id=\"qrCode_2\" src=\"http://res.zgboke.com/wp-content/themes/begin/img/zfb.png\" />"
		+ "      </div>"
		+ "      <p class=\"qrcode-tip\">打赏</p>"
		+ "     </div>"
		+ "     <div class=\"qrcode-img qrCode_3\" id=\"qrCode_3\">"
		+ "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(225, 6, 2\">"
		+ "         <img  class=\"qrcode-img qrCode_3\" id=\"qrCode_3\" src=\"http://res.zgboke.com/wp-content/themes/begin/img/bdqb.png \" />"
		+ "      </div>"
		+ "      <p class=\"qrcode-tip\">打赏</p>"
		+ "     </div>"
		+ "    </div>"
		+ "   </div>"
		+ "  </div> ";
		$("body").append(content);
	}
$(function(){
	write();
	var $pay = $("#PAY_"+id).hide();
	$pay.find(".ds-payment-way").bind("click",function(){
                $pay.find(".qrcode-img").hide();
		$pay.find(".qrCode_"+$pay.find("input[name=reward-way]:checked").val()).show();
	  });
	 $pay.find(".ds-close-dialog").bind("click",function(){
		  $pay.hide();
	 });
  });
  var PaymentUtils = window['PaymentUtils']={};
  PaymentUtils.show=function(){
	  $("#PAY_"+id).show();
  }
  PaymentUtils.hide=function(){
	  $("#PAY_"+id).hide();
  }
})(jQuery);

复制以上代码，将代码中的如下地址替换你对应的付款二维码图片，然后保存为 js 文件，比如 ds.js：

微  信  ：http://res.zgboke.com/wp-content/themes/begin/img/wechat.jpg
QQ 钱包  ：http://res.zgboke.com/wp-content/themes/begin/img/qqqb.png
支付宝  ：http://res.zgboke.com/wp-content/themes/begin/img/zfb.png
百度钱包 ：http://res.zgboke.com/wp-content/themes/begin/img/bdqb.png

Ps：怎么制作或获取这些二维码图片，我就不啰嗦了，相信大家都搞的定。

最后上传到网站存放 js 文件的目录，比如 WordPress 主题目录，最终网站前台可以访问到这个 js 即可：

比如：http://xxx.com/wp-content/themes/begin/js/ds.js

②、html 部分

<div class="ds-reward-stl">
  <button id="dsRewardBtn" onclick="PaymentUtils.show();">赏</button>
</div>
<!-- 下面的 js 地址修改和上一步保存的 js 地址一致 -->
<script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/ds.js"></script>

将上述 html 代码按照实际情况修改后，添加到博客主题想要放置打赏按钮的地方，比如文章底部。具体是哪个文件，不同主题都是不同的，所以这里我没法告诉你！想要折腾网站总是要有一定基础的。

全部完成之后，刷新网页应该可以看到效果了，不过我上面的 js 代码中的 css 样式只是适配了 Begin 主题，其他网站用上后是方的还是圆的，就只能靠自己去调试 CSS 代码了。

三、Begin 适配

如果你用的和我一样的主题，那就简单了。还是将上述 js 代码保存为 ds.js 文件，丢到 Begin 主题的 js 目录，然后修改 begin/inc/social.php 文件，找到如下代码：

<span class="shang-p">
    <?php if(zm_get_option( 'alipay_name')=='' ){?>
        <span class="shang-s">
            <a title="<?php echo zm_get_option('alipay_t'); ?>">
                <?php echo zm_get_option( 'alipay_name');?>
            </a>
        </span>
</span>
<?php}else{?>
    <span class="tipso_style" id="tip-p" data-tipso='
    <div id="shang">
    <div class="shang-main">
    <?php if ( zm_get_option(' alipay_h ') == '
    ' ) { ?><?php } else { ?><h4><i class="fa fa-heart" aria-hidden="true"></i> <?php echo zm_get_option('alipay_h '); ?></h4><?php } ?>
    <?php if ( zm_get_option('qr_a ') == ' ' ) { ?>
    <?php } else { ?>
    <div class="shang-img">
    <img src="<?php echo zm_get_option('qr_a '); ?>" />
    <?php if ( zm_get_option('alipay_z ') == '
    ' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_z '); ?></h4><?php } ?>
    </div>
    <?php } ?>
    <?php if ( zm_get_option('qr_b ') == ' ' ) { ?>
    <?php } else { ?>
    <div class="shang-img">
    <img src="<?php echo zm_get_option('qr_b '); ?>" />
    <?php if ( zm_get_option('alipay_w ') == '
    ' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_w '); ?></h4><?php } ?>
    </div>
    <?php } ?>
    <div class="clear"></div>
    </div>
    </div>'>
        <span class="shang-s">
            <a title="<?php echo zm_get_option('alipay_t'); ?>">
                <?php echo zm_get_option( 'alipay_name');?>
            </a>
        </span>
    </span>
    <?php}?>
        </span>

替换为（注意备份原文件！）：

<span class="shang-p">
    <div class="shang-s">
        <a onclick="PaymentUtils.show();" style="cursor:pointer">赏</a>
    </div>
</span>
<!-- js 地址自行修改下 -->
<script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/
ds.js"></script>

四、其他说明

很明显，张戈博客分享的这个打赏不但解决了百度打赏的 2 个问题，还能够随便 DIY 了，代码默认集成了 4 种收款方式，如果你觉得多了或少了，也可以自行 DIY 代码去折腾，前提是你必须懂一点 html 和 js 代码，否则错排了就别喷我了！

另外，不管是 Begin 主题还是其他任何网站，都是可以使用的，但是打赏按钮的样式和位置就只能靠自己调试 css 代码了。

不啰嗦了，自己去折腾吧！觉得文章有用的话，有钱的可以打赏，没钱的可以点赞，不怕一万多，不嫌一块少......

相关文章

解决升级WordPress 5.1后回复评论框不跟随、页面刷新问题

3月22日 · 2019年

解决网站404页面返回200状态码问题

9月8日 · 2018年

网站集成打字震动特效JS代码改进版

3月17日 · 2018年

博客集成Hitokoto·一言经典语句功能

10月2日 · 2017年
110 条回应
  1. 远方的雪山 2016-10-19 · 16:18

    感觉还是完全自定义更好，一般都有支付宝和微信，所以其它两个都可以不用。百度很多产品还不支持https访问，太OUT。

  2. 憧憬Licoy 2016-10-23 · 16:29

    Jager博主，begin适应版的代码有误，这样写就ok了

    <span class="shang-p"> 
			<span class="shang-s">
				<a title="赞助本站" rel="nofollow">赏</a>
			</span>
		</span>
    • 憧憬Licoy 2016-10-23 · 16:29

      主要是样式错乱了,js部分没有写上

      • CC 2016-10-31 · 13:23

        js地址 不引用吗?
        可不可以写下 完整的代码出来.
        我也是用的begin 3.0.1 版本的主题.
        分享错位了.

    • 七弦琴 2017-2-13 · 14:42

      你的也不对吧，我最新版的begin不行呢

  3. 微部落博客 2016-10-29 · 18:52

    Jager是能用代码的绝不用插件，我们是能用插件解决绝不用代码折腾，哈哈哈

  4. 何湘辉博客 2016-10-30 · 21:19

    打赏这功能除了很火的博客外，其他都然并卵。。。

  5. CC 2016-10-31 · 13:20

    我用的是begin JS 代码都修改好了.但是 错位了.
    还有一个问题, 分享怎么支持https哈.

  6. 岚坂 2016-11-5 · 10:32

    对于我们这些菜鸡博客，打赏拿来也无用

  7. 模板猴-www.mobanhou.com 2016-11-6 · 15:04

    很好的资料，

  8. 刘国栋个人博客 2016-11-10 · 21:00

    是的，一般都用支付宝和微信。。

  9. 可入眼 2016-11-22 · 12:21

    个人站长必备功能啊，支持！

  10. 小哥网赚博客 2016-11-22 · 14:48

    有些人懒 不习惯用代码 直接用插件了

  11. 松松商城 2016-12-7 · 11:37

    然而问题是即时会写打赏的代码后也没有人打赏

  12. 义乌英语培训 2016-12-14 · 17:04

    对于我这个小白来说，好高深的感觉，谢谢博主的分享！

  13. 七弦琴 2017-2-13 · 14:42

    Jager用的应该是老版的begin，我最新版的总是错位，修改css也不行，不知道哪里冲突了。。

    • avatar
      Jager 2017-2-13 · 18:58

      Begin版本：4.0

  14. 天真的孩子 2017-2-21 · 14:25

    请问下修改后分享错位，这个怎么处理。还有赞、赏、分享的颜色怎么修改。谢谢！

    • avatar
      Jager 2017-2-21 · 14:31

      研究下CSS即可

      • 天真的孩子 2017-2-21 · 14:47

        目前还没到这种境界，方便具体说下么

  15. 简单生活 2017-3-18 · 14:42

    张哥最近很忙啊，更新有点慢！

  16. 中国时尚博客 2017-3-20 · 16:43

    一般都是用支付宝和微信钱包，百度钱包总觉得没多少人用，有点跟不上潮流。
    [color=magenta]这里是中国时尚博客，请多关注~[/color]
    签到成功！签到时间：下午4:35:18，每日签到，生活更精彩哦~哈哈~

  17. long 2017-3-21 · 20:47

    楼主，为什么我的按你的部署，点击赏字按钮没有反应啊，他不弹出图片窗口

  18. 面试技巧 2017-4-10 · 13:32

    不错，到时候试试看

  19. 雷小天博客 2017-5-15 · 14:00

    这个完全可以自己写的，案例 http://www.100txy.com/article/54.html

    • avatar
      Jager 2017-9-16 · 10:23

      666

  20. 动平衡仪 2017-7-11 · 11:24

    感觉我用不到打赏功能的~~

  21. 周元俊博客 2017-8-3 · 8:36

    打字的动态效果不错，可以借鉴一下哦

  22. 淘趣网 2017-9-13 · 10:16

    功能不错，适合有原创度的作者 :grin: 千篇一律的博文太多，打赏的很少，有心的给你献个辛苦费，没心的直接复制粘贴， :???:

  23. 音速灰行的起子 2017-9-14 · 17:05

    大佬你的百度分享是怎么样https话的

  24. 有魔气历史 2019-1-2 · 9:13

    不错，我的历史资讯类网站 有魔气历史 http://www.umo7.com 比较适合用这种打赏插件，毕竟看历史资讯还是适合打赏的。
    不过现在百度钱包改名度小满，不支持收款码了，京东钱包也不支持了。所以我添加了一个银联的云闪付，最近他们推荐的蛮厉害的。

  25. 知识共享网 2019-6-19 · 0:03

    用的模板自带的

  26. 陶小桃Blog 2022-8-11 · 22:30

    也没人打赏我，哈哈哈哈

Copyright © 2013-2022 张戈博客 保留所有权利.
×
订阅图标按钮