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

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

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

一、百度打赏

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

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

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

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

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

二、DIY版本

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

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

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

①、js代码

复制以上代码,将代码中的如下地址替换你对应的付款二维码图片,然后保存为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 文件,找到如下代码:

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

四、其他说明

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

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:108   其中:访客  92   博主  16

  1. 远方的雪山 1 来自天朝的朋友 谷歌浏览器 Windows 10 江西省九江市 电信

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

  2. 憧憬Licoy 4 来自天朝的朋友 火狐浏览器 Windows 10 四川省 电信

    张戈博主,begin适应版的代码有误,这样写就ok了

    • 憧憬Licoy 4 来自天朝的朋友 火狐浏览器 Windows 10 四川省 电信

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

      • CC 1 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省仙桃市 电信

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

    • 七弦琴 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 电信

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

  3. 微部落博客 4 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 电信

    张戈是能用代码的绝不用插件,我们是能用插件解决绝不用代码折腾,哈哈哈

  4. 何湘辉博客 1 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省十堰市 电信

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

  5. CC 1 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省仙桃市 电信

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

  6. 岚坂 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省丽水市 联通

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

  7. 模板猴-www.mobanhou.com 1 来自天朝的朋友 QQ浏览器 Windows 10 浙江省杭州市 电信

    很好的资料,

  8. 刘国栋个人博客 0 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

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

  9. 可入眼 1 来自天朝的朋友 谷歌浏览器 Windows 10 河南省安阳市 移动

    个人站长必备功能啊,支持!

  10. 小哥网赚博客 1 来自天朝的朋友 谷歌浏览器 Windows 7 四川省宜宾市 电信

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

  11. 松松商城 0 来自天朝的朋友 谷歌浏览器 Windows 7 北京市海淀区 联通

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

  12. 义乌英语培训 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省金华市义乌市 电信

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

  13. 七弦琴 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 电信

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

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      Begin版本:4.0

  14. 天真的孩子 1 来自天朝的朋友 火狐浏览器 Windows 7 北京市 北京电信互联网数据中心

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

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      研究下CSS即可

      • 天真的孩子 1 来自天朝的朋友 火狐浏览器 Windows 7 北京市 北京电信互联网数据中心

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

  15. 简单生活 1 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省武威市 电信

    张哥最近很忙啊,更新有点慢!

  16. 中国时尚博客 0 来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动

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

  17. long 0 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省邵阳市 移动

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

  18. 面试技巧 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    不错,到时候试试看

  19. 雷小天博客 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

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

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 电信

      666

  20. 动平衡仪 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

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

  21. 周元俊博客 0 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

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

  22. 淘趣网 0 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通

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

  23. 音速灰行的起子 1 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 电信

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

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 电信

      就不会站内搜索一下看看?
      https://zhangge.net/5074.html

加载中,请稍候...