百度分享在新闻列表页分享多篇文章

解决的问题类似下面的截图

1.将下面的百度分享HTML放到你的文章循环体中

<div class="bdsharebuttonbox hide xian_<{$key}>" data-tag="share_<{$key}>">
 <a href="#" class="bds_more" data-cmd="more"></a>
 <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
 <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
 <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
 <a href="#" class="bds_mshare" data-cmd="mshare" title="分享到一键分享"></a>
</div>

上面的hide 、xian_<{$key}>的class类用来控制该段代码的显示与隐藏

2.下面是js代码（用js控制显示与隐藏还有要分享的文章路径）

function fenxiang(id,key){$(".bdsharebuttonbox").removeClass('show').addClass('hide')
   $(".xian_"+key).addClass('show')
   $("#artfenurl").val("<{url c=$mc a='artdetail'}>?id="+id);//设置路径
   //alert($("#artfenurl").val());
   var id = id;window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32","onBeforeClick" : function(id,config){return {"bdUrl":$("#artfenurl").val(),}}},"share":{}};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)];
}

分享方法在分享按钮上定义οnclick=fenxiang(); 如下：

3.我这里用的是input隐藏域来用js动态的更换要分享的文章链接

到这一步就大功告成了。

百度分享在新闻列表页分享多篇文章相关推荐

php新闻列表页模块,PHP开发简单新闻发布系统之新闻列表页整体功能实现
前面的章节我们说到了怎么实现简单的分页效果,这里我们就不再详细讲解了. 首先我们要把数据库中的新闻纪录展示出来这里我们需要用到select 字段名1 , 字段2 , -- from 数据表名来获取 ...
用vue2写一个新闻列表页，和新闻详情页，该怎么做？
首先,您需要安装Vue CLI并创建一个新项目.接下来,您可以使用Vue的单文件组件编写新闻列表页和新闻详情页. 新闻列表页: 在项目中创建一个名为"NewsList"的组件. 在 ...
利用 HBuilderX 制作新闻列表页以及制作注册页面
一.制作新闻中心板块样式实践任务:制作新闻列表页 1.在web2项目文件夹中,创建一个空白网页文件,命名为news.html 2.网页文件用于展示一些新闻标题的列表,其中包含标题标签和列表标签 3. ...
新闻列表页flex_C端列表页如何设计？
编辑导读:在C端产品设计中,数据列表页是非常常见的页面,它一般用来展示多条信息条目.虽然看起来十分简单,但也是不可或缺非常重要的页面.本文作者从产品使用场景出发,对列表页设计的设计重点和步骤展开了梳理 ...
[小程序项目] 使用微信开发者工具新闻小项目轮播图新闻列表页点击跳转新闻详情页登录获取用户基本信息
文章目录效果 Gitee 目录结构 app.json 首页 pages/news/news.wxml pages/news/news.wxss pages/news/news.js 配置网络请求 u ...
小程序分享给好友列表以及分享到朋友圈
小程序分享给好友列表效果图 <button class="menu"open-type='share'><image class="big_img& ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序搭建新闻列表(跟进上一篇博客案例)
本文旨在完善上一篇博客案例后台接口文档主要会用到的新语法罗列[ {发送请求篇:微信小程序如何向后端发送请求}, {页面跳转传递参数和接收参数:微信小程序页面跳转和接收参数}, {修改data中变量 ...
静态网页爬虫教程（5）带翻页的多篇文章内容提取和保存
这是我们静态页面爬取的最后一篇了,主要针对的问题是翻页爬取. 先来观察一下翻页后的新页面地址是什么吧,我们可以看到,新页面的地址的设置很简单,就是改了个序号,第一页是1.shtml,第二页是2.sht ...
新闻列表页flex_使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-cont ...

百度分享在新闻列表页分享多篇文章

百度分享在新闻列表页分享多篇文章相关推荐

最新文章

热门文章