The social bar itself however left more to be desired. It was an eyesore, appearing after every post on my site, and made me cringe at the fact that it relied on JavaScript to function. Luckily, I found an alternative in the form of their API docs.

You can see this for yourself in the social bar below this post. Check out the links as you hover over the images, they’re constructed exactly as I will show you here.

Finding the Link

The trick here is as simple as tweaking a URL.

http://api.addthis.com/oexchange/0.8/offer?url=URL

This is the most basic option of the API. It sends us to a page in which we can choose where we want to share the link. It’s good if you have a simple “Share This” button, but not if we want different links to specific social networks. Plus, we won’t get that analytics data.

In the above example, just replace URL with your page’s location.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net

Now we’ll add a title and user name. For this we add another two URL parameters. Just replace URL, title and user name like before.

http://api.addthis.com/oexchange/0.8/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

And lastly, where we want to specify where we are going to take the user we need to add forward/SERVICE/ into our link.

http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http://stephenmcintyre.net&title=Stephen+McIntyre&username=StephenMcIntyre

The link above will take you straight to Facebook, formatting the data to easily post the page up onto your wall.

A Simple Example

So, for a full implementation of this API we can use a list of hyperlinks like in my social bar, and styled how you like them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Twitter</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Facebook</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/digg/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Digg</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/delicious/offer?url=http%3A%2F%2Fstephenmcintyre.net&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Delicious</a>
  </li>
</ul>

For a full list of service tags to use in the SERVICE section of the URL, check out the service codes page on the AddThis docs. You can copy the short codes from each row, there’s loads to choose from.

More information on the sharing endpoints can also be found on there, which will help if you’re looking to dig further into the API.

One Last Thing

So as you can see, the links can get pretty long. If you’re inputting these manually, even a copy-paste job can be tedious, especially if you plan to go about dotting them all over your website.

The ideal situation then would be to generate these automatically, which can be done through PHP with some urlencode magic.

Also, if you’re using WordPress, then fetching the link and title is easy with get_permalink() and $post->post_title respectively.

I’ll be releasing a tool that utilises the AddThis API very soon, and adding some tutorials on here as to how it’s done, including some clever PHP.

Stay posted.

However, this forum post seems to be the only official documentation on what is a very interesting data feed, so it is with this reason that I decided to create this beginner’s tutorial on how to use it.

Since Kongregate is a website that hosts Flash games, this data would primarily be used to collect data into such games – like showing user badges embedded into a Flash dashboard. In this tutorial, I will take a different approach and show you how to collect that data in PHP and build your own activity stream.

All Badges Feed

Located at http://www.kongregate.com/badges.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "description": "Collect 100 squiggles and pwn 10 spiders",
  "users_count": 285194,
  "name": "Running Start",
  "games": [
    {
      "url": "http://www.kongregate.com/games/DrNeroCF/fancy-pants-adventure-world-2",
      "title": "Fancy Pants Adventure: World 2"
    }
  ],
  "icon_url": "http://cdn2.kongregate.com/badge_icons/0000/0367/world2easy.png?1242937128",
  "created_at": "2008/01/24 20:26:15 -0800",
  "points": 5,
  "difficulty": "easy",
  "id": 184
}

This is an example of an item from the list of game badges in the feed. It contains more than enough information to help make your own application. Each element is labeled so that you can index and call each item when you need to. Further down I’ll show you how to sort out the data in PHP.

User Badges Feed

Can be found at http://www.kongregate.com/accounts/USERNAME/badges.json, replacing USERNAME with your account login name.

1
2
3
4

{
  "badge_id": 184,
  "created_at": "2008/06/23 06:20:42 -0700"
}

A much simpler looking JSON string. A user’s badge feed only contains a list of badge IDs and the date and time that the user achieved them. All other data can be found on the global badge feed above, we just match up the IDs.

Grabbing the Data

Last week I showed you how to fetch page content using PHP. We can reuse the get_page_content method here to collect our information from Kongregate. Be sure to add this method above all other code in your PHP file, before adding the content from the box below.

1
2
3
4
5
6
7
8
9

$all_badges_content = get_page_content(
  "http://www.kongregate.com/badges.json");
 
$all_badges = json_decode($all_badges_content, true);
 
$user_badges_content = get_page_content(
  "http://www.kongregate.com/accounts/USERNAME/badges.json");
 
