通过js调用方式布置阿里妈妈广告和3d标签云等,减小页面代码体积、加快网页加载速度

        很多站长朋友们都是做的阿里妈妈(现在的淘宝联盟)广告,相信都会有这样的体会:阿里妈妈广告位代码不但比较长,而且还会拖慢网页打开速度,甚至诸葛草帽还经历过在阿里妈妈服务器不稳定的时候网站打不开的情况;之前写过《jimdo模板-可用于jimdo站的网站标签云插件代码》,是一款我非常喜欢的jimdo 3D标签云插件,尽管我一再将其精简,但是代码还是相当长,一度使我的页面大小达到50K以上,所以我才转向使用JS调用的方式,发现这个方法比较好,而且还有很多地方可以用得到,此篇文章会比较长,以下分别说明:

1、通过js调用的方式发布阿里妈妈广告位代码,加快网页加载速度、减小页面代码体积

        阿里妈妈广告位提供的代码并不是js,所以要把其转化为js代码,可以使用在线转码:http://www.hao123.com/haoserver/jstohtm.htm或者直接修改,阿里妈妈官方提供了方法:

        以下是阿里妈妈官方说明原文摘录:

很多站长朋友都在使用各自的CMS系统,通过js调用的方式来发布阿里妈妈广告
下面我来介绍一下怎样做,需要注意什么:
下面是从Alimama站点得到的广告位发布代码
<script type="text/JavaScript">
alimama_pid="mm_0_0_0";
alimama_titlecolor="0000FF";
alimama_descolor ="000000";
alimama_bgcolor="FFFFFF";
alimama_bordercolor="E6E6E6";
alimama_linkcolor="008000";
alimama_bottomcolor="FFFFFF";
alimama_anglesize="0";
alimama_bgpic="0";
alimama_icon="0";
alimama_sizecode="42";
alimama_width=100;
alimama_height=100;
alimama_type=2;
</script>
<script src="http://a.alimama.cn/inf.js" type=text/javascript></script>
将这段代码写在相应js文件中我们应该改写成如下样子即可,而且在各种浏览器中都是正确的
alimama_pid="mm_0_0_0";
alimama_titlecolor="0000FF";
alimama_descolor ="000000";
alimama_bgcolor="FFFFFF";
alimama_bordercolor="E6E6E6";
alimama_linkcolor="008000";
alimama_bottomcolor="FFFFFF";
alimama_anglesize="0";
alimama_bgpic="0";
alimama_icon="0";
alimama_sizecode="42";
alimama_width=100;
alimama_height=100;
alimama_type=2;
document.write('<scr'+'ipt src="http://a.alimama.cn/inf.js" type=text/javascript></scr'+'ipt>');
有几点需要注意:
1、JavaScript单双引号都可以圈定字符串的,所以针对Alimama发布的代码在增加document.write('')时用单引号就不用做任何字符转义了。
2、'script'标签要拆开来写成'scr'+'ipt'。因为不这样做浏览器可能会认为当前script的结束。

