Skip to content

Detailed Installation

philipbjorge edited this page Jul 29, 2012 · 1 revision

#Installation ##Database + Server Create a database (or use an existing one).

Create the archive table.

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

Modify config.php's mysql settings to point to your database.

Create and/or chmod the cache folder to be writable by your server (755).

Chmod the config file to 640.

##RSS Feeds New feeds can be added to the application by modifying the $apis array in config.php

Simply add a new entry to incorporate it in your feed.

"github" => array(
    "user" => "philipbjorge",
    "url" => "http://atom2rss.semiologic.com/?atom=https://github.com/{USER}.atom"
),

The key "github" is used as a CSS identifier. The url is the RSS feed, where {KEY} tags are replaced by the corresponding key in the array. So,

http://atom2rss.semiologic.com/?atom=https://github.com/{USER}.atom

becomes

http://atom2rss.semiologic.com/?atom=https://github.com/philipbjorge.atom

##Your Page The file demo.php provides a good minimal example of the requirements.

In your head, you need HTML5Shiv and the social wall stylesheets.

<!--[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">

In your body, you need the container and PHP include.

<div id="social-container" class="variable-sizes clearfix infinite-scrolling">
    <?php require_once('get_stream.php'); ?>
</div>
<div id="new-content"></div>

Below that, you need the supporting javascript.

<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>

###Customizing CSS

  1. Customizing of the actual content boxes can be found in isotope.css
  2. Customizing of specific feed themes can be found in networks.css. Class names are assigned to content boxes based on the key in your $apis variable in config.php