简单的工作室

增加微博和微信加关注的功能

时间:2014-07-18 13:41来源:未知 作者:admin 点击:
今天闲来无事,准备优化下站长资源的博客了。主要是在网站增加新浪微博,腾讯微博和腾讯微信的加关注功能。 这个大多人都用的是微博的小挂件功能,可以展现微博头像,粉丝数以及微博内容。但是,个人感觉那种效果占的页面区域比较大,也不是很简洁。看到很多大型网站有


今天闲来无事,准备优化下站长资源的博客了。主要是在网站增加新浪微博,腾讯微博和腾讯微信的加关注功能。

    这个大多人都用的是微博的小挂件功能,可以展现微博头像,粉丝数以及微博内容。但是,个人感觉那种效果占的页面区域比较大,也不是很简洁。看到很多大型网站有小图标的加关注方式。这次我主要是模仿donews的效果,用了一个多小时,把donews的效果复制到了我的网站上。嘿嘿!

    开始。。。

    微博的加关注功能都是在官网的开放平台上面实现。需要填写开发者的资料,以及网站的验证。具体,下面会有讲到。

    1、新浪微博加关注

    登陆新浪微博的开放平台http://open.weibo.com/ 登陆自己需要关注的微博账号,然后按照提示进入“网站接入”的资料填写。

    新浪微博需要填写实名认证之后,才能提交网站的审核,审核通过后,就可以将自己网站的信息和新浪微博打通,如果运营的好,会有很不错的效果。

    根据提示生成js代码,然后复制到网站的相应位置。

    新浪微博可能需要放三段代码,感觉提示操作。

    2、腾讯微博加关注

    登陆腾讯微博的开放平台http://dev.t.qq.com/ 使用QQ号登陆后,点击“网站接入”填写开发者资料。然后就可以进入后台,按照相关提示,增加自己想要的功能了。

    根据提示生成js代码,然后复制到网站的相应位置。

    3、增加微信扫描二维码关注

    这个比较麻烦,设计到代码了,微信开发平台没有提供这种关注插件。需要自定义开发。

    大致思路也比较简单:

    首先,选用一个“加微信”的图片,这个图片可以随便从网站任何一个网站上找到,根据个人喜好,随便放置图片。

    然后,需要在鼠标点击图片的时候,将自己微信生成的二维码图片弹出显示就可以了。微信二维码生成方式,需要用手机登陆微信->设置->二维码名片,就可以看到自己的二维码了。可以点击“右上角”,分享二维码,更换二维码图片,将二维码储存到手机相册等功能。

    鼠标点击显示二维码名片的代码:

    加关注按钮图片html代码:放在需要网站显示此功能的地方

    <a href="javascript:void(0);" onclick="showfollowweixin();">

    <img src="加微信的图片地址" width="62px"></a>

    鼠标点击弹出二维码js脚本代码:

    放到首页加载的js文件中的最后面,然后上传覆盖到服务器,当然也可以放到首页body之前的任何一个地方。

1 function showfollowweixin(){
2     var htmltmp = '<div id="follow-box" style="position: absolute; top:0;left:0;width:100%;height:100%;z-index:9999998;opacity:0.6;filter:Alpha(Opacity = 60);display :block;background:rgba(0,0,0,0.5);"></div><div id="follow-weixin" style="position: absolute;z-index:9999999;top:200px;left:50%; margin-left: -120px; padding: 20px; background: #fff;"><p style="text-align: right; line-height: 25px;"><a href="javascript:void(0);" onclick="showfollowhide()">关闭</a></p><img src="二维码图片地址" width="200" /><p style="line-height: 25px;">扫描二维码关注拼一把博客微信</p></div>';
3     $('body').css("position","relative").append(htmltmp);
4 }
5 function showfollowhide(){
6     $("#follow-box").detach();
7     $("#follow-weixin").detach();
8 }

    哦了,三个功能都实现了,大家现在看到我博客上面的三个小功能就是最终效果。后期,如果有其他适用的应用,我们也会陆续为大家提供方法。

    当然,如果你稍微懂点代码技术,可以随意调整,菜鸟兄弟,就直接复制代码放到相应位置即可。



实验结果:关于加微信 按钮 的函数showfollowhide 实现关闭弹出的微信图片,一定要再加jquery.js文件,否则会导致

弹出了微信图片但是无法关闭弹出的图片.

下载jquery.js

或者在头文件中包含 <script type="text/javascript" src="http://www.jiandande.com/templets/default/jquery.js"></script>



JS头文件最好加在<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmspath/}/images/js/j.js" ></script>

下面一行,否则会影响DEDECMS图文资讯滚过的。

(责任编辑:简单的工作室)
顶一下
(0)
0%
踩一下
(2)
100%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片