另外需要注意的是不能直接在一个js文件中发布2个以上的广告位!
很多站长朋友喜欢在一个js控制的区域内放置几个广告位,很自然的想到的写法如下
var alimama_pid=1;
document.write('<scr'+'ipt src="http://a.alimama.cn/inf.js" type=text/javascript></scr'+'ipt>');
var alimama_pid=2;
document.write('<scr'+'ipt src="http://a.alimama.cn/inf.js" type=text/javascript></scr'+'ipt>');
或者是
document.write('var alimama_pid=1; ');
document.write('<scr'+'ipt src="http://a.alimama.cn/inf.js" type=text/javascript></scr'+'ipt>');
document.write('var alimama_pid=2; ');
document.write('<scr'+'ipt src="http://a.alimama.cn/inf.js" type=text/javascript></scr'+'ipt>');
很遗憾,这两种写法在ie浏览器下都得不到正确的结果,
主要是由于ie浏览器对于document.write两次引入的inf.js都放在当前js之后执行,
所以大家还是拆出多个js文件来分别发布多个广告位吧

        代码修改完毕之后代码保存为js文件,之后就是文件保存位置的问题,jimdo自定义模板虽说可以在“网站模板-自定义模板-文件”中上传js文件,但是会在<head></head>中调用,造成网页版面错乱,在网上找了好久找到了两个可以外链js文件的东东:

 

        1、一个是谷歌,一个是toofile网盘。Google由于某些原因搬到了香港(你懂的),服务器时常不稳定,而且它的本意并不是外链js文件,所以不多做介绍,感兴趣的自己研究下吧,网址:Google代码(http://code.google.com/intl/zh-CN/)选择“项目托管-贡献开放源代码项目”。

 

        2、另一个是我正在使用的免费的toofile网盘(http://www.toofiles.com/zh/),上传之后获得外链地址,然后在自己网站调用即可,速度还可以,看看我的阿里妈妈广告代码:

 

<script src="http://dl.toofiles.com/vaaoje/documents/ad1.js" type="text/javascript">

 

比以前的代码短了不止一点点,加载速度也快了不止一点点!呵呵,最好转js之前事先备份html代码,貌似js和html代码转换过程“不可逆”。


2、通过js调用的方式发布网站3D标签云插件代码,加快网页加载速度、减小页面代码体积

        3D标签云详细介绍参见:《jimdo模板-可用于jimdo站的网站标签云插件代码》,代码已经精简得不能在精简了,还是很长(或许是我的网站标签太多了T_T),写出来看看:

<object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="250" height="250">
    <param name="movie" value="http://u.jimdo.com/www24/o/sea6d17695a9c2b53/flash/m515a22a523f6e9

e9/1281236549/flash.swf" />
    <param name="wmode" value="transparent" />
    <param name="allowscriptaccess" value="always" />
    <param name="flashvars" value=
    'jsonData= {"type":"tagBall","delicacy":2,"renderCycleTime":1,"radius":100,"focalLength":999999,"elements": [{"type":"text","data":"诸葛草帽","hcolor":"0x8F6600","herf":"/","window":""},{"type":"text","data":"NOD32","hcolor":"0xFF6600","herf":"/nod32","window":""}, {"type":"text","data":"卡巴斯基","hcolor":"0x026600","herf":"/kaba","window":""}, {"type":"text","data":"Xp","hcolor":"0xac6600","herf":"/xp","window":""}, {"type":"text","data":"Vista","hcolor":"0x636600","herf":"/vista","window":""}, {"type":"text","data":"网络安全","hcolor":"0xF56600","herf":"/safe","window":""}, {"type":"text","data":"Windows7","hcolor":"0x9F6600","herf":"/windows7","window":""}, {"type":"text","data":"IT资讯知识","hcolor":"0xFF6600","herf":"/news","window":""}, {"type":"text","data":"系统资源","hcolor":"0xF86600","herf":"/os","window":""}, {"type":"text","data":"office","hcolor":"0xdc6600","herf":"/office","window":""}, {"type":"text","data":"软件相关","hcolor":"0xdF6600","herf":"/software","window":""}, {"type":"text","data":"系统知识","hcolor":"0xdd6600","herf":"/system","window":""}, {"type":"text","data":"美化相关","hcolor":"0x356600","herf":"/beauty","window":""}, {"type":"text","data":"QQ","hcolor":"0x5F6600","herf":"/qq","window":""}, {"type":"text","data":"jimdo","hcolor":"0xFF6600","herf":"/jimdo","window":""}, {"type":"text","data":"媒体相关","hcolor":"0xFF6600","herf":"/media","window":""}, {"type":"text","data":"文件保存","hcolor":"0x2F6600","herf":"/save","window":""}, {"type":"text","data":"压缩解压","hcolor":"0xaF6600","herf":"/rar","window":""}, {"type":"text","data":"系统优化","hcolor":"0x8F6600","herf":"/optimization","window":""}, {"type":"text","data":"常用软件","hcolor":"0x156600","herf":"/popular-software","window":""}, {"type":"text","data":"破解软件","hcolor":"0xFF6600","herf":"/crack-software","window":""}, {"type":"text","data":"上传下载","hcolor":"0x696600","herf":"/download-upload","window":""}, {"type":"text","data":"网页浏览","hcolor":"0xF96600","herf":"/browse","window":""}, {"type":"text","data":"破解教程","hcolor":"0x986600","herf":"/crack","window":""}, {"type":"text","data":"聊天交流","hcolor":"0xFF6600","herf":"/chat","window":""}, {"type":"text","data":"MAC","hcolor":"0x5a6600","herf":"/mac","window":""}, {"type":"text","data":"Linux","hcolor":"0xdF6600","herf":"/linux","window":""}, {"type":"text","data":"驱动","hcolor":"0xFd6600","herf":"/drive","window":""}, {"type":"text","data":"娱乐八卦","hcolor":"0xaa6600","herf":"/gossip","window":""}, {"type":"text","data":"ChromeOS","hcolor":"0x526600","herf":"/chromeos","window":""}, {"type":"text","data":"游戏相关","hcolor":"0x0F6600","herf":"/game","window":""}, {"type":"text","data":"Windows8","hcolor":"0xFF6600","herf":"/windows8","window":""}, {"type":"text","data":"虚拟机","hcolor":"0xFF6600","herf":"/virtual","window":""}, {"type":"text","data":"软件绿化","hcolor":"0xcF6600","herf":"/green","window":""}, {"type":"text","data":"信息查询","hcolor":"0xdF6600","herf":"/information","window":""}, {"type":"text","data":"刻录相关","hcolor":"0xF96600","herf":"/burning","window":""}, {"type":"text","data":"打字输入","hcolor":"0x986600","herf":"/type","window":""}, {"type":"text","data":"网站代码","hcolor":"0x926600","herf":"/code","window":""}, {"type":"text","data":"其他文章","hcolor":"0xcd6600","herf":"/others","window":""}, {"type":"text","data":"SEO","hcolor":"0xF66600","herf":"/seo","window":""}, {"type":"text","data":"全部文章","hcolor":"0xF76600","herf":"/all","window":""}]}&lt;/object&gt; &lt;/body&gt; &lt;/html&gt;' />
</object>

        废话不多说了,开始转js:http://www.hao123.com/haoserver/jstohtm.htm,但要注意:如果标签里有汉字一定要使用《含有中文的网址中显示百分号%、十六进制数字等“乱码”是什么?》里的方法转化成含有“%”之类的代码,不然会出乱码,我就在这里吃了一亏。这里同样不能使用jimdo自带的文件上传功能,否则会出现网站右侧编辑栏消失的现象,导致不能编辑网站,其中的痛苦就不说了,还是上传到toofile里获得外链地址,再在自己的网站上进行调用。我的3D标签云代码示例:

 

<script type="text/javascript" src="http://dl.toofiles.com/vaaoje/documents/tag.js">


3、其他

        这个没什么说的了,只要是你认为影响网页打开速度的代码,或者比较冗长的代码,不妨试试这个方法!toofile网盘除了外链js之外,还可以外链css等。


        草草写了这些,如果有哪里写得不对、不好的地方或者对本站有什么意见和建议,欢迎给诸葛草帽留言!

相关文章:

网站优化:页面代码体积大小与SEO的关系

jimdo代码:jimdo博客标题栏及其时间部分(datetime)修饰和美化

Jimdo教程:Jimdo网站留言、评论部分的修饰与美化

在jimdo博客文章之间加一条水平分隔线

巧妙自定义jimdo博客网址(url)的方法

含有中文的网址中显示百分号%、十六进制数字等“乱码”是什么?

jimdo技巧-网站超链接部分美化修饰代码

jimdo教程:美化与自定义Google Reader Shared Items调用的“最近更新”模块

用于jimdo网站的"返回页首"、"返回首尾"浮动图片特效代码

jimdo技巧:网站底部(footer)“网站地图、登陆”等部分的修饰

巧用谷歌阅读器(google reader)实现网站自动调用“最近更新”模块

jimdo代码-Jimdo 网站二分栏布局等高的方法(二)

jimdo代码-Jimdo 网站二分栏布局等高的方法(一)

诸葛草帽告诉你jimdo网站RSS Feed功能那点事儿

解读Div+css布局与table网站布局区别以及对SEO影响

jimdo网站优化-验证你的网页是否符合W3C标准

以图搜图-尝试新型搜索引擎的威力!

查询IP,测试网速的网站——Myip

巧妙自定义jimdo博客网址(url)的方法

百度疑遭伊朗黑客攻击瘫痪 中国黑客发动反击

阿里妈妈审核拒绝的原因和解决办法

网站推广之-常见搜索引擎提交地址

网站seo之路-seo为何物?

本站 Google PageRank 提升至“3”与百度 K Jimdo域名

网站推广之-利用博客推广自己的网站

推荐给大家十一大博客推广自己网站-诸葛草帽seo之路

网络安全专家:黑客与“搜索引擎算法”斗法,黑帽SEO

网站向谷歌网站管理员工具提交sitemap,让google成为你的忠实读者

网页自动跳转代码及介绍

Google和百度搜索框代码(已修复乱码问题)

Google和百度站内搜索代码(乱码修正)

Write a comment

Comments: 37
  • #1

    网型网秀 (Sunday, 05 September 2010 10:33)

    这个方法还可以调用CSS,可惜Jimdo免费版不能上传JS和CSS文件,外链的网盘我没有去找,现在网盘到处都是,都不知道哪个会好点了

  • #2

    独星 (Sunday, 05 September 2010 10:53)

    你怎么那么像邻居……好勤奋……如果每天都是这样就好了= =

  • #3

    诸葛草帽 (Sunday, 05 September 2010 10:57)

    回复网型网秀:嗯,的确可以调用css,外链网盘到处都是,但是能外链js和css的我只找到toofile一个,还不错!

  • #4

    诸葛草帽 (Sunday, 05 September 2010 10:59)

    回复独星:呵呵,感谢来访,jimdo现在我一个人想不出什么太有创意的东西了,只是优化优化细部,有什么好想法、好建议可不要吝啬啊,呵呵

  • #5

    独星 (Sunday, 05 September 2010 11:14)

    哇……那么快回复= = 呃……少了一个问题,那如果要修改代码怎么办?转回去?刚才我拿3D标签云去整了,然后又整回HTML,放回jimdo就挂花了= =

  • #6

    诸葛草帽 (Sunday, 05 September 2010 11:18)

    回复独星:那个我忘记说明了,html和js代码互相转化貌似是“不可逆”的,需要事先备份html代码。

  • #7

    独星 (Sunday, 05 September 2010 12:21)

    回诸葛草帽:= = 你提供的网盘貌似是国外的。我还是用回千脑试试……

  • #8

    诸葛草帽 (Sunday, 05 September 2010 12:27)

    回复独星:千脑我也比较常用,当时貌似可以外链的只有图片吧,而且还是vip可以用的

  • #9

    独星 (Sunday, 05 September 2010 12:46)

    回诸葛草帽:呃……我用迅雷假装下载,复制下载链接~~试试……

  • #10

    诸葛草帽 (Sunday, 05 September 2010 12:48)

    回复独星:呵呵,千脑有防盗链机制的

  • #11

    独星 (Sunday, 05 September 2010 12:57)

    呃……“由于采用防盗链系统,浏览器禁止cookie将无法下载及速度较慢,请使用下载工具高速下载。 查看无法下载原因

    友情提示:注册千脑,拥有您的千脑云电脑!

    免责申明:千脑下载内容均为网友上传,如果涉及侵犯您的版权或违法内容,请联系我们立即删除。 ”shit!

  • #12

    诸葛草帽 (Sunday, 05 September 2010 13:02)

    回复独星:呵呵,其实我还是比较理解他们,他们也需要发展的,采用防盗链机制也是没有办法的

  • #13

    网上邻居 (Sunday, 05 September 2010 13:58)

    嗯,读了受益匪浅。
    结合上篇,个人感觉,页面代码体积固然影响网页打开速度,不过,访客打开页网的过程,其实就是浏览器下载内容的过程,从这个角度说,服务器是第一要素,另外,图片、外链等等,也都是影响网页打开的主要因素,这一点在我们打开一个网页时,可以从浏览器状态栏上看到。
    当然,服务器的问题不是我们可以决定的,而页面代码尺寸、图片、外接却是我们可以把握的。

  • #14

    诸葛草帽 (Sunday, 05 September 2010 14:01)

    回复网上邻居:嗯,是这样的,上篇文章留言中我说过,邻居的页面是我优化我的网站的重要参考网站之一,你的网站只有18K左右,很佩服!

  • #15

    网上邻居 (Sunday, 05 September 2010 15:02)

    按照你上文关于页面代码尺寸的定义,只是说明我主页的内容少而已,呵呵,我倒没注意过这个问题。刚计算测试了一下,这个Jimdo网站,在不加载任何内容的情况下,它的页面尺寸在8K左右。

  • #16

    诸葛草帽 (Sunday, 05 September 2010 15:11)

    回复网上邻居:呵呵,只要不影响用户体验和蜘蛛抓取,页面大小不用刻意注意的。我这几天每天都去你那里看看,页面有个兼容性问题,一直以为你的网站正在改版,但是今天我用自带ie8看页面正常,但是360浏览器却一直不正常,以前360用的是ie内核,估计360是改内核了?给你截了张图,传到了jimdo-china3里了,供你参考

  • #17

    网上邻居 (Sunday, 05 September 2010 15:24)

    谢谢!刚在群里看到了。我一直是用IE6、Firefox、Opera等主流浏览器测试的,我找360看看,并想办法调整一下。

  • #18

    诸葛草帽 (Sunday, 05 September 2010 15:27)

    回复网上邻居:不客气,这么漂亮的模板要尽量让它趋近完美才好啊,呵呵

  • #19

    网上邻居 (Sunday, 05 September 2010 15:39)

    我用360 V3.3正式版看了也正常呀,是不是浏览器设置的问题?

  • #20

    好上网 (Sunday, 05 September 2010 15:50)

    过来学习学习,看来我的网站也要优化一下~~~~~~

  • #21

    好上网 (Sunday, 05 September 2010 16:08)

    呵呵,顺便补充一句,其实邻居的网站已很完美了,可下载360最新版本:3.3正式版(v3.3.0.1) New!,之前我也有同诸葛兄一样的想法,老想到是邻居的网站兼容问题,其实是360浏览器内核的问题,(它有时连阿里妈的广告都不能正常显示),经过多个浏览器测试,邻居的网站-----完美!

  • #22

    诸葛草帽 (Sunday, 05 September 2010 16:28)

    回复网上邻居:我原来的版本是V3.2,看你的网站之前还特意使用浏览器自带的更新工具更新了,说是最新版本,更新工具怎么不好用了,现在手动升级成V3.3,测试正常了!

  • #23

    诸葛草帽 (Sunday, 05 September 2010 16:31)

    回复好上网:看了360浏览器的更新日志,貌似V3.2版本存在缺陷,所以导致显示不正常。

  • #24

    网上邻居 (Tuesday, 07 September 2010 15:12)

    感谢诸葛草帽、好上网等朋友对站的关注,其实,是不是360浏览器有缺陷暂不说,我的设计上确实存在缺陷。我中午用一个朋友的Win7电脑确实也看到了你们说的情况,IE8和360
    V3.3都一样,经过调整,应该解决了问题。欢迎并感谢朋友们继续测试!

  • #25

    诸葛草帽 (Tuesday, 07 September 2010 16:10)

    回复网上邻居:那你太厉害了,因为360是调用ie8内核,所以是ie8的问题,ie8有个兼容性视图,一般网站在不用兼容性视图模式下或多或少都有些问题,使用之后你的网站就没有问题,刚才试了下,你的网站在不用兼容性视图下都是比较完美的,厉害了

  • #26

    网上邻居 (Tuesday, 07 September 2010 16:26)

    我搞了近两个小时,差点推倒重来了...

  • #27

    诸葛草帽 (Tuesday, 07 September 2010 16:29)

    回复网上邻居:呵呵,我昨天试着帮闸北骑游队做jimdo广告盒,到最后后台进不去了,悲剧了好几个试用站,唉...

  • #28

    网上邻居 (Wednesday, 08 September 2010 14:29)

    帮闸北骑游队做jimdo广告盒?自定义你不早是小菜一碟了?

  • #29

    诸葛草帽 (Wednesday, 08 September 2010 18:52)

    回复网上邻居:呵呵,自定义模板倒没有什么,可他用的是官方模板,绝对定位各个浏览器兼容性不太好弄

  • #30

    网型网秀 (Wednesday, 08 September 2010 23:27)

    toofile在哪上传js和CSS啊,我怎么上传不上去呢?它说是错误的文档格式...
    是www.toofiles.com/zh这个网站吧?

  • #31

    诸葛草帽 (Thursday, 09 September 2010 09:39)

    回复网型网秀:网址对的,上传之前选择“文档”格式,就可以了

  • #32

    淘宝600家园 (Thursday, 04 November 2010 17:59)

    是不是在“Raw Files”那里上传,上传了,怎么找不到外链地址的?可否详细说说?

  • #33

    诸葛草帽 (Thursday, 04 November 2010 18:08)

    回复淘宝600家园:貌似toofile网站改版了,现在的外链不是那么清晰,而且也不是绝对链接了,速度也不是太理想,所以我找了别的方法,这几天我会写出来

  • #34

    liping (Thursday, 11 November 2010 16:21)

    博主,请问你文章下面的那个缩略图是插件来的吗?

  • #35

    诸葛草帽 (Thursday, 11 November 2010 16:32)

    回复liping:是的,具体见:http://zhugecaomao.jimdo.com/2010/11/11/wumii-jimdo/

  • #36

    孔鹏霞 (Friday, 16 March 2012 21:09)

    呵!我试了!不行!找不到原因啊

  • #37

    小明 (Wednesday, 04 April 2012 01:02)

    问题是,这个代码我应该放在哪里,如果我要通过点击一幅图片来打开这个连接,应该怎么样做?