莹晨网站设计
为北京传诚信旗下的网站建设高端品牌,专注于HTML5自适应网站建设及网站设计。

京ICP备05019839号
京公网安备 11010502031691号


目前还不支持新浪、QQ微博等国内社会化媒体,如果你对API和jQuery熟悉的话,你也可以自己定制一个,到时记得给大家分享哦!

上次向大家分享了一系列jQuery布局插件,今天也是和这些插件差不多,不同的是,它是用来展示你的社会化媒体信息,并且能像pinterest一样的流布局显示,该JS插件支持Twitter、Facebook、Google+、Youtube、Flickr、Tumblr等社会化媒体网站。

插件:Socialist

预览:Demo

下面看看使用方法:

STEP1.调用JS插件
这里要记得调用jquery库哦……

<link href="../jquery.socialist.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='../jquery.socialist.js'></script>

STEP2.HTML

这段代码是用来显示你的信息内容。

<div id="content"></div>

STEP3.Javascript
这里添加官方给出的js代码,这里只要更改对应的id即可。

<script type="text/javascript">
$(document).ready(function () {
    $('#content').socialist({
        networks: [
            {name:'linkedin',id:'buddy-media'},
            {name:'facebook',id:'in1dotcom'},
            {name:'pinterest',id:'potterybarn'},
            {name:'twitter',id:'in1dotcom'},
            {name:'googleplus',id:'105588557807820541973/posts'},
            {name:'rss',id:' http://feeds.feedburner.com/good/lbvp'},
            {name:'craigslist',id:'boo',areaName:'southcoast'}
        ]
    });
});
</script>

你还能自由定制显示的内容:

<script type="text/javascript">
$(document).ready(function () {
    $('#content').socialist({
        networks: [
            {name:'rss',id:' 你的RSS地址'},
        ]
    });
});
</script>

目前还不支持新浪、QQ微博等国内社会化媒体,如果你对API和jQuery熟悉的话,你也可以自己定制一个,到时记得给大家分享哦!

转载本文章请关注!网站建设选择北京莹晨设计www.itccx.com

 
QQ咨询 点我
咨询热线
400-697-8610
咨询热线
010-62199213