艾逗笔

有梦想爱学习的实力派

QQ空间魔力日志制作教程

艾逗笔's Avatar 2013-12-27 开发笔记

<div>相信朋友们经常会在自己的QQ空间看到好友转发的诸如此类的日志图片</div>

看着日志图片上显示着自己的QQ头像、QQ昵称、QQ号码 是不是觉得很不可思议呢?是不是很想知道这些神奇的图片是怎么做出来的? 那么接下来我就结合自己的经验给大家讲一讲这种魔力日志制作的原理和方法。

制作原理:

关于魔力日志的制作原理我就不详细说了,相信学过php的朋友都懂,上面的截图是网上给的解释,大家可以简单了解一下。看不懂也不要紧,没php基础也无所谓,请重点关注接下来的制作步骤。

制作步骤:

1、准备一张希望让别人看到的图片,可根据自己的创意自由发挥。例如:

做好图片之后那么接下来要做的就是怎么样把看到这张图片的人的QQ信息显示在这张图片上了。

2、下载源代码

源代码里面包含了上面的那张百度搜索的图片,命名为qq.png,如果大家想制作其他的版本只要重新制作一张qq.png图片即可。

源代码下载地址:http://url.cn/WbjBGF

源代码目录结构: ip文件夹:获取浏览者主机ip,用于空间定位。 font文件夹:字体包 do.php:关键文件,用于获取浏览者的信息,包括QQ昵称,QQ头像,QQ号,登录地址等信息。 content.php:内容文件,存放向浏览器输出的内容。 no.png:默认图片,即日志内容页里面的图片(别人点进去才会看到)。 qq.png:目标图片,即想要让别人看到的图片。

3、申请虚拟空间 要把做好的魔力日志图片发到空间让所有人看到,必须有一个虚拟空间,只有把代码和图片上传到空间,才能做出魔力日志。申请虚拟空间的方式有很多,有条件的朋友可以自己在网上买一个php空间,或者在网上找一个免费的php空间。这里推荐的是百度开发者空间。百度开发者空间申请流程:

http://jingyan.baidu.com/article/ceb9fb10ebf3f68cad2ba012.html

4、测试服务器

按照第三步给的链接教程将代码上传到百度开发者空间之后,在浏览器输入网址http://1.idoubi.duapp.com/do.php即可看到上传代码中的no.png图片,注意网址不要输错,1是你按照教程填写的版本号,我这里是1,第三步中的教程里面写的是0。idoubi是我自己填的域名,每个人按照自己填的域名和版本号来输入网址。

如果能看到这张默认图片的话,证明服务器配置正确,接下来就可以去空间写日志了。

5、发表魔力日志

复制地址http://1.idoubi.duapp.com/do.php,在腾讯微博粘贴并广播(网上说可以直接用这个地址,但是我试了不行),生成短地址http://url.cn/Uy8PZJ。复制短地址。

进入自己的QQ空间写日志,插入图片,选择插入网络图片,输入在腾讯微博生成的短地址,添加,即可插入no.png这张网络图片。点击发表,魔力日志制作成功。

返回个人中心查看,即可看到根据浏览者对象生成的图片,形式为浏览者的QQ信息与qq.png图片组合(在源代码未修改情况下,qq.png不起作用,这里的背景图是白色的)而成的一张图片。(由于浏览器缓存问题,发表日志后立刻回个人中心查看可能看到的还是no.png那张图片。这种情况下可以换个QQ进入空间看看效果。)

这是我用我的QQ空间看到的效果。不知道为什么这里没有显示我的Qzone图像,昨天还能显示的,好吧请忽略这个bug。

到这一步魔力日志的制作已经完成了,在空间生成的是源代码默认的显示方式。即没有背景图片,只由浏览者的QQ号、QQ昵称和源代码自定的内容组成的一张图片。那么下面就说一下怎么样制作自己想要的图片表现样式。

6、修改样式 在生成的网站版本处点编辑,进入代码编辑页面。

打开do.php页面,将第26、27行代码前面加双斜杠注释掉,27行后面回车,添加28行所示代码。

回到个人中心刷新查看,可以看到图片变成了这个样子。 按照目标图片的要求,我们只需要保留浏览者的QQ昵称和QQ号即可。于是我们将44至51行代码注释掉。

刷新之后看到的图片是这个样子的。 基本上符合我们的制作要求了,那么接下来就是对QQ昵称和QQ号调整位置的问题了。在浏览器输入网址http://1.idoubi.duapp.com/qq.png,可以预览我们的目标图片,用QQ截图工具从左上角开始拉一个矩形,截图框显示的数据就是右下角的坐标(左上角为原点),我测出来的坐标是159x130.于是我们找到42行代码,将数据改为14,0,159,130.

第一个参数是字体的大小,第二个参数是字体所在行与水平线的夹角,第三、第四个参数分别是信息所处的坐标值。

修改完代码后保存,回到QQ空间刷新即可看到修改后的效果。

根据信息所处的位置对第三第四个参数做适当的调整,本实例中的最终改的参数为14,0.159,128.到这一步基本上算完工了。

接下来就是对用户信息的颜色样式进行调整了。根据实际搜索情况我们知道用户信息显示的颜色应该是红色,为了获得红色的RGB值,我们还是用QQ截图工具,在目标字体上一拉即可获得所需的RGB值为204,0,0. 默认情况下,我们看到42行代码的颜色参数是pink,我们将其改为red。并在34行将red的RGB值改为204,0,0.

回到QQ空间刷新即可看到最终效果。

经过上述步骤,我们就做成了一个简单版本的魔力日志,这样的话发到自己的空间就能让好友们大开眼界了,说不定还会疯狂转载哦。大家还可以根据自己的创意P一些有趣的图片,然后按照上述的步骤做成你想要的效果。本文提供的源代码可以获取的用户信息有:QQ昵称、QQ号码、Qzone头像、登陆地址。合理利用的话肯定能够给周围的朋友带来欢乐。赶紧去试一试吧~

备注: 1、本教程是作者艾逗笔参考网上已有的一些教程,根据自己的制作经验原创而成,讲解详细,步骤清晰,力求阅读者能够看懂并能做出自己期望的魔力日志。如有不当之处还请各位看官批评指正 2、通过本教程制作出来的魔力日志存在以下的不足: 1)直接用虚拟空间的网址作为网络图片地址插入后,制作的魔力日志不成功,必须用腾讯微博生成的短地址才能达到预期的效果。 2)不能获取QQ签名 3)得到的头像是QQ空间头像而不是QQ头像. 4)魔力日志发表后分享不产生动态 5)手机空间预览不显示预期效果。 欢迎懂相关技术的朋友针对以上问题与本人交流。 3、如果觉得本教程写的还不错,对你有帮助,就请动动手指分享给你的好友吧。 4、感谢各位支持。

本文最后更新于 天前,文中所描述的信息可能已发生改变