添加分享

以下案例,均可直接复制到html中,运行看结果,可直接修改应用

bshare分享

<!-- ---------------------------单独按钮分享---------------------------- -->

<!-- 引用插分享插件 -->
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh&text=123"></script>
<!--

* src,#后面的参数为不同的选项(可选),参考:http://www.bshare.cn/help/apiJsParams

* 个人用了一下,没有太大的意义,我们没有uuid,有些应用了但是没有效果,可能用法不对,大家可以一起看一下

-->
<h1>单独按钮分享</h1>
<div class="share">
     <!--
          * 自定义的分享按钮
          * 其他分享的代码:http://www.bshare.cn/help/platformNames
     -->
    <a href="javascript:;" onclick="bShare.share(event,‘qzone‘,1);return false;">
        <img src="http://i0.letvimg.com/pay/201504/27/1027/qqzonebg.png"/>
    </a>
    <a href="javascript:;" onclick="bShare.share(event,‘weixin‘,1);return false;">
        <img src="http://i2.letvimg.com/pay/201504/27/1027/weixinbg.png"/>
    </a>
    <a href="javascript:;" onclick="bShare.share(event,‘sinaminiblog‘,1);return false;"/>
        <img src="http://i2.letvimg.com/pay/201504/27/1027/sinabg.png"/>
    </a>
    <!-- 更多平台按钮,(可选择选择性添加) -->
    <a title="更多平台" onclick="javascript:bShare.more(event);return false;" style="cursor:pointer;color:#000;"/>
        <img src="http://static.bshare.cn/frame/images/logos/s4/more.gif" style="height:16px; width:16px; vertical-align:middle;"/>
        <span style="padding-left:2px; vertical-align:middle;">更多平台</span>
     </a>
     <!-- 添加分享次数 (可选择选择性添加)-->
   <span class="BSHARE_COUNT" style="font-size:24px;">0</span>
</div>
<!--
     * 自定义分享链接、标题、摘要及图片等内容
     * 参考:http://www.bshare.cn/help/customShareContent
     * title: "分享的标题,默认为当前页面标题",
     * url: "分享的链接,默认为当前页面URL",
     * summary: "分享的文本摘要,默认为页面Meta标签中description的内容或者用户高亮的内容",
     * pic: "指定分享的图片的链接,目前支持新浪微博,QQ空间,搜狐微博,网易微博,人人网, * 嘀咕,腾讯微博和做啥。"
-->
<script type="text/javascript">
     bShare.addEntry({
         title: "羽泉2014北京圣诞演唱会",
         url: "http://www.letv.com",
         summary: "加入3个月乐视会员,不仅能看《羽泉2014北京圣诞演唱会》,还可领取官方何以礼品",
         pic: "http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg"
     });

</script>

<!-- ---------------------------单独按钮分享end---------------------------- -->

<!-- ---------------------------一键分享 ---------------------------------- -->
<!-- 引用插分享插件 -->
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bsync.js#style=-1"></script>

<h1>一键分享</h1>
<!-- 参数
     * url     可选。分享的链接,默认为当前页面URL。
     * title     可选。分享的标题,默认为当前页面标题。
     * summary     可选。分享的文本摘要,默认为页面Meta标签中description的内容或者用户高亮的内容。
     * pic     可选。图片分享中默认被选中的图片。默认为页面图片中的第一张。
     * pics     可选。分享的图片链接,默认为页面中的图片。
-->
<div class="bsync-custom icon-medium-blue">
     <a title="一键分享到各大微博和社交网络" class="bshare-bsync" onclick="javascript:bSync.share(event, ‘bsharesync‘, {
          url:‘http://www.letv.com‘,
          title:‘羽泉2014北京圣诞演唱会‘,
          summary:‘加入3个月乐视会员,不仅能看《羽泉2014北京圣诞演唱会》,还可领取官方何以礼品~‘,
          pic:‘http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg‘
          })">
     </a>
     <!-- 添加分享次数 (可选择选择性添加)-->
     <span class="BSHARE_COUNT bshare-share-count">0</span>

</div>

<!-- ---------------------------一键分享end ---------------------------------- -->

百度分享

