分享网页到各个社交平台的时候，网页的分享图设置

  •   
  • 3807
  • HTML
  • 0
  • super_dodo
  • 2017/12/27

现在网页分享到各个平台变得越来越简便和实用。类似Facebook Twitter等只需要贴入一个URL链接就可以把网页的内容以Tab图文的形式分享出去。

用心的开发者和产品需要为这篇文章设置一张独特的有意义的分享的图片ICON。分享出去的文字都是读取head里面的title字段，分享出去的图片一般都是读取内容部门的body里面的第一张图片。这个时候就需要对body里面的第一张图片作相应的处理。移除到可视范围之外。

具体参考下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分享出去的文字的标题--标题</title>
	<link rel="image_src" href="http://www.dodobook.net/share_image.jpg"/>
</head>
<body>
	<?php
	//TODO 提取你设置的分享图片地址
	$share_image = 'http://www.dodobook.net/share_image.jpg';
	?>
	<img src="<?php echo $share_image; ?>" style="position: fixed; left: 0; top: -1000px; width: 400px; z-index: -99999; opacity: 0;" alt="">
	//主要是利用CSS把这张图片移除到网页的可视范围之内--且此图为第一张图片

	<div id='header'>
	.....
	</div>

	<div id='main'>
	.....
	</div>

	<div id='footer'>
	.....
	</div>
	
</body>
</html>

你一定要相信，茫茫人海，一定有一个爱你的人，他正穿过人潮汹涌的城市，跋山涉水的来爱你。他总会来的，所以你要等。只有该结婚的感情，没有该结婚的年龄。希望我们，都能嫁给爱情。