$user_badges = json_decode($user_badges_content, true);

This sets up two arrays ($all_badges and $user_badges) that we can use to loop through and match IDs.

Displaying the Content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

echo '<ol>';
foreach($user_badges as $badge)
{
  foreach($all_badges as $i => $global)
  {
    if($badge['badge_id'] == $global['id'])
    {
      echo
        '<li>'.
          '<a href="' . $global['games'][0]['url'] . '">'.
            htmlspecialchars( $global['name'], ENT_COMPAT, 'UTF-8' ) . ' Badge'.
          '</a>'.
          '<span>'.
            ' : ' . htmlspecialchars( $global['description'], ENT_COMPAT, 'UTF-8' ).
          '</span>'.
        '</li>';
        unset($badge[$i]);
        break;
    }
  }
}
echo '</ol>';

For each user badge in the $user_badges array we loop through our global badges to find a match and print an output of badge, link, and description to the page.

The break and unset in this code is useful for reducing memory usage on the script.

The break exits the current loop when the badges have been matched – since we won’t need to keep looking once we have found what we are looking for.

The unset removes the item from our list of all badges completely, since once it has been found once we won’t ever need to match it again since we can only have one of each badge.

Finishing Up

For a full copy-paste version of the code, feel free to skip to the end of this article, or view a demo page of this script.

Note: the demo page is a rendered example of the end result and does not update. For markup purposes only.

Also note that reading the JSON data directly from the server in this way is not recommended. For better use of this data, please store and manage the information within your own database setup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<?php
function get_page_content($url){
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $url);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  return $content;
}
 
$all_badges_content = get_page_content(
  "http://www.kongregate.com/badges.json");
 
$all_badges = json_decode($all_badges_content, true);
 
$user_badges_content = get_page_content(
  "http://www.kongregate.com/accounts/USERNAME/badges.json");
 
$user_badges = json_decode($user_badges_content, true);
 
echo '<ol>';
 
foreach($user_badges as $badge)
{
  foreach($all_badges as $i => $global)
  {
    if($badge['badge_id'] == $global['id'])
    {
      echo
        '<li>'.
          '<a href="' . $global['games'][0]['url'] . '">'.
            htmlspecialchars( $global['name'], ENT_COMPAT, 'UTF-8' ) . ' Badge'.
          '</a>'.
          '<span>'.
            ' : ' . htmlspecialchars( $global['description'], ENT_COMPAT, 'UTF-8' ).
          '</span>'.
        '</li>';
        unset($badge[$i]);
        break;
    }
  }
}
echo '</ol>';
?>

Their data output is most commonly formatted in RSS (for feed readers), and JSON (a lighter form than XML used a lot for AJAX). In this post I’ll show you how to use the cURL library to collect data from any public web page.

First, I’ve set up a function that will take in the URL you want to use as a parameter and returns the content of the page. This will make it easier later on, particularly if you want to call more than one page in a single script (like feeding Twitter and Facebook status updates into one stream).

Making a Connection

1
2
3
4
5
6
7
8
9
10
11
12
13

function get_page_content($url){
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $url);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  return $content;
}

Line 2: Initialises a cURL connection so we can start using it.

Line 4: Sets the URL.
Line 5: Sets headers to false, so that we don’t collect extra header data that we won’t use.
Line 6: Sets the return transfer to true. Without setting this, the script will output the content directly to the page, which we don’t want.

Line 8: Execute the connection using the options from lines 4-6 and store it into a holding variable. If we hadn’t set our return transfer to true, this would return empty.

Lines 10-12: Close connection to the URL and return the holding variable.

So, for example, we can collect JSON formatted data from a user’s latest Twitter updates:

Decoding the Data

1
2
3
4

$twitter_content = get_page_content(
  "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=_bigSteve");
 
$tweets = json_decode($twitter_content, true);

Where json_decode with its second parameter as true puts our data into an associative array.

We can then display this data as we usually would, looping through the elements:

Displaying the Text

1
2
3
4
5
6
7
8
9
10
11

echo "<ol>";
 
foreach($tweets as $tweet){
 
  echo "<li>".
    htmlspecialchars($tweet['text'], ENT_COMPAT, 'UTF-8').
    "</li>\n";
 
}
 
echo "</ol>";

The htmlspecialchars method in there is very useful for escaping special characters into their HTML entities, so should be used here since we are sending output to the web page.

