美文网首页
前端之三方分享

前端之三方分享

作者: 心淡然如水 | 来源:发表于2016-07-27 15:26 被阅读254次

    昨天因为调通了微信的js-sdk的接口,知道了它所谓的分享只能在微信浏览器里面使用,所以今天又开始找三方分享的代码,正巧偶遇一个非常nice的网站。让我不到半小时后就把三方分享全部搞定了 是不是很神奇了!!而且这个网站的sdk还是免费的!!是不是想知道呢!!!快点给宝宝点点赞吧 O(∩_∩)O哈哈~!!!

    现在我就来介绍一下这个网站的分享流程:

    首先我们登陆 


    Mob官网 - 中国最大的移动开发者服务平台 - ShareSDK官网 - 免费短信验证码 - ShareREC官网 - BigApp官网

    这个网址,然后点击

    首页这里进入到后台,添加应用!!

    一、添加应用

    先从http://mob.com/login登录(如无帐号请注册)

    添加新的ShareSDK应用,勾选“网页版”

    这样我们得到一个appkey

    二、插入代码

    把以下代码粘贴到您的网页中,可以在和的之间网页的任意位置放置,然后在代码中的script标签填写你的appkey

    这样就完成了,如果你还有什么不明白,可以继续翻阅文档。也可以在这里浏览我们提供的一个简单DEMO

    默认分享内容

    程序默认分享内容分别如下:

    链接:浏览器地址栏的地址

    标题:title标签的内容

    内容:meta[name=description]的内容

    图片:分享平台自行抓取的图片(实际分享的图片要看分享平台自已的逻辑处理)

    关于titlemeta[name=description]两个标签,它们被放在网页的head标签里面,一般情况下大部分网页都会有,如果你的页面没有,可以自行添加。

    标题

    如果你不想添加这两个标签,或者需要更灵活的配置,也可以使用我们提供的API接口,并且使用API接口定义的参数优先级是最高的

    微信分享请看这里

    自定义弹出效果

    通过增加-mob-share-ui元素的css类改变弹出效果

    默认效果 -mob-share-ui-theme -mob-share-ui-theme-scatter

    上边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-top

    下边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-bottom

    左边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-left

    右边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-right

    可查看DEMO演示

    自定义图标

    你可以在页面中使用css对平台图标进行修改,通过.-mob-share-平台ID(点击查看所有平台ID)定义类:

    /* 新浪微博 */

    .-mob-share-weibo{

    background-image:url(图标连接)!important;

    }

    /* 腾讯微博 */

    .-mob-share-tencentweibo{

    background-image:url(图标连接)!important;

    }

    /* QQ空间 */

    .-mob-share-qzone{

    background-image:url(图标连接)!important;

    }

    ...

    事件

    mobShare组件默认为一些元素绑定了点击(click)事件,你可以把这些ID放到自定义的网页元素中,以便更改UI,下面是事件列表

    ID动作

    -mob-share-open显示class为-mob-share-ui元素(打开分享界面)

    -mob-share-close关闭class为-mob-share-ui元素(关闭分享界面)

    -mob-share-weibo分享至新浪微博

    -mob-share-tencentweibo分享至腾讯微博

    -mob-share-qzone分享至QQ空间

    注:-mob-share-平台ID 表示分享至该平台(点击查看所有平台ID

    下面代码演示了只引入分享脚本的情况下,自定义一个按钮分享到新浪微博的例子

    自定义例子:

    分享到新浪微博// 实例一个新浪微博的分享对象

    var weibo = mobShare( 'weibo' );

    // 然后通过用户事件触发分享(浏览器限制原因,打开新窗口必需通过用户事件触发)

    // 原生js的使用方法

    document.getElementById( 'share_weibo' ).onclick = function() {

    weibo.send();

    }

    // jquery库的使用方法

    $( '#share_weibo' ).click( function() {

    weibo.send();

    } );

    想要查看自定义的分享方法请点击这里API!!!

    希望本片博客可能帮助到那些需要帮助的人!!!

    每天更新学到的东西!学无止境!!!!

    本文根据 Mob官网书写 !!!!致敬!!!!

    相关文章

      网友评论

          本文标题:前端之三方分享

          本文链接:https://www.haomeiwen.com/subject/trmojttx.html