博客园 打赏功能设置,友言,友荐,分享功能设置
2016-12-31 14:08
281 查看
一、jiaThis 分享到设置
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&btn=r5.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->
二、友荐插件
<!-- UJian Button BEGIN -->
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide"></script>
<!-- UJian Button END -->
三、打赏功能设置
最简单的使用方式是在页面中加入如下JS代码(此代码足够实现该功能,把下面的二维码的绝对路径写进去,就可以实现)
其中比较重要的是配置有staticPrefix,是原作者自己提供的静态文件相对路径,用来存放img和css;list是打赏方式,qrimg是设置打赏方式的二维码图片。
接下来是在博客园中使用。先在本地准备好静态文件:
JS文件,tctip.min.js;
css样式文件,myReward.css;
支付二维码,ialipay.bmp、iweixin.bmp;
支付方式图片,alipay.bmp、weixin.bmp;
赞助或者打赏按钮图片,tab_4.bmp(对应buttonImageId)。
博客园只能上传bmp图片,所以要将其他格式图片修改,然后在自己的博客园后台上传文件,这样前面的静态文件就可以使用刚刚上传了。
如果使用自己上传的静态文件,配置时就不要staticPrefix地址,提供imagePrefix和cssPrefix:
当然如果只是这样就完了,还是没有看作者的源JS代码,事实是不修改一下源码也无法使用的,其实主要是文件路径设置的问题。
打开JS源码,不是压缩的源码哦,除非你看的不眼花,也没人拦你的。
原来的cssUrl是/css/myRewards.css,因为博客园上传的文件没有文件夹,所以去掉css。可能大家想到了,img也有一样的问题。
支付方式列表中,修改图片相对路径,由于只使用了支付宝、微信两种方式,所以只修改他们的路径。其实还可以添加其他的支付方式在这里,就不赘述了。
支付按钮的图片路径,同样修改返回的相对路径。
这样在博客园后台的设置页面,在页首Html处添加上面的配置文件就可以了。
注:本文的目的不是得到别人的打赏,毕竟优质的文章才值得,而我还有很长的路。通过看别人的代码,学习如何写前端插件才是重点。作为对原作者的支持,请不要修改源代码中的github地址。
谢谢原作者开源和无私精神---参考:https://github.com/greedying/tctip---
四、友言
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
<!-- UY END -->
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&btn=r5.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->
二、友荐插件
<!-- UJian Button BEGIN -->
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide"></script>
<!-- UJian Button END -->
三、打赏功能设置
最简单的使用方式是在页面中加入如下JS代码(此代码足够实现该功能,把下面的二维码的绝对路径写进去,就可以实现)
<script> window.tctipConfig = { staticPrefix: "http://static.tctip.com", buttonImageId: 1, buttonTip: "zanzhu", list:{ alipay: {qrimg: "http://tctip.com/img/alipayqr.png"}, weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"}, } }; </script> <script src="http://static.tctip.com/js/tctip.min.js"></script>
其中比较重要的是配置有staticPrefix,是原作者自己提供的静态文件相对路径,用来存放img和css;list是打赏方式,qrimg是设置打赏方式的二维码图片。
接下来是在博客园中使用。先在本地准备好静态文件:
JS文件,tctip.min.js;
css样式文件,myReward.css;
支付二维码,ialipay.bmp、iweixin.bmp;
支付方式图片,alipay.bmp、weixin.bmp;
赞助或者打赏按钮图片,tab_4.bmp(对应buttonImageId)。
博客园只能上传bmp图片,所以要将其他格式图片修改,然后在自己的博客园后台上传文件,这样前面的静态文件就可以使用刚刚上传了。
如果使用自己上传的静态文件,配置时就不要staticPrefix地址,提供imagePrefix和cssPrefix:
<script> window.tctipConfig = { imagePrefix: "图片文件的相对路径", cssPrefix: "样式文件的相对路径", //staticPrefix: "http://static.tctip.com", buttonImageId: 4, buttonTip: "dashang", list:{ alipay: { qrimg: "支付宝二维码绝对路径"}, weixin: { qrimg: "微信二维码绝对路径"}, }}; </script> <script src="js文件绝对路径"></script>
当然如果只是这样就完了,还是没有看作者的源JS代码,事实是不修改一下源码也无法使用的,其实主要是文件路径设置的问题。
打开JS源码,不是压缩的源码哦,除非你看的不眼花,也没人拦你的。
myConfig : { imagePrefix : "", cssPrefix : "", /*** * 当staticPrefix不为空的时候,imagePrefix和cssPrefix失效 */ staticPrefix : "", buttonImageId : "3", buttonTip : "dashang", cssUrl: "/myRewards.css" },
原来的cssUrl是/css/myRewards.css,因为博客园上传的文件没有文件夹,所以去掉css。可能大家想到了,img也有一样的问题。
listConfig:{ 'alipay' : {icon: "alipay.bmp", name:"支付宝", desc: "支付宝打赏", className: ""}, 'tenpay' : {icon: "img/tenpay.png", name:"财付通", desc: "财付通打赏", className:""}, 'weixin' : {icon: "weixin.bmp", name:"微信", desc: "微信打赏", className:""}, 'bitcoin' : {icon: "img/bitcoin.png", name:"比特币", desc: "比特币打赏", className:""}, 'litecoin' : {icon: "img/litecoin.png", name:"莱特币", desc: "莱特币打赏",className:""}, 'dogecoin' : {icon: "img/dogecoin.png", name:"狗狗币", desc: "狗狗币打赏", className:""} },
支付方式列表中,修改图片相对路径,由于只使用了支付宝、微信两种方式,所以只修改他们的路径。其实还可以添加其他的支付方式在这里,就不赘述了。
buttonImageUrl: function(){ var id = tctip.myConfig.buttonImageId; var tip = tctip.myConfig.buttonTip; //return tctip.imageUrl("" + tip + "/tab_" + id + ".bmp"); return tctip.imageUrl("/tab_4.bmp"); },
支付按钮的图片路径,同样修改返回的相对路径。
这样在博客园后台的设置页面,在页首Html处添加上面的配置文件就可以了。
注:本文的目的不是得到别人的打赏,毕竟优质的文章才值得,而我还有很长的路。通过看别人的代码,学习如何写前端插件才是重点。作为对原作者的支持,请不要修改源代码中的github地址。
谢谢原作者开源和无私精神---参考:https://github.com/greedying/tctip---
四、友言
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
<!-- UY END -->
相关文章推荐
- 安卓动态壁纸源码--可直接进入壁纸设置界面+玫瑰花瓣飘落效果+可分享到微博、微信功能--无任何删减2
- 友推快速分享功能到微信 (转自博客园:好好学习的小斗士)
- 【分享】怎么设置使MyEclipse的代码提示功能一样能像Microsoft Visual Studio的代码提示功能
- 博客园打赏功能(未申请下js权限使用二维码打赏功能)
- 博客园添加打赏功能(转载)
- Android 设置微信分享功能
- CSDN博客添加打赏功能( 非博客专家也可以设置)
- 博客园增加打赏功能
- 五个步骤为博客园添加打赏功能
- 博客园设置访问统计功能-by beanmoon
- 博客园添加打赏功能
- 博客园打赏、赞助功能
- 为Hexo Next主题添加分享及打赏功能
- 博客园的打赏功能
- 设置html网页只能在微信中打开,并禁用分享功能
- 【分享】怎么设置使MyEclipse的代码提示功能一样能像Microsoft Visual Studio的代码提示功能
- 博客园—打赏功能
- 五个步骤为博客园添加打赏功能
- 怎样使用两行代码实现博客园打赏功能
- 在SQL server中设置表的自动编号功能