irinArt: jquery

Saturday, September 21, 2013

Including a file via Javascript (with jQuery)

When the website you're developing is big enough it will be most annoying to copy paste the "header" and "footer" code parts every time on every page. If you are using a server-side language like PHP you really don't have a problem - just do

<? include('header.html'); ?>

But what if the site you're developing has very many pages but they are all really simple - to the point that you can't really justify using a server side language? Common issue.

With javaScript you can't really include a file but you can "load" a file into a div, paragraph, or whatever else. When it comes to javaScript, I ALWAYS use jQuery for web-page development. So we need to include that first.

<html>
<head>
<script type="text/javascript" src="inc/js/jquery.min.js">
  </script>
<script>
      $(function(){
  $("#headerDiv").load("header.html");
            });
</script>
</head>
<body>

...
  <div id="headerDiv"></div>

</body>
</html>

Simple, clean, nice, makes me happy... if it is not working for you I'm going to guess that you are using Chrome and developing locally. It's a Chrome thing - they don't let you do that for security reasons. Just upload your file to the server and test it out - it will work like a charm (in Chrome, too).

What's even better, you can keep your site menu in a separate file as well - this way if the customer requests some changes or asks to add a menu item or you simply made a mistake - you will only have to edit the menu file instead of each and every of the 100 pages you have.

You can argue that the menu might be slightly different on every page - the current menu item needs to be highlighted / different from others. also not a problem - include your menu file, then use .addClass().

I always use Twitter Bootstrap as well, so for me i just do .addClass("active") on whichever <li> I need. You WILL have to add id-s to each and every menu item to do this correctly. It's a really small trade of in time compared to what you would spend if you weren't doing things in this sort of way.

Tuesday, March 5, 2013

Implementing RSS feeds on a website

Nowadays, regardless of a company or a person wanting to have a personal homepage they will still have a facebook page, twitter, blog, or something else - somewhere where they have been and will be posting updates and news about their product or services. That is also referred to as news feed or RSS (Rich Site Summary).

So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.

Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:

http://developers.facebook.com/docs/reference/plugins/like-box/

by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.

Instead you can use this link:

http://fbrss.com/

It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.

Now go here:

http://www.jquery-plugins.net/FeedEK/FeedEk.html

As you could've guessed from the link it's a jQuery plugin. Download it (will be a .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).

Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.

Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.

<script type="text/javascript">
        $(document).ready(function () {
            $('#divRss').FeedEk({
                FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
                MaxCount: 5,
                ShowDesc: true,
                ShowPubDate: true,
                DescCharacterLimit: 400
            });
        });
    </script>

Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).

And now wherever you want on your page the feed to show just make an empty div with the correct id:

<div id="divRss">
</div>

You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).

This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.

Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:

http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/

If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.