After the text we want to output, I’ve found the other two parameters to be useful in most cases. You can change these if you get some strange characters.

So when you run the script on your own website, it will display an ordered list of Twitter updates onto the page. You can take the info above and convert it to use data from other APIs, using the get_page_content method we created in particular.

If you’re looking to parse XML documents like RSS feeds, then SimpleXML is a great library for that. When given the option though, it’s almost always best to go with JSON, so have a poke around for it in the API docs before you set off.

This tutorial will provide you with a very basic script to start using this great tool and covers what you need to get started.

First off, check out the Feed API demo that you will be creating.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul id="container"></ul>
 
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
var undefined;
var items = {};
var container = document.getElementById("container");
function Initialize(){
	var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/41298392.rss");
	feed.setNumEntries(5);
	feed.load(function(result){
		if(!result.error){
			items = result.feed.entries;
		}
	});
}
google.load("feeds", "1");
google.setOnLoadCallback(Initialize);
setInterval(function(){
	if(items[0] != undefined){
		var ipop = items.pop();
		var text = '<li>' + ipop.title + '</li>';
		container.innerHTML += text;
	}
},1000);
</script>

If it seems overwhelming, don’t worry. I’ll go over it bit by bit, it’s really easy to pick up.

Initialize

This is a custom method that takes in some data using the code from the first <script> tag.

The first line inside of this function declaration stores feed data into the feed object. Setting the parameter in the Feed method call will change what RSS data you use.

Line two sets how many items you want it to display, and the final section tells the script what to do once the data has been loaded into the variable. In this case, we want it to check that there are no errors and store our list of entries into the items variable.

load and setOnLoadCallback

The load method tells the Google API that we want to use the Feed functions, so we give it the parameters “feed” and “1″. The “1″ part is only used for collecting version numbers and isn’t too important.

setOnLoadCallback calls our Initialize method from earlier and processes it.

The fancy setInterval stuff

This section is just for eye candy and isn’t actually essential to using the API. It’s used to make the feed items display a second after each other in a list.

To start off we check if the item can be used, by checking if it isn’t undefined. We then remove an item from our list of items with pop and store this into ipop. The title attribute of this is then used as the text for the list item and added to our container list.

Finishing up

There we go, hopefully as simple as I said it would be.

Just remember that before you use this script, you should sign up for an API key and replace YOUR_API_KEY in the script tag with the key you’re given.

What I really like about this script is that it’s all handled (on our end at least) by one HTML document, and Google’s speedy servers handle the rest of it for us.

This is not a service to be abused however, as it has huge possibilities and there are millions of ways that applications could be built using it. With the issue of bandwidth and server load costs affecting a lot of amateur developers with big ideas, this is one less thing to worry about.

Note

The code above may only work if you have a properly formatted HTML document (i.e., all the header, doctype and body stuff). If you do have problems, try copying the code from the demo’s page source.

After you’ve checked out the parallax scrolling demo you can head back here to see how it’s written up.

I used jQuery for rapid prototyping, but naturally you can use regular JavaScript if you know the tricks to do so.

The Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#landscape, #grass, #verge, #window{
width:460px;
height:332px;
background-repeat:repeat-x;
background-position:0px 100%;
}
#landscape{
background-image:url('landscape.jpg');
}
#grass{
background-image:url('grass.png');
}
#verge{
background-image:url('verge.png');
}
#window{
background-image:url('window.png');
}

The first section sets height, width, background position and background repeat of the <div> elements that hold our backgrounds.

The other ID-specific sections set the background image you want to use for each part.

All CSS can be tweaked to suit your own project or how you see fit.

The Structure

1
2
3
4
5
6
7

<div id="landscape">
	<div id="grass">
        <div id="verge">
            <div id="window"></div>
        </div>
    </div>
</div>

All just divs inside divs here. Now, the interesting part.

The Scripts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	var xAdd = 0;
	var scrollInterval = setInterval(function(){
		xAdd++;
		if(xAdd >= 920){
			xAdd = 0;
		}
		$('#landscape').css('background-position',xAdd + 'px 100%');
		$('#grass').css('background-position',(xAdd * 2) + 'px 100%');
		$('#verge').css('background-position',(xAdd * 3) + 'px 100%');
	},10);
});
</script>

First line imports our jQuery file and does the usual running of it in the next script tag.

