百度分享代码指定分享图片和文字

最新推荐文章于 2024-08-05 08:06:47 发布

weixin_33985507

最新推荐文章于 2024-08-05 08:06:47 发布

阅读量346

点赞数

原文链接：https://my.oschina.net/tbd/blog/675938

版权

为什么80%的码农都做不了架构师？>>>

1.首先就是获取百度分享代码：

网址：http://share.baidu.com/code/

2.复制代码，我们只留下qq空间，并且添加2张网络图片

2个功能介绍：

输入图片说明

输入图片说明复制代码：

输入图片说明

3.整理一段代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>分享</title>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
		*{ margin:0; padding:0;}
		.bdsharebuttonbox{ margin:0px;}
		</style>
	</head>
	<body>

    <div class="bdsharebuttonbox">
    </a>[](#)
    </div>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"http://static.acg12.com/uploads/2015/08/d338720078a8177c2ca568e91f36e4e7-192x192.png","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

![](http://www.52tq.net/uploads/allimg/160329/1055241T5-2.jpg)

![](http://a3.att.hudong.com/76/40/01300000433093124829400788036.jpg)
	</body>	
</html>

4.测试

我们的页面：输入图片说明

输入图片说明

点击分享：发现什么都没有，我们还是在服务器环境下的测试。

在服务器下预览我们的静态页面，可以避免很多和js有关的问题，我利用的而是appsever集成环境（php+阿帕奇+mysql+php5），我们可以自行百度，非常简单。

5.发现

除了我们设置的按钮可以分享外，页面中的图片如功能介绍一样，都是自动hover时弹出分享操作，手机就是点击时弹出

6.问题

不管怎么修改，本地服务器去访问都是无效的，最后我利用手机，当然也可以其他一个同局域网设备（关闭防火墙），去访问是可以分享的，原因未知啊！

如何操作呢？首页是在一个局域网下，你可以让自己的pc做热点，然后手机连接，地址就是你本机地址+端口+项目名。如我的本机地址：http://localhost:8080/share/index.html

在cmd输入ipconfig回车，查看自己ip，我的是192.168.1.103

那么手机访问就是192.168.1.103:8080/share/index.html（必须在同一个局域网下）

7.服务器下，其他设备访问分享

我们在分享的配置参数做了设置：

输入图片说明

分享图片样子：

输入图片说明

分享代码的配置中：bdpic属性就是对分享指定图片的处理。

bdText指定分享文字，还可以找其他设置

8.推测

因为我们在config做了指定分享图片，我们假如可以分享了，那么不管是点击按钮和点击页面的图片都是分享指定图片了

9.结果

结果是完美的，我们配置的设置，仅仅是按钮分享指定的图片：输入图片说明

页面图片自己添加分享的在分享时也是抓取自身的：输入图片说明

10.总结

指定分享设置就是config的设置，至于页面图片自己被动加入的分享我们不用考虑。

11.移除页面图片自动添加的分享功能

输入图片说明

我们发现图片自动添加分享功能了：在配置里面我们会看到这个设置：

"viewSize":"16"

我们把他设置为0就可以移除图片自动添加分享处理：

<script>
        window._bd_share_config={"common":{
          "bdSnsKey":{},
          "bdText":"金点子",
          "bdMini":"2",
          "bdPic":"../../../../Resource/images/rent/jindianzi/bd_share.jpg",
          "bdStyle":"0",
          "bdSize":"16"},
          "share":{},
          "image":{"viewList":["weixin","tsina","qzone"],"viewText":"分享到：","viewSize":"0"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","tsina","qzone"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
      </script>

"viewSize":"0" 就可以了。输入图片说明