网站右下角广告代码怎么插入

做网站的朋友应该都遇到过这种需求，想在页面右下角挂个浮动的广告位，既不影响用户体验，又能带来点额外收入。这个位置很微妙，不遮挡正文，用户滚动阅读时视线余光刚好能扫到，点击率通常比顶部横幅要理想。今天我就把这套代码的写法，从最简单的裸代码到带关闭功能的完整版，全部捋一遍。

最基础的方式是使用CSS的fixed定位。这个属性就是让元素固定在浏览器窗口的某个坐标点上，不管用户怎么滚动页面，它都待在原地。我们可以新建一个div容器，给它加上固定的宽高，然后用position：fixed配合right和bottom两个值来锁住它的位置。假设你的广告尺寸是300像素乘250像素，那代码就是这样的：

```html
　　

　　
　　

这里有个细节值得注意，如果不是用图片而是用JS广告联盟的代码，比如Google AdSense这种，直接把联盟生成的脚本塞进这个div里面也行。但前提是你要确认联盟允许这种浮动形式，有些平台的规则会限制这个，建议先阅读一下条款，免得账户出问题。

当你有多个脚本要管理，或者不想每次改广告链接都要翻代码时，把逻辑抽离开会更方便。可以写一个独立的JavaScript文件，比如叫float-ad.js，然后把代码都封装到里面。页面调用的时候就一行，用script标签的src属性引进去。这样做的好处很实际，以后想换广告链接或者改尺寸，只需要动那一个JS文件，全站所有引用它的页面会同步更新。

既然叫浮动广告，那交互体验自然不能忽略。没有关闭按钮的浮动广告是很招人烦的，用户找半天关不掉，可能就直接把整个网站给关掉了。所以成熟的方案一定要带上一个能让用户主动关闭的按钮。这个思路不复杂，增加一个右上角的小叉号，点击之后把整个广告容器在DOM里移除掉就好。可以给关闭按钮写一个onclick事件：

```html
　　X
　　```

给外层div加上id，比如floatAd，这样一来关闭按钮和广告主体就联系起来了。

如果只追求最简方案，那连CSS文件都可以省了。全内联的写法虽然看起来乱，但对于不懂后端的小白站长来说，复制粘贴就能用，就是最适合的。不过要提醒大家，内联样式有个劣势，它没法响应式的调整位置。像现在的手机端访问，屏幕宽度就那么大，20像素的边距加上可能300像素宽的广告盒子，整体就会挤占视野。所以要考虑响应式，可以用media query来写媒体查询，在屏幕宽度小于某个阈值时自动缩小广告尺寸或者干脆隐藏掉。

之前我帮朋友处理过一个电商站，他们那个广告代码是直接放在主题文件footer.php里的。那段时间流量起来了，访问量高的时候广告的加载会拖动整个页面的加载速度，很影响体验。后来琢磨出一个办法，利用JavaScript的异步加载特性，等页面主体DOM全部渲染完成之后，再动态创建一个script标签插入到文档尾部，这样广告加载就不会阻塞首页的渲染了。代码的原理大致是：

```javascript
　　window.onload = function() {
　　 var adBox = document.createElement(''div'');
　　 adBox.innerHTML = ''这里放广告联盟的代码'';
　　 document.body.appendChild(adBox);
　　}
　　```

注意这里内嵌的广告字符串里如果有引号，要记得转义，不然经常会在运行时报错。

针对WordPress这种建站系统，有个比较取巧的路子。有些主题自带了一个叫“自定义代码”的功能区域，把HTML代码直接贴进去保存，前台就会生效。不过很多便宜的主题没这个功能。那还可以走小工具路线，找一个支持文本模块的小工具位，比如侧边栏，然后在文本模块里输入代码。因为CSS定位是相对于浏览器窗口的，所以哪怕你把它放在页脚模块或者侧边栏模块里，最终呈现的位置依然是画面右下角。这个原理弄清楚后，根本不用去动主题的PHP文件，操作难度大大降低。

关于像素数值的选择，这里有点小建议。广告离右下角的边距别设成0，那样贴着边缘有点拥挤，视觉上也比较突兀。右边距20到30像素，下边距20到30像素是比较舒服的区间。不过要注意如果网站本身就在右下角挂了客服对话窗口或者返回顶部按钮，那最好把广告位置抬高一点，或者错开，不然两个盒子重叠在一起，点起来会打架，用户会很恼火。

另外一个容易踩的坑是层级问题。如果你的网站上还有其他悬浮的弹窗，都是用了position定位，那可能会出现广告遮住弹窗的情况。这时候就需要调整z-index值。普通广告设个999就够了，如果设置得太高，比如999999，可能会遮盖掉一些浏览器原生的提示框，某些情况下很难看。

代码插好以后，验证是否生效有简单方法。直接按F12打开浏览器的开发者工具，在Elements面板里查找一下你写的那个div的id名称，如果能找到并且样式计算里显示了position：fixed，那说明代码已经被页面加载了。接着把浏览器窗口缩小到手机模式，再观察一下广告是否出现了变形或者超出屏幕边界的情况。

还有一点，做一个记忆功能会提升投放的转化率。所谓记忆就是指用户关掉这个广告之后，在同一个浏览器会话里不再重复出现了。存储这个状态的容器可以选用localStorage。实现起来的思路大致是，页面加载的时候先去检查一下本地存储值，如果标记是closed，那就把display设为none，不展示广告。只有当关闭按钮被点击时，才写入一个带时间戳的标记。这样既实现了不扰民，又能让老用户在一定周期后重新看到新的活动内容。

广告素材本身也有讲究。一个张闪来闪去的GIF图固然吸睛，但也会引起不少人的反感。优选色彩偏柔和，跟网站主色调配套图的素材，这样点击率反而比花花绿绿的图片高不少。同时图片的体积尽量控制在80KB以内，太大了会加重移动网络下的流量消耗，也会拖慢页面速度。

这样一套组合拳下来，右下角那个小小的角落就算被盘活了。不仅在视觉上找到了合适的生存空间，也让运营者能安心地在后台调整自己的推广策略。大家动起手来去试试，如果中间哪里有报错，仔细检查一下引号和括号是不是英文状态下的，八成问题都出在这些细节上。