轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / 社交平台分享自定义javascript组件

社交平台分享自定义javascript组件

阅读：26355 评论：7 作者：ivan 分类：JQuery、Web前端、授人以渔

前言

社会化媒体赋予了每个人创造并传播内容的能力。社会化分享量可以间接说明该页面内容受欢迎的程度，对用户筛选搜索结果能够起到很好的辅助作用。目前常用的社会化分享媒体主要有QQ空间、新浪微博、微信、腾讯微博、人人网等。

社会化分享简介

社会化分享，是指在中，基于其分享功能，将信息网络化输入输出，加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等，是可以常见到的社会化媒体形式。在国内近两年，社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。

社会化分享工具

常用的社会化分享工具，都支持自定义按钮风格、代码嵌入等功能，使用起来简单方便。

推荐的有：

百度分享：http://share.baidu.com/

加网：http://www.jiathis.com/

自定义JS组件

简介

demo地址：http://xuanfengge.com/demo/201404/share/

Github地址：https://github.com/xuanfeng/sns_share

为何有了以上方便的工具，还要自己写组件呢？

  • 需要嵌入指定代码，打开页面时需要加载其他网站的资源
  • 可以自定义的分享的文字、图片
  • 支持微信（二维码）、新浪微博、腾讯微博、人人网、QQ空间

asdcasd

如何使用

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="sns_share" class="cf">
        <span class="sns_share_to fl">分享到：</span>
        <a class="share_weixin share_icon fl" href="javascript:;" title="查看本文二维码，分享至微信"><em>二维码</em></a>
        <a class="share_tsina share_icon fl" href="javascript:;" title="分享到新浪微博"><em>新浪微博</em></a>
        <a class="share_tqq share_icon fl" href="javascript:;" title="分享到腾讯微博"><em>腾讯微博</em></a>
        <a class="share_renren share_icon fl" href="javascript:;" title="分享到人人网"><em>人人网</em></a>
        <a class="share_tqzone share_icon fl" href="javascript:;" title="分享到QQ空间"><em>QQ空间</em></a>
 
        <div class="wemcn" id="wemcn">
             <div id="ewm" class="ewmDiv clearfix">
                <div class="rwmtext">
                    <p>扫一扫，用手机观看！</p>
                    <p>用微信扫描还可以</p>
                    <p>分享至好友和朋友圈</p>
                </div>
             </div>
            <a class="share_icon" href="javascript:void(0)" id="ewmkg"></a>
            <i class="ewmsj share_icon"></i>
        </div>
 
    </div>

xuanfeng_sns_share.js组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
(function($) {
 
    $.fn.xuanfengSnsShare = function(options){
 
        var defaults = {
                tsina:{//分享到新浪微博
                    url : encodeURIComponent(window.location.href),//分享的url默认是当前页面
                    title : document.title,//分享的内容默认是当前页面的title
                    appkey : appkey,//新浪微博的appkey
                    pic : 'img-src'    //默认图片
                },
                renren:{//分享到人人网
                    resourceUrl: encodeURIComponent(window.location.href),
                    srcUrl : window.location.href,//分享的url默认是当前页面
                    title : document.title,//分享的内容默认是当前页面的title
                    appkey : appkey,//人人的appkey
                    pic : 'img-src'    //默认图片
                },
                tqq:{//分享到腾讯微博
                    url : encodeURIComponent(window.location.href),
                    title : document.title,//分享的内容默认是当前页面的title
                    appkey : appkey,//腾讯微博的appkey
                    pic : 'img-src'    //默认图片
                },
                tqzone:{//分享到QQ空间
                    url : encodeURIComponent(window.location.href),
                    title : document.title,    //分享的内容默认是当前页面的title
                    appkey : appkey,//腾讯微博的appkey
                    pic : 'img-src'    //默认图片
                }
            },
            settings = $.extend(true,{}, defaults, options),
            shareIconName = {
                tsina : '新浪微博',
                renren : '人人网',
                tqq : '腾讯微博',
                tqzone: 'QQ空间'
            },
            shareUrl = {
                tsina : 'http://service.weibo.com/share/share.php?url={url}&title={title}&appkey={appkey}&pic={pic}',
                renren : 'http://widget.renren.com/dialog/share?resourceUrl={resourceUrl}&srcUrl={srcUrl}&title={title}&appkey={appkey}&pic={pic}',
                tqq : 'http://share.v.t.qq.com/index.php?c=share&a=index&url={url}&title={title}&appkey={appkey}&pic={pic}',
                tqzone : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&pics={pic}&title={title}&summary=快带上你的浏览器来弹钢琴吧，欢乐体验'
            };
 
        return $(this).each(function(){
 
            function openWindow(str){
                return function(){
                    window.open(formatmodel(shareUrl[str],settings[str]));
                };
            }
 
            function formatmodel(str,model){
                for(var k in model){
                    var re = new RegExp("{"+k+"}","g");
                    str = str.replace(re,model[k]);
                }
                return str;
            }
 
            for(snsName in settings){
                var text= encodeURIComponent(settings[snsName].title);
                settings[snsName].title = text;
            }
 
            for(sns in shareUrl){
                $(".share_"+sns).off().on('click', openWindow(sns)).attr("title","分享到"+shareIconName[sns]).attr("href","javascript:;");
            }
 
        });
    };
})(jQuery);

