Share the Baidu like reward function used by Zhang Ge's blog

Before sharing, I must admit that the article reward function is just a chicken ribs and a fancy function in most websites. It's a pity to discard it. However, in order to enrich all aspects of the website, most webmasters are also happy to toss about the function of natural merging eggs.

Well, I don't care whether it is useful or not. I will share it first. I think there must be many station leaders who are happy to toss and turn.

1、 Baidu rewards

Friends who often pay attention to Baidu webmaster platform should know that Baidu has launched a reward component, and visual inspection is mainly to promote Baidu Wallet, which is still in the inside state until now. Zhang Ge tried to apply and passed.

Its principle is very simple, that is, set a reward QR code image (or Baidu Wallet account) at Baidu webmaster, and then insert a section of js code on the website, Js will generate a reward button on the page, and click it to pop up a reward page with a QR code.

Zhang Ge Blog used this gadget when he was still using https, and also used Qiniu to https Baidu rewards. However, there are two drawbacks that drive my DIY:

1. After using Baidu to reward, when you open a blog page, a prompt of connection timeout often pops up, which is very annoying;

2. Baidu rewards because it calls Baidu online resources in real time, and feels that the delay after clicking is obvious, giving a dull feeling.

II DIY version

Knowing its principle, you can DIY a richer and more flexible reward component!

Ps: For the specific effect and the comparison with the original reward, click the reward button at the bottom of this article and this website【 About Page 】Reward button of.

①、 Js code

 /*! *Blog reward component imitating Baidu reward * Date: 2016-09-10 11:00 *  https://zhang.ge/5110.html *(c) 2013-2016 Zhang Ge Blog All rights reserved * *Add reward components imitating Baidu reward to the blog *Zhang Ge's blog is based on the original function awarded by Baidu. Please reserve the copyright statement for quotation or reprint. Thank you for your cooperation! */ (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>Select reward method:</h5>" +"    <div class=\"ds-payment-way\">" +"<label for=" wechat  "><input type=" radio  "id=" wechat  "class=" reward radio  "value=" 0  "checked=" checked  "name=" reward way  "/>WeChat Red Packet</label>" +"<label for=" qqqb  "><input type=" radio  "id=" qqqb  "class=" reward radio  "value=" 1  "name=" reward way  "/>QQ Wallet</label>" +"<label for=" alipay  "><input type=" radio  "id=" alipay  "class=" reward radio  "value=" 2  "name=" reward way  "/>Alipay</label>" +"<label for=" bdBaifabao  "><input type=" radio  "id=" bdBaifabao  "class=" reward radio  "value=" 3  "name=" reward way  "/>Baidu Wallet</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  ">Reward</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  ">Reward</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  ">Reward</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  ">Reward</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);

Copy the above code, replace your corresponding payment QR code image with the following address in the code, and save it as a js file, such as ds.js:

 WeChat: http://res.zgboke.com/wp-content/themes/begin/img/wechat.jpg QQ wallet: http://res.zgboke.com/wp-content/themes/begin/img/qqqb.png Alipay: http://res.zgboke.com/wp-content/themes/begin/img/zfb.png Baidu Wallet: http://res.zgboke.com/wp-content/themes/begin/img/bdqb.png

Ps: I won't talk about how to make or obtain these QR code pictures. I believe everyone can make it.

Finally, upload it to the directory where the js file is stored on the website, such as the WordPress theme directory. Finally, the website foreground can access this js:

For example: http://xxx.com/wp-content/themes/begin/js/ds.js

②、 Html section

 <div class="ds-reward-stl"> <button id="dsRewardBtn" onclick="PaymentUtils. show();">Reward</button> </div> <!--  The following js address modification is consistent with the js address saved in the previous step --> <script type="text/javascript" src=" http://xxx.com/wp-content/themes/begin/js/ds.js "></script>

After modifying the above html code according to the actual situation, add it to the place where the blog theme wants to place the reward button, such as the bottom of the article. The specific file and different themes are different, so I can't tell you here! Want to toss website always must have certain foundation.

After all is completed, you should be able to see the effect of refreshing the web page. However, the CSS style in the js code above just adapts to the Begin theme. If other websites are square or round after using it, you can only debug the CSS code by yourself.

III Begin adaptation

If you use the same theme as mine, it will be simple. Save the above js code as a ds.js file, drop it into the js directory of the Begin theme, and then modify the begin/inc/social.php file to find the following code:

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

Replace with (pay attention to backup the original file!):

 <span class="shang-p"> <div class="shang-s"> <a onclick="PaymentUtils. show();" style="cursor: pointer">Reward</a> </div> </span> <!--  Js Address Self modification --> <script type="text/javascript" src=" http://xxx.com/wp-content/themes/begin/js/ ds.js"></script>

4、 Other instructions

Obviously, the reward shared by Zhang Ge's blog not only solves the two problems of Baidu reward, but also can DIY freely. The code defaults Four payment methods are integrated. If you think there are more or less payment methods, you can also use DIY code to deal with the problem. The premise is that you must know a little HTML and js code, otherwise don't spray me if it is wrong!

In addition, whether it is the Begin theme or any other website, it can be used, but the style and location of the reward button can only be debugged by yourself.

Stop nagging, and go to trouble yourself! If you think the article is useful, you can reward those who have money, praise those who don't have money, and don't be afraid of more than 10000 yuan, or even less than one yuan