• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

建站经验 admin 1年前 (2018-06-23) 267次浏览 已收录 0个评论

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

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

一、百度打赏

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

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

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

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

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

二、DIY 版本

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

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

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

①、js 代码

+

+

+
+

+

打赏

+

+

+

+
+

+

打赏

+

+

+

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

+

打赏

+

+

+

+

;

$(“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:

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

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

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

②、html 部分

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

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

三、Begin 适配

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

‘>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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” datatipso=

<?php if ( zm_get_option(‘ alipay_h ‘) ==
) { ?><?php } else { ?>

<?php echo zm_get_option(‘alipay_h ‘); ?>

<?php } ?>

<?php if ( zm_get_option(‘qr_a ‘) == ‘ ‘ ) { ?>
<?php } else { ?>

<img src="<?php echo zm_get_option(‘qr_a ‘); ?>” />
<?php if ( zm_get_option(‘alipay_z ‘) ==
) { ?><?php } else { ?>

<?php echo zm_get_option(‘alipay_z ‘); ?>

<?php } ?>

<?php } ?>
<?php if ( zm_get_option(‘qr_b ‘) == ‘ ‘ ) { ?>
<?php } else { ?>

<img src="<?php echo zm_get_option(‘qr_b ‘); ?>” />
<?php if ( zm_get_option(‘alipay_w ‘) ==
) { ?><?php } else { ?>

<?php echo zm_get_option(‘alipay_w ‘); ?>

<?php } ?>

<?php } ?>

>

<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>

替换为(注意备份原文件!):

四、其他说明

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

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

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


39MO , 版权所有丨如未注明 , 均为原创丨转载请注明原文链接:分享张戈博客自用的仿百度打赏功能
喜欢 (0)
[1353713598@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址