最新消息:已制作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(); ?>
最后,有任何问题都可以留言反馈,多谢大家支持!