最新消息：已制作 JS 调用版本，对 SEO 更加友好！请移步获取通用 JS 调用代码=>

Ps：使用方法依然如下，不会用的可以继续往下看看~~

2014 年 03 月 15 日推出的第一版互推联盟通用 iframe 代码，有以下三个遗留问题：

① 由于分类 tab 按钮没有做自适应 CSS，所以只能用于宽度大于 750px 的页面，不少博友留言说页面太小无法调用；

② 成员链接点开之后，标题会被强行重写成“互推联盟成员网站”，且地址栏一直是玛思阁博客网址，感觉点击就是给玛思阁增加 PV。。。（实际上，还真没有....），但我还是会听从意见，此次一并改善！

③ 手机访问调用页面无内容（已在手机主题中添加相关模板，此问题已解决）。

 一、完美自适应

问题 ①：今天我花了个把小时仔细看了下 CSS，并在网站开发同事的协助下，终于搞定了！已调用 iframe 的博友不用做任何修改!

iframe 代码依然如下，任意宽度页面均可调用（当然，太窄了也不美观嘛，宽度大于 620px 最佳）：

<iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

PS：此代码已失效！

二、链接跳转

问题②：互推联盟页面是用嗨酷哥的酷站导航源码做的，他对每个博客链接都用了一个 go 跳转的中间页，应该是为了避免 SEO 权重的流失吧！ 想想也是，总不能把这么多外链丢到我的博客，就算对调用 iframe 的博客可能也会有所影响，毕竟不是友情链接！所以这个跳转机制还是有必要的！

经过测试，最后拿掉了原始的中间跳转页面，自己重新做了个外链的跳转机制，类似于 anylink 插件，将所有外链输出为如下形式：

https://zhang.ge/bokehutui.php?http://www.site.cn

点击后直接跳至目标链接，而不会强行重写网站标题，测试了下，链接打开速度都所提高了！

四、调用方法

直接将上面的 iframe 代码插入页面模板相应位置即可！还可以根据需要加上边框线之类的样式。

下面具体说一下 WordPress 是如何添加的：

① 将主题下的页面模板 page.php 复制一份，并重命名一下（比如：htlm.php）（如果有留言板的博友，可以直接复制一份留言板即可），将以下内容加到顶部，如果已存在，直接修改冒号后的名称即可：

<?php
/*
Template Name: 互推联盟
*/
?>

② 在页面你想引用的位置插入上面的 iframe 代码，如果你的主题是定义了边框线的，也可以将此代码放入对应 DIV 里面，比如知更鸟就可以将代码放到<div class="entry_box_s_l"></div>之间，从而加上边框(请参考文章最后的实例代码)。

③ 建立新页面，输入页面名称，如“互推联盟”，并修改别名为拼音或英文，然后如下图在右侧页面模板下拉选择【互推联盟】,保存即可。

Ps：此页面宽度可以自适应拉伸，当然你也可以根据实际大小将width:100%改成你需要的宽度（建议大于 620px）

五、成功案例：

已升级为荣誉站点，所有调用代码制作页面的博客将会得到升级！

Ps：请至 https://zhang.ge/alliance 查看荣誉站点名单。

附：知更鸟主题实例参考代码

下面我给出一个知更鸟的实例页面代码，供大家参考：

Ps：知更鸟主题的博客可以直接复制保存为 php 文件丢到主题目录，然后新建页面选择互推联盟模版即可。

<?php
/*
Template Name: 互推联盟
*/
?>
<?php get_header(); ?>
<div id="map_box">
<div id="map_l">
<div class="browse">现在位置： <a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> ＞互推联盟</div>
</div>
<div id="map_r">
<div id="feed"><a href="<?php bloginfo('rss2_url'); ?>" target="_blank" title="RSS">RSS</a></div>
</div>
</div>
<div class="clear"></div>
<div class="entry_box_s_l">
<iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div class="clear"></div>
</div>
<div class="entry_sb_l">
<i class="lb"></i>
<i class="rb"></i>
</div>
<?php get_footer(); ?>

最后，有任何问题都可以留言反馈，多谢大家支持！