WordPress

远方的雪山微信分享按钮(微信公众号)

萨龙龙萨龙龙 WordPress 11年前
2.28W 18
LensNews

远方的雪山微信分享按钮(微信公众号)
微信，当下流行的社交软件，微信的强大与用户量的巨增让我们看到微信前景；微信公众号，为网站申请一个微信公众号，可以让网站很方便的展示给微信用户，让微信用户随时关注网站的动态。

前面介绍了自定义wordpress分享按钮，把比较流行、用户量大的一些社交网站链接添加到分享按钮中，重新设计与网站本身的样式相符合，让分享按钮看起来就是网站的一部分。

远方的雪山流量需少，但还是要做的更好，其实到现在已不太注重流量，做这个网站最大的初衷是记录生活点滴。前几天看到加网的jiathis分享按钮中多了一个“微信按钮”，点击弹出微信公众号，效果很棒，交互性与个性化都不错。所以在远方的雪山再添加一个“微信分享按钮”。

在《自定义wordpress分享按钮》文章中的分享按钮代码中添加微信图标按钮：

  1. <a class="weixin" onclick="showid('weixin');"><img src="微信图标链接地址"></a>  

同时在分享按钮代码中添加弹窗显示的微信公众号二维码图片(id：“weixin”要与上面代码中的onclick="showid('weixin');"一样，点击才会显示整个id“weixin”中的内容)：

  1. <!--微信分享按钮弹窗-->   
  2. <div id="weixin">   
  3.     <h3>远方的雪山微信公众号</h3>   
  4.         <img src="微信公众号二维码图片链接地址">   
  5. </div>  

在主题自定义js文件中添加弹窗的js代码（js代码来源知更鸟，与远方的雪山登录按钮一样）：

  1. //弹窗js代码   
  2. function showid(idname){   
  3. var isIE = (document.all) ? true : false;   
  4. var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);   
  5. var newbox=document.getElementById(idname);   
  6. newbox.style.zIndex="9999";   
  7. newbox.style.display="block"  
  8. newbox.style.position = !isIE6 ? "fixed" : "absolute";   
  9. newbox.style.top =newbox.style.left = "50%";   
  10. newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";   
  11. newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";   
  12. var layer=document.createElement("div");   
  13. layer.id="layer";   
  14. layer.style.width=layer.style.height="100%";   
  15. layer.style.position= !isIE6 ? "fixed" : "absolute";   
  16. layer.style.top=layer.style.left=0;   
  17. layer.style.backgroundColor="#000";   
  18. layer.style.zIndex="9998";   
  19. layer.style.opacity="0.6";   
  20. document.body.appendChild(layer);   
  21. var sel=document.getElementsByTagName("select");   
  22. for(var i=0;i<sel.length;i++){   
  23. sel[i].style.visibility="hidden";   
  24. }   
  25. function layer_iestyle(){   
  26. layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)   
  27. + "px";   
  28. layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +   
  29. "px";   
  30. }   
  31. function newbox_iestyle(){   
  32. newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";   
  33. newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";   
  34. }   
  35. if(isIE){layer.style.filter ="alpha(opacity=60)";}   
  36. if(isIE6){   
  37. layer_iestyle()   
  38. newbox_iestyle();   
  39. window.attachEvent("onscroll",function(){   
  40. newbox_iestyle();   
  41. })   
  42. window.attachEvent("onresize",layer_iestyle)   
  43. }   
  44. layer.onclick=function(){newbox.style.display="none";layer.style.display="none";for(var i=0;i<sel.length;i++){   
  45. sel[i].style.visibility="visible";   
  46. }}   
  47. }  

最后在主题的样式文件中添加以下CSS代码：

  1. /*微信弹窗*/  
  2. .weixin{   
  3.     cursor: pointer;   
  4. }   
  5. #weixin{   
  6.     display: none;   
  7.     background: #f2f2f2;   
  8.     padding: 2px 12px 12px;   
  9.     border-radius: 8px;   
  10. }   
  11. #weixin h3{   
  12.     text-align: center;   
  13.     padding: 8px;   
  14.     color: #3275a8;   
  15. }   
  16. #weixin img{   
  17.     border: none;   
  18. }   
  19. #weixin img:hover{   
  20.     background: none;   
  21. }  
微信公众号的影响相信你比我更了解，很多网站直接在边栏或悬浮显示二维码，在分享链接中添加，以弹窗的形式显示微信公众号也很不错。最近又在网站页面顶部加了一个信息栏，来展示微信公众号与一些信息，请关注远方的雪山微信，感谢！
赞(2)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：, ,
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

18 条评论，访客：0 条，博主：0 条
  1. 时尚house
    时尚house发布于： 
    回复

    非常感谢博主，我已经用上了微信弹窗，但有一点小问题，就是微信分享按钮点击以后二维码不是显示在最前面，阴影遮盖了二维码！请问怎么解决呢

  2. 神经大爆炸
    神经大爆炸发布于： 
    回复

    我博客 的微信 就是用的 哥们的这种方法
    但是 更新浏览器后 发现 只有 谷歌浏览器出效果了 。

    • 萨龙龙
      萨龙龙发布于： 
      回复

      jQuery弹窗的这个版本兼容性是很好，现在我的网站用的是CSS3的弹窗效果。

  4. 玉满斋
    玉满斋发布于： 
    回复

    不错，这个确实很有点儿意思！支持一个！

    • 萨龙龙
      萨龙龙发布于： 
      回复

      最初是在jiathis分享按钮中看到的，感觉很不错，而且分享按钮也是自定义的，所以顺便添加一个。

  5. Wall·E
    Wall·E发布于： 
    回复

    还没注意到加网加了微信呢，我直接把公众号放在侧边栏了，这样更显眼

    • 萨龙龙
      萨龙龙发布于： 
      回复

      你的这个留言被多说当成垃圾留言了，我看了下没什么问题啊。 我也是看到jiathis分享按钮中有这个效果，才加到自定义的分享按钮中。

  6. 那时年少
    那时年少发布于： 
    回复

    这个不错，可以考虑加一个

    • 萨龙龙
      萨龙龙发布于： 
      回复

      呵呵，个人感觉还是挺好。

发表回复