[JS]流布局方式展示你的社会化媒体

Sponsor

上次向大家分享了一系列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熟悉的话，你也可以自己定制一个，到时记得给大家分享哦！

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。