We then set xAdd = 0 – this will act as a counter to add to each background’s x-position and move the backgrounds horizontally behind the window.

Use the scrollInterval variable and setInterval method to set a function that calls every 10ms here. It’s a type of timer that will increment our xAdd every time it is called (10ms).

The if statement is a sort of garbage collector, resetting our number to 0 if it’s more than or equal to 920 (the maximum width of our images). It won’t break if you remove it, but it stops the number becoming unnecessarily high. Always good to keep these things in mind while you code.

The following three lines with the $ signs at the beginning allow jQuery to select our three div elements with the backgrounds in them. It then uses the .css() method to change their background position and creates the scrolling effect you see, since this is called every time the interval is run. There are also some multipliers on the xAdd variable in each one as mentioned earlier to speed up the closest objects.

So yeah, have fun with it. Just a little idea I had. Perhaps you can make better use of it than a simulation of a train journey daydream.

I dunno, surprise me. Let’s see what can be made of parallax scrolling in web pages. Interested to try this in a page header…

One method to do this in the past was to use target="_blank" that tells the browser to open the link’s href attribute in a new window. This, however, is deprecated in the Strict Doctype of W3C web standards so we should be trying to avoid using it whenever we can, and in this post I’ll show you exactly how it’s done.

Instead of using the target attribute, we can use rel to define the <a> tags in our HTML that we want to open in a new page. Since these are usually external pages, we will use the external keyword.

Raw JavaScript Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Open a <a href="new-window.html" rel="external">New Window</a> with W3C valid syntax
 
<script type="text/javascript">
 
var links = document.getElementsByTagName( 'a' );
 
for( var i = 0 ; i < links.length ; i++ ){
 
	var rels = links[i].rel.split(' ');
 
	for( var j = 0 ; j < rels.length ; j++ ){
 
		if( rels[j] == 'external' ){
 
			links[i].onclick = function(){
 
				window.open( this.href, '' );
 
				return false;
 
			};
		}
	}
}
 
</script>

Line 1: This is where we give the link a rel attribute
Lines 5-13: The script collects all <a> tags and loops through them, splitting up each space separated term and checking if they equal “external”
Lines 15-17: Sets the onclick attribute of the link to allow window.open to run and open a new window when the user clicks, containing the href value.
Line 19: Returns false to override the link’s default function, stopping it from opening a page of its own in the same window.

This can be run on any page that you have set your external links on and acts as a nicer, search-bot and standards friendly alternative.

jQuery Version

If your page is already using jQuery there is an even easier way to implement the code from above.

jQuery Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Open a <a href="new-window.html" rel="external">New Window</a> with W3C valid syntax
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
$( 'a[rel~=external]' ).click( function(){
 
	window.open( this.href, '' );
 
	return false;
 
} );
 
</script>

Much simpler.

I won’t go through the code on the jQuery example, but if you use the library, you should understand the selectors and methods I’ve used above.

The clever part is on line 7, where the selector finds all <a> tags with a rel attribute containing the “external” keyword, even within a space-separated list of words.

Bad practice

One way I’ve seen it done before is like this:

$query = mysql_query( "SELECT * FROM `users`" );
while( $row = mysql_fetch_assoc( $query ) ){
    $dob = strtotime( $row['dob'] );
    $joined = strtotime( $row['joined'] );
    if( $dob >= 0 ){
        $array[$joined] = $row;
    }
}
krsort( $array, SORT_NUMERIC );
array_slice( $array, 10 );
foreach( $array as $item ){
    echo 'Name: ' . $item['name'] . '';
    echo 'Join Date: ' . $item['joined'] . '';
    echo 'Date of Birth: ' . $item['dob'] . '';
    echo '';
}

Good practice

The alternative uses some SQL techniques to do all of that data sorting within the database query.

$dob_limit = date( 'c', 0 );
$query = mysql_query( "SELECT `name`,`joined`,`dob` FROM `users` WHERE `dob` >= $dob_limit ORDER BY `joined` DESC LIMIT 10" );
while( $item = mysql_fetch_assoc( $query ) ){
    echo 'Name: ' . $item['name'] . '';
    echo 'Join Date: ' . $item['joined'] . '';
    echo 'Date of Birth: ' . $item['dob'] . '';
    echo '';
}

As you can see, the latter script should look far simpler, is easier to write, and works much quicker and efficiently.

