伪程序员

仿简书:WordPress在微信中提示分享朋友圈效果

2014-11-01  本文已影响4709人  67e2139ee31d
wechat_0

个人网站很多,微信又很流行,不适配微信提示分享的网站不是好网站。

由于喜欢去简书,对于简书在微信中打开文章最后用javascript弹出的分享到朋友圈效果觉得很赞。这不、就把创意剽窃了过来。技术上自己用css重写了一样的。

由于本人不是很熟悉javascript,明知道用jquery可以实现的情况下,还是准备偷懒用bootstrap组件,果然懒惰的人上天是不会给好运的,引入bootstrap时,它的css覆盖了我现有网页的css样式,结果可想而知。

不过懒人总有懒办法,找了弹曾组件layer,layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,您的页面会轻松地拥有丰富而友好的操作体验。layer已运用在15万家web平台,其中包括中国联通、蚂蚁短租、phpyun、中国网等知名网站云云……

可是上天总是公平的,我将layer引入后,css加载过慢,网页始终有两三秒延迟。将layer放在七牛中、bae、sae都试了。我怀疑是我昨天网速的问题。所以最终就没做弹窗,只将css的效果放在文章最后。太懒了我,我经常郁闷还有比我更懒的嘛?

不扯淡唠叨了,上图:

而在浏览器中打开则没有分享代码

实现方式非常简单:

使用PHP中的$_SERVER['HTTP_USER_AGENT']函数对浏览器user_Agent进行判断,如果是微信则显示css代码至文章最后。

微信的user_agent我对iOS和Android进行了判断,

在iPhone下,返回

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

在Android下,返回

Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

发现微信浏览器为 MicroMessenger ,并且也可以判断手机类型为iPhone还是Android

如果是微信则调用下列代码,非微信则不调用。

具体的PHP代码和css样式实现如下(英语恐惧症者、字母书写代码,代码乱):

<?php

$user_agent = $_SERVER['HTTP_USER_AGENT']; $user_agent_jieguo=stristr($user_agent, "MicroMessenger");

if (!$user_agent_jieguo) {

}else{

?>

<link rel="stylesheet" type="text/css" href="wechat.css"> <div class="biankuang"><div class="dingbuwenzi">点击右上角的「···」按钮<img src="http://codelies.qiniudn.com/jiantou.png" class="jiantou" width=40 height=42 /></div> <div class="dibu"><img src="http://codelies.qiniudn.com/fenxiang.png" width="35px" height="35px" /><div class="dibuwenzi">发送给朋友</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="http://codelies.qiniudn.com/pengyouquan.png" width="35px" height="35px" /> <div class="dibuwenzi">分享到朋友圈</div><div class="hong"> <img src="http://codelies.qiniudn.com/hong.png" class="hong1" width="93" height="11" /><img src="http://codelies.qiniudn.com/hong.png" class="hong2" width="93" height="11" /> </div> </div> </div>

<?php

}?

>

其中wechat.css我放在下面链接,务必引用。

http://img.codelies.com/style.css

最终效果如首图。

Blog:www.codelies.com

原文地址:http://www.codelies.com/?p=103

伪程序员
上一篇 下一篇

猜你喜欢

热点阅读