Pinterest.com界面風格的社交展示web應用：Infinite-social-wall

 

在線演示

Infinite-Social-Wall是一個基於PHP和Mysql的開源應用，主要用來幫助你使用pinterest.com的界面風格來展示各類社交網站的事件信息。

這個應用通過指定的RSS來抓取社交網站內容，並且擁有Twitter，Reddit，Instagram，Github等的內建樣式和圖表。

使用免費的mysql服務器作為存儲的後台，這樣就不需要每次都解析feeds。前台使用Isotope插件來生成動態布局，並且可以生成無限滾動特效。

如果你需要自己創建一個類似的社交類自動更新網站，這個免費的應用肯定是不錯的選擇。

類庫支持：

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

如何使用

創建數據庫表：

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配置指向你的數據庫。

新的feed可以通過修改$apis數組添加到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界面風格的社交展示web應用：Infinite-social-wall