Note also that in the second script the fields after the SELECT statement have been specified rather than leaving a wild-card asterisk (*). The asterisk returns all data in the row that the SQL statement found a match in, and the more data we have in a row the more data could become redundant as we extract it.

For example, consider that the users table had extra fields containing first name, surname, website URL, small personal biography, home town, favourite film, favourite food, and so on. For each row you extract, all seven of those become unused pieces of data in the memory on your server and possibly even the computers of your users. Multiply that seven by each row in your database, then by how many times the query will be called, and things start to add up pretty quickly.

The point is then that if you start with a clear idea on what you actually need in order to use your script, you can be specific in what data you need to collect from your database. Doing so decreases your page load times and lowers your bandwidth, usually with dramatic results.

This is not an article on improving your follower count or the “top 10 ways to drive traffic with SEO“, but it will definitely help in a different way. Today, I’ll show you how to automatically post your blog articles straight to your Twitter and Facebook accounts using your RSS feed as a stream.

For those of you writing #daily365 articles, or have signed up for Project52, this will be ideal. Let the computers do the work for you.

The service I use for this is called TwitterFeed, which you’ll need an account for. It’s all super easy and I’ll explain it after the jump. So anyway, here we go.

Logging In

If you like, you can sign up to their service with the usual form by clicking “sign up” at the top of the page. If you’re already signed in to Google, Blogger, WordPress.com, or OpenID though it’s as simple as clicking the picture you like the look of.

Find the “Sign In with OpenID” at the bottom of the homepage near the big “Login” button if you’re doing it this way. The box below will show up (with some other options for accounts) and run some fancy AJAX.

Setting Up

Once that’s done your dashboard will show up with a page like this.

Feed Name: If you’re only using one blog this won’t matter as it’s only to tell the difference between the feeds you’re using within your own account. Others won’t see this.

RSS Feed URL: For example, http://stephenmcintyre.net/feed. This will be different for your own setup.

If you use a WordPress.com blog, the URL will be

http://BLOGNAME.wordpress.com/feed

Or if you use Blogger

http://BLOGNAME.blogspot.com/feeds/posts/default?alt=rss

Make sure to use the feed testing button before you continue.

Active: Keep this ticked for now, but it’s a switch that allows you to stop the service reading it later on.

Update Frequency: Even if you don’t post 5 times every 30 minutes, it’s probably best you set it to this, at least the half-hour part. It means that your posts will be sent to your social networks within half an hour of them being posted, keeping your friends and followers up to date.

Post Content: I chose to just post the title, but it’s up to you. Description adds in an excerpt from the beginning of your article.

Post Link: Something you definitely want to set up. Any service will do, but with bit.ly you can generate analytics on the click-throughs and track its retweets. Great tool. You can use your username and API key here from your bit.ly account.

Post Sorting: “pubDate” puts your latest posts first and “guid” sorts them alphabetically. You want to use pubDate for this.

Post Suffix and Prefix: Statements to add to the start and end of your tweets and shares. Makes it easier for your readers to tell the difference between your blog posts and other links.

Keyword Filter: Haven’t needed to exclude any posts from being sent so never used this. From what I understand you put pre-defined keywords into your posts to allow them to be sent by TwitterFeed. Handy if you have multiple types of content being fed into one RSS feed.

When you’re done you can click the “Continue to Step 2″ button.

Sync Up

On the next page you can choose the accounts that you want to allow access to. In this example I’ll use Twitter, but others are just as simple.

Using their OAuth service, connecting to Twitter is as simple as clicking the blue button above, which prompts this screen.

If a login screen comes up, you can enter your details from there. Otherwise, clicking on the green “Allow” button will synchronise both accounts for you, taking you back to the previous menu.

If you’re using Twitter for driving a Google Analytics campaign, you can type some info in the UTM tags to track it. Otherwise you can skip it and click “Create Service”.

Done

So there you go, everything’s set. Now you can sit back and watch those viewers flock to your site, now with no effort on your part!*

*Well you’ve still to write that content, mind

It’s had some significant improvements over its lifetime, and has quite frankly surprised me at how popular it has become. Especially from a script written in a night with nothing more than a simple idea behind it.

The Tweaks

Having been using the Tweet Cloud on my own blog since its first release I’ve been able to actively check how it shapes up and changed anything that seemed iffy in the later releases. It’s a great way to properly get to grips with these as you end up becoming an end-user as well as a programmer, solving problems from both sides.