组件初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script src="js/jquery.js"></script>
<script src="js/xuanfeng_sns_share.js"></script>
<script>
$(function(){
    var shareTitle = $(".post_title h1").text()+"轩枫阁";
    var sinaTitle = '分享文章 「' + shareTitle + '」 （分享自@轩枫Y_me）',
        renrenTitle = '分享文章 「' + shareTitle + '」（分享自@农航亮(356948827)）',
        tqqTitle = '分享文章 「' + shareTitle + '」（分享自@轩枫阁）',
        tqzoneTitle = '分享文章 「' + shareTitle + '」-轩枫阁（分享自@♪紫轩枫、）';
    var picShare = encodeURIComponent($(".post_title").data("thumb"));
 
    $('body').xuanfengSnsShare({
        tsina:{
            url : encodeURIComponent(window.location.href),
            title: sinaTitle,
            pic: picShare
        },
        renren:{
            url : encodeURIComponent(window.location.href),
            title: renrenTitle,
            pic: picShare
        },
        tqq:{
            url : encodeURIComponent(window.location.href),
            title: tqqTitle,
            pic: picShare
        },
        tqzone:{
            url : encodeURIComponent(window.location.href),
            title: tqzoneTitle,            
            pic: picShare
        }
    });
 
    // 微信分享    
    $(".share_weixin").click(function(){
        $("#ewmimg").remove();
        var thisURL = window.location.href,
            strwrite = "<img id='ewmimg' class='ewmimg' src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' />";
        $("#ewm").prepend(strwrite);
        $("#wemcn").show();
    });
    $("#ewmkg").click(function(){
        $("#wemcn").hide();
    });
 
});
</script>

微信分享

1
2
3
4
5
6
7
8
9
10
11
// 微信分享    这里用了Google的二维码API，所以有时候会打不开
$(".share_weixin").click(function(){
    $("#ewmimg").remove();
    var thisURL = window.location.href,
        strwrite = "<img id='ewmimg' class='ewmimg' src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' width='85' height='85' alt='轩枫阁文章 二维码分享' />";
    $("#ewm").prepend(strwrite);
    $("#wemcn").show();
});
$("#ewmkg").click(function(){
    $("#wemcn").hide();
});

创建社会化媒体Appkey

新浪微博：http://open.weibo.com/development/canvas

腾讯微博：http://dev.t.qq.com/developer/insite/

人人网：http://dev.renren.com/app

QQ空间：http://op.open.qq.com/index.php

结尾

如果能看到这，说明很耐心，所以要做出这样的组件，也请耐心的完成各大社交工具的API创建，一步一步完成，相信你会受益~

238/470
240/470

相关阅读

文章评论

  • 崔小可

    2014 年 6 月 3 日 下午 4:45
  • 服装品牌策划

    这个效果很好，值得赞扬

    2014 年 5 月 27 日 上午 9:17
    • 轩枫

      我觉得UI还是挺不错的，而且自己实现，想填什么文字就是什么文字

      2014 年 5 月 27 日 下午 6:31
      • 服装品牌策划

        是啊，适合自己制作wordpress主题使用的

        2014 年 5 月 28 日 上午 8:26
  • 有病自媒体

    博主交换友情链接吗，我是原创自媒体类型博客，每天坚持更新哦，谷歌秒收录，嘿嘿，我只跟原创博客交换链接，我的地址是www.youbing.cc 如果您交换链接的话，直接把我链接做好在你网站首页，在我博客里面留言就OK。

    2014 年 4 月 25 日 下午 9:57
    • 轩枫

      不好意思，贵站建站年龄太短，不符合本站友链要求

      2014 年 4 月 25 日 下午 10:14
      • 有病自媒体

        有病自媒体，绝对不会让你失望

        2014 年 4 月 25 日 下午 10:25

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间