How to install Chirrup
Ready to install Chirrup for your blog or other page? Sweet. Let's get started.
A. Downloading and configuring Chirrup
- Download the latest Chirrup package from the Chirrup project page
- Unzip it into a temporary folder
- Open the file chirrup_config.php from the config folder within your temporary folder and alter the settings to suit your needs - primarily you will need to enter the username and password for your Twitter account.
B. Putting Chirrup online
- Follow your web host's instructions for uploading files, and put Chirrup wherever you want it to go. Chirrup will run either from a dedicated subdomain or from a sub-folder within an existing site. Note down the URL where Chirrup's folder will be accessible - we'll use http://chirrup.example.com/ in this example.
- If you are using Apache, Chirrup already contains a .htaccess file which will forbid visitors from peeking at Chirrup's XML cache. If you're using a web server other than Apache, you'll need to configure this yourself.
C. Putting Chirrup in your pages
Include the Javascript within the HEAD tag of your HTML page, like so:
<head> <title>This is my page what I am installing Chirrup on innit</title> <script type="text/javascript" src="http://chirrup.example.com/?js"></script> </head>Wherever you'd like to include a Chirrup block for displaying and posting comments (most likely at the bottom of your blog's article template), insert a javascript snippet like so:
<script type="text/javascript" src="http://chirrup.example.com/?ui&url=http://my.awesome.blog/a/long/url" charset="utf-8"></script>Wherever you want to include a smaller Chirrup block which simply shows the number of comments and links to a permalink page where you have included the full Chirrup UI, you can use the ChirrupPostCountUI class like so. The the url you give to Chirrup for the page URL will also be added as a link. This is intended to imitate a built-in comment system by providing a permalink showing the number of comments on an article at the bottom of the article on your blog's index (list) pages.
<script type="text/javascript" src="http://chirrup.example.com/?permalink&url=http://my.awesome.blog/a/long/url" charset="utf-8"></script>If you plan on styling Chirrup yourself in your CSS, you are now done. If you'd like to use the default CSS included with Chirrup, include the following block of code in the HEAD tag of your HTML:
<link rel="stylesheet" href="http://chirrup.example.com/?css" type="text/css" media="screen" charset="utf-8" /> <!--[if lte IE 6]> <link rel="stylesheet" href="http://chirrup.example.com/?css&m=ie6" type="text/css" media="screen" charset="utf-8" /> <![endif]--> <!--[if gte IE 7]> <link rel="stylesheet" href="http://chirrup.example.com/?css&m=ie7" type="text/css" media="screen" charset="utf-8" /> <![endif]-->