Displaying your blog’s feed on your web directory

In this guide I'll be showing you how phpLD directory owners can retrieve a list of posts from their blog and display them on their web directory. This easy to follow guide isn't limited to just phpLD so it can be used for sites powered by other scripts too.

We will be using the Feed2JS script to fetch the posts from your blog. Feed2JS works by fetching posts from your blog's feed. To start off, you'll first need to download a copy of Feed2JS to your computer from the following URL: http://eduforge.org/projects/feed2js/

Once you have downloaded the package, unzip it to a temporary location on your computer. You will then need to upload the feed2js to your Web Directory using FTP. Upload the feed2js folder to the root folder of your site (which is usually /public_html/, /httpdocs/ or /www/)

After you have successfully uploaded the folder, you will need to change permissions on few of them. Navigate to the folder feed2js/magpie. Over there you will need to change permissions on the folders 'cache' and 'cache_ut8' to 777

Now you will need to run the test file named magpie_debug.php located under the feed2js/ folder to see if everything is good. An example of how the URL to access that file looks like: http://www.example.com/feed2js/magpie_debug.php

You will need to see if the test script produces any errors. If not then you can proceed, or else you will first need to fix those errors. If you see no errors then you are done installing the script. You can now proceed to build the RSS feed that you will be using.

Building an RSS Feed

To build a feed you'll need to access the build.php file located inside the feed2js folder. Example:

http://www.example.com/feed2js/build.php

Enter the URL of your feed under the field labeled URL. Example of how a feed URL looks like: http://www.madmouseblog.com/feed/.

After entering the URL, you will need to configure the options as you like, and once you are done doing that you will need to click on the preview button. By doing this you will be able to get a preview of how your posts would look like. Confirm whether it looks the way you want it to be displayed. Once you have configured everything the way you like, click on the 'Generate JavaScript' button.

This will generate the JavaScript that you will need to integrate to your directory.

Integrating the Feed to your directory

This is the part that's relatively difficult as in compared to the previous ones. Every theme is different, so there would be no consistent procedure. Furthermore, because of this I'll show you how to display the posts just below your categories. After reading this method you should be able to move it to other parts of your site like the sidebar or near the footer.

Please make sure you make a backup of all files that you will be editing. Incase anything goes wrong, you will need to replace the modified file with the backup you had made of the original file.

You'll need to open your main.tpl file and find the following line of code:

{if $smarty.const.FTR_ENABLE == 1 and !empty($feat_links)}

Above that line, paste the following lines:

{if (empty($category.ID) && empty($list) && empty($search))}
<h3>Latest Entries from the Blog</h3>
<div id="feed2js">

After that, you will need to paste the code that was generated by the Feed2JS script. Example of how the code generated by it looks like is as follows:

<script language="JavaScript" src="http://www.madmouse.com/feed2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FSqueakys-Madmouse-Blog&amp;num=3&amp;desc=275&amp;utf=y" type="text/javascript"></script>
<noscript>
<a href="http://www.madmouse.com/feed2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FSqueakys-Madmouse-Blog&amp;num=3&amp;desc=275&amp;utf=y&amp;html=y">View RSS feed</a>
</noscript>

Once you have pasted that code, you will need to place the following right after it:

</div>
{/if}

So now, the code should look as follows:

{if (empty($category.ID) && empty($list) && empty($search))}
<h3>Latest Entries from the Blog</h3>
<div id="feed2js">
<script language="JavaScript" src="http://www.madmouse.com/feed2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FSqueakys-Madmouse-Blog&amp;num=3&amp;desc=275&amp;utf=y" type="text/javascript"></script>
<noscript>
<a href="http://www.madmouse.com/feed2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FSqueakys-Madmouse-Blog&amp;num=3&amp;desc=275&amp;utf=y&amp;html=y">View RSS feed</a>
</noscript>
</div>
{/if}

Save the file and refresh. You should now see a bunch of posts from your blog. If you would like to change the presentation of how the posts look like, you can do so using CSS. I will demonstrate few basic changes that you can make. Open your CSS file and add the following lines of code:


#feed2js li {
margin-bottom: 15px;
}
#feed2js a {
color: black;
text-decoration: underline;
}


What this does is, adds a margin space of 15px to the bottom of the post and changes the link of the post to black and underlines the text.

Additional comments: This can be easily modified to display your blogs feed on a website as well.

Hope this blog post was helpful to you, "Displaying your blog's feed on your web directory"

Naif.

1. Web Directory Submission Specials July 2009
2. A Good Foundation is needed to build a Successful, phpLD Directory
3. Easy Guide to installing PHP Link Directory
4. Madmouse Network – Offering Free Website Listings
5. How Do I get Listed in the DMOZ Directory?
6. Submit Your Site to Web Directories
7. Do Link Directories Offer Any Value for Link Building?
8. Using the Old Faithful of Link Building Tactics to Succeed!