实战经验分享:怎么在自己的网站里面调用第三方网站的页面内容

yumo6663个月前 (04-26)技术文章23

今日,站长在线(olzz.com)的首页右侧边栏里面,有一个是【mip验证】的工具入口,其实我在其他网站也放了这个入口,但是不同的是,以前的页面入口是直接链接到百度mip官方的页面检测地址的,而今天,我这个网站的页面地址改成自己的网站地址,为:https://www.olzz.com/mip/

使用这样做的方法显著的好处就是,可以把网站的流量放在自己的网站里面,知道使用这个工具的人有多少,一样的使用效果,却给自己带来更多的浏览量,何乐不为呢?



接下来,站长在线的站长就开始,对代码进行尝试添加了:

1、确立MIP标准。因为站长在线的主站是mip技术的,所以我想在这个新建的内页也使用mip技术,所以首先制作一个index.html的静态的MIP单页面,然后把mip技术的标准页面的空白文件制作出来,代码我就是不一一解释怎么来了,直接上代码了:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="当前mip页面地址">
<meta name="Author" Content="作者">
<meta name="Keywords" Content="关键词">
<meta name="Description" Content="页面描述">

</head>
<body>
 正文内容
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

空白文件制作好了,就开始填充内容,最后本页面里面,还要添加cnzz统计和百度统计。

1、添加百度mip检测的页面调用代码,并且让他居中显示:

<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>

2、添加cnzz统计、百度统计的代码。

<mip-stats-cnzz token="1278700007"></mip-stats-cnzz><!--cnzz统计ID-->
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu><!--百度统计ID-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->

3、合并所有代码,完整的代码如下:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP页面检测,查看是否符合百度mip页面标准</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="https://www.olzz.com/mip/">
<meta name="Author" Content="杨泽业">
<meta name="Keywords" Content="mip,mip检测,MIP页面检测">
<meta name="Description" Content="这是由站长在线站长杨泽业手工开发的mip页面检测网页,通过本页面的检测,可以让你知道你的网站,是否符合mip页面的技术标准">
</head>
<body>
 <div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz>
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu>
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

总结:通过本内容的学习,可以让你知道,怎么在自己的网站里面调用第三方网站的页面内容,新手朋友们自己亲自实践一下,举一反三,让自己的建站水平稳步提升。

欢迎关注站长快递头条号,一起学习建站知识,一起成长!

相关文章

用CSS实现居中的七种方法

微信ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)● ● ●在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是...

css之div内容居中

div中的内容居中显示,包括水平和垂直2个方向。<html> <head> <style type="text/css">...

CSS 元素分类与水平居中

元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。常用的内联元素有:<a>...

用CSS 实现元素垂直居中,有哪些好的方案?

水平居中方案:水平居中设置1、行内元素设置 text-align:center2、定宽块状元素设置 左右 margin 值为 auto3、不定宽块状元素a:在元素外加入 table 标签(完整的,包括...

网页设计HTML零基础入门

一、Html概述Html是Hyper Text Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标...

JAVAEE前奏-今天带大家认识HTML!高手勿进。

接上篇内容。上次介绍了整个课程,目的是告诉大家学习路线,不要偏了。今天开始慢慢告诉大家这些课程的重点。也就是需要学些什么有用的东西,那些没用的可以先不要去学习,等学到一定程度了,再慢慢去挖掘。首先开始...