Infinite-Social-Wall是一個基于PHP和Mysql的開源應(yīng)用,主要用來幫助你使用pinterest.com的界面風(fēng)格來展示各類社交網(wǎng)站的事件信息。
這個應(yīng)用通過指定的RSS來抓取社交網(wǎng)站內(nèi)容,并且擁有Twitter,Reddit,Instagram,Github等的內(nèi)建樣式和圖表。
使用免費的mysql服務(wù)器作為存儲的后臺,這樣就不需要每次都解析feeds。前臺使用Isotope插件來生成動態(tài)布局,并且可以生成無限滾動特效。
如果你需要自己創(chuàng)建一個類似的社交類自動更新網(wǎng)站,這個免費的應(yīng)用肯定是不錯的選擇。
類庫支持:
1.Isotope - 個人和非商用免費
2.Infinite-Scroll - MIT License
3.jQuery - MIT License
4.SimplePie - BSD License
5.jquery-timeago - MIT License
6.html5shiv - MIT License
7.css3 transition detection - Unknown
如何使用
創(chuàng)建數(shù)據(jù)庫表:
CREATE TABLE `archived_social_items` (
`id` varchar(32) NOT NULL,
`category` varchar(255) NOT NULL,
`title` text NOT NULL,
`content` text NOT NULL,
`link` text NOT NULL,
`date` datetime NOT NULL,
UNIQUE KEY `item_id` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1
修改config.php的mysql配置指向你的數(shù)據(jù)庫。
新的feed可以通過修改$apis數(shù)組添加到config.php。如下:
"github" => array(
"user" => "philipbjorge",
"url" => "http://atom2rss.semiologic.com/?atom=https://github.com/{USER}.atom"
),
添加樣式到header:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->
<link rel="stylesheet" type="text/css" href="css/isotope.css">
<link rel="stylesheet" type="text/css" href="css/networks.css">
在body中,添加容器和PHP include:
<div id="social-container" class="variable-sizes clearfix infinite-scrolling">
<?php require_once('get_stream.php'); ?>
</div>
接下來加入PHP支持:
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script src="js/jquery.timeago.js" type="text/javascript"></script>
<script src="js/jquery.infinitesocialwall.js" type="text/javascript"></script>
自定義CSS:
修改isotop.css,networks.css等css文件
來源:Pinterest.com界面風(fēng)格的社交展示web應(yīng)用:Infinite-social-wall