<!-- ---------------------------百度分享---------------------------- -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度分享</title>
    <style type="text/css">
        /*再样式上自定义默认按钮图片*/
        .bdshare-button-style0-16 a.bds_tsina{
            background-position: 0 0;
            background: url(http://i0.letvimg.com/pay/201504/27/1027/qqzonebg.png) no-repeat;
            width:52px;
            height:52px;
        }
    </style>
</head>
<body>
<!--
百度分享较为简单,大家可直接到
http://share.baidu.com/code/advance参考
-->
<!-- 分享按钮 -->
<div class="bdsharebuttonbox">
    <a href="#" class="bds_qzone" data-cmd="qzone"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina"></a>
    <a href="#" class="bds_tqq" data-cmd="tqq"></a>
    <a href="#" class="bds_renren" data-cmd="renren"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
<!--
common : {
    bdText : ‘自定义分享内容‘,
    bdDesc : ‘自定义分享摘要‘,
    bdUrl : ‘自定义分享url地址‘,  
    bdPic : ‘自定义分享图片‘
}, -->
<script>
    window._bd_share_config = {
        "common": {
            "bdText": "hello123456",
            "bdDesc":"111",
            "bdUrl":"http://www.letv.com",
            "bdPic": "http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg",
        },
        "share": {
        },
        "image": {"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到:", "viewSize": "16"},
        "selectShare": {"bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]}
    };
    document.body.appendChild(document.createElement(‘script‘)).src = ‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~(-new Date() / 36e5);
</script>
</body>

</html>

时间: 2024-10-01 06:25:27

添加分享的相关文章

微信公众平台开发之在网页上添加分享到朋友圈,关注微信号等按钮

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮. 一.微信浏览器 通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享 由于目前微信并没有提供这个按钮的官方支持,很多人问我们这个按钮是如何实现的,其实很简单,我们把我们实现的方法分享给大家,希望对那些想在网页端加这个按钮的人有所帮助. 下面是代码(相关参数请自行修改): function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { alert("请先通过微信搜索 添加分享组件提供商友推为好友,通过微信分

hexo next主题为博客添加分享功能

title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 --- 今天心血来潮,决定给博客添加分享功能,百度上首先是找到了使用shareSDK的分享功能,最后在实践的过程中发现它添加时步骤比较多,添加完成后效果比较丑(就是一个长条的浅蓝色按钮),而且点击后想要退出分享比较麻烦(它的取消按钮实在太难找了,它在页面最下方的位置,呈现浅灰色,这个设计太反人类了

分享到微博代码,添加分享窗口关闭回调

<html><head> <title> 分享到微博代码,添加窗口关闭回调 </title></head><body><div id="click">分享到微博</div><script> var shareWindow;//分享窗口 document.getElementById("click").onclick = function () { var ur

Qt on Android:添加分享功能

前几天(2015-4-15)看到老外的一篇文章,讲如何使用 Qt on Android 来向社交网络分享信息,使用 Qt 提供的 JNI 功能来实现,和我之前写的 QtAndroid 详解系列文章很搭啊,特此翻译过来. 原文在这里:Sharing with Qt on Android .是 2014 年 12 月 12 日的文章,恨不相逢未嫁时--Sigh,又胡扯了--还是 Google 强大,可以搜索到好东西. 原文作者 zagge ,译者foruok(http://blog.csdn.net

在网页中添加分享到微信、QQ、微博

参考地址:http://www.bshare.cn/help/installAction 在上面的地址中: 1.可选择分享到的位置,如QQ.微信.微博等 2.按钮的样式.悬浮或者以横幅的方式自己找位置放

微信小程序之分享,动态添加分享数据

1.效果: 2..js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; return { title: that.data.common.act_name, desc: that.data.common.introduction, path: '/pages/xiangqing/xiangqing?id='+that.data.id, success: function

android 集成系统分享和第三方分享案例

现在很多的应用基本都会集成分享这个功能,该功能包括系统分享(比如邮件,短信)和第三方分享(比如QQ和微信).其中有些公司会选择使用第三方的库来简化这些操作,加快开发,用的比较多的比如友盟社会化分享SDK,缺点就是自由度太低,因为可能你仅仅只是需要QQ和微信,其他的公司就会选择自己导入所需要的第三方SDK来自定义分享功能,自由度高,于是这篇博客主要来介绍后一种自定义分享功能的案例demo,下图是demo的运行效果: 具体分析一下源码,由于分享的内容根据需求的不同而不同,为了简单起见,我们就以最常用

html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件

<!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=0;" />     <title>后盾网视频教程之滑动轮