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

建站笔记2年前 (2023)更新小萝卜头

268 0 0

分享前，我必须承认文章打赏功能，在大部分网站只是一个鸡肋、花哨的功能，食之无味，弃之可惜。但是，大部分站长为了丰富网站的各个方面，也是乐此不疲的折腾了这个然并卵的功能。
好了，我先不管它有没有用，先分享出来，想必还是有不少站长乐于折腾的。
一、百度打赏
经常关注百度站长平台的朋友应该都知道百度推出过一个打赏的组件，目测主要是为了推广百度钱包，直到现在还处于内侧状态。张戈博客试着申请了下就通过了。
它的原理很简单，就是在百度站长那设定打赏二维码图片（或百度钱包账号），然后在网站插入一段 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 张戈博客保留所有权利.
*
* 给博客添加模仿百度打赏的打赏组件
* 张戈博客基于百度打赏的原创功能，引用或转载请保留版权申明，谢谢合作！
*/

+ ” <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=”https://zhang.ge/<?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=”https://zhang.ge/<?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=”https://zhang.ge/<?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=”https://zhang.ge/<?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 代码了。
不啰嗦了，自己去折腾吧！觉得文章有用的话，有钱的可以打赏，没钱的可以点赞，不怕一万多，不嫌一块少……