I played about with it and gave it more options and a cleverer way of handling words. Word linking was added to improve design and usability, and the plugin was simplified to make it easier for developers like you to add to your sidebar.

I don’t actually know that you’re a developer, but I’m settling with it as a safe assumption since you’re reading the Tweaks section.

As usual, you can find all release notes and such over at the plugin’s development page.

Where It’s Heading

Unfortunately the plugin isn’t widgetised and doesn’t use WordPress hooks for any kind of database stuff yet, so that’s definitely a direction I’d like it to go. Particularly since I was emailed by blogger Amy Armstrong on how to make it work on her WordPress.com-hosted pages. The problem is, the site does not allow you to edit any of your theme code, so she couldn’t get into the script to change it. Widgetising would definitely open this up to the people that want it, and who am I to deny you lovely people that privilege?

I also had an interesting conversation with Petri Lopia via email, who found problems with the plugin’s text parsing. He also suggested some of the things that were developed in the latest release, like support for hashtags, mentions, and excluded words. Luckily though they were already in the development pipeline and I could work on them quite easily. It’s great to know that the users of this plugin follow my line of thought.

Cheers, Amy and Petri.

I Leave You With This

The great thing about an open-source project like this is exactly that – it’s open. If you like the look of it, join myself and the 500 others and give it a go. If you want to know how it works, have a poke around with the code. Find anything weird or interesting or generally just want to fire some questions out? Post a comment or send an email – it only takes a minute to write one, and could save you hours of headaches. Trust me, it happens to me too often.

So be like Amy and Petri. Become a part of the web development community and get involved. You’ll be glad you did.

If like me you hadn’t heard about PHP until this point where you are looking to add in other scripts to your web pages, then now is a very good time to learn about PHP includes.

1

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

One thing to note before I begin is that if you’re ever told to use a frame or iframe tag for this kind of thing, don’t. There’s plenty of articles on why this is, but the main reasons I don’t use them is that it doesn’t play nicely with the other scripts on the page (like JavaScript and CSS) and are a pain for error checking in web development.

PHP displays the page as if it had been generated from a single HTML script, and this after all is what we’re looking for.

Using a PHP include is as simple as pasting in the code before the jump. All you do is replace the ‘header.html’ with a relative path to the file you want added in.

1
2
3
4
5

<?php
include( 'header.html' );
include( 'path/to/menu.html' );
include( '../footer.php' );
?>

Just remember to enclose them in the standard <?php and ?> tags. Oh yeah, and you have to save whatever files that use them with a ‘.php’ extension instead of ‘.html’ so that it can read those special tags and run the code inside them.

File: index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="container">
 
<?php
include( 'header.html' );
include( 'path/to/menu.html' );
?>
 
<p>
  Some dummy content text goes here to fill space.
</p>
 
<?php include( '../footer.php' ); ?>
 
</div>

File: header.html

1
2
3

<h1>My First PHP Page</h1>
 
<h2>Hello World</h2>

File: menu.html

1
2
3
4
5
6

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
</ul>

File: footer.php

1
2
3
4
5
6
7
8

<p>
  <em>
    Generated on 
    <?php
    echo date( 'jS M Y \a\t g:i a' );
    ?>
  </em>
</p>

In ‘footer.php’, date is a PHP method like include that generates a string of text from the time that you run it. The fancy letters in the brackets just make it return the right information you want it to.

The echo part takes the info from date() and writes it to the screen, so your end result is something like this:

Generated on 13th Feb 2009 at 23:31

See it in action by viewing the full page.

Further reading

As you can see, when used wisely PHP includes can be very useful and efficient for your web development and helps organise all your files. Other methods you can use are require, include_once, and require_once.

1
2
3
4
5

<?php
require( 'header.html' );
include_once( 'path/to/menu.html' );
require_once( '../footer.php' );
?>

include: Searches for the file in brackets. If found, adds data into script, otherwise ignores and continues.

require: Similar to include, but if no file is found exits the script and displays an error. Useful for adding in files necessary to how your script will run.

include_once and require_once: Will only add data in once. If there are multiple calls of these methods to the same file in one script, only the first call will be used. Useful for things like PHP classes.

These are used and written in almost exactly the same way as the include examples. At the time you need to consider using one of these, you will be able to tell from the list above which one will best suit your project.