It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.

NEW: Sign up for my newsletter!

Home > Articles > Webmaster resources > Javascript examples > Syndication tutorial

Syndicating your website content

Content is visitor bait. If you post something sufficiently entertaining, useful or informative on your website, you'll attract visitors. But there is an alternative to just uploading your work and waiting for people to sniff it out. You can send your content out hunting by putting it on other websites. Capture the reader's interest and they'll click through to your site. Even if they don't visit you, you build your reputation each time your work and your name are seen.

This page provides some scripts you can adapt to start syndicating your content to other sites. Put your cursor in the form field with the script, select all, copy and then paste it into your webpage.

Syndicating images

If you're syndicating image files, the easiest thing is to just get people to link to a picture on your site directly. Here's some example code that will take the image cartoon.gif from your site (www.example.com) and embed it in the host page.

<a href="http://www.example.com">
<img src="http://www.example.com/cartoon.gif">
</a>

When you want to change the cartoon, just upload a new version of cartoon.gif. This link works on any browser that has images switched on, but it does mean that you'll have to upload a new file each day if you want to publish a daily comic strip.

Using Javascript to automate the selection

Javascript offers a good alternative, both because Javascript files on other sites can be linked as easily as images can, and because they offer some intelligence to save you time. The code below will show a cartoon numbered for the day of the week so that on the 12th, it will show cartoon12.gif and so on.

<script language="Javascript">
document.write('<IMG SRC="cartoon0.gif" name="tip" BORDER=0>');
today=new Date();
dateno=today.getDate();
if (document.images)
{document.tip.src="cartoon"+dateno+".gif";}
</script>

Using that script means you only need to update your cartoons once a month, and you can do it any time in the month too.

As that script shows, Document.write is used to get Javascript to insert some HTML in the page. The script above works by inserting the default image (cartoon0.gif) and giving it a name, working out the day number in the month, and then replacing cartoon0.gif with the file that has the name "cartoon" plus the date number plus ".gif". If you wanted to let other webmasters use this to host your pictures, you'd need to add your website address and the full path to the images before each mention of "cartoon".

Self-updating syndication code

Using the previous script, you need to get all the webmasters to update their site if you have to change something about the code. There's a better way. You can put just the Javascript (trim off the <script> tags) in a file with the extension .js (we'll call it syndicate.js) and get webmasters to link to it like this:

<script language="Javascript" src="http://www.example.com/syndicate.js">

Here's how it works:

The beauty of it is that you can change the syndicate.js code at any time and the next time someone views any webpage calling it, that webpage too will change. So if you link lots of webpages (perhaps many of which you don't own) to the same syndicate.js file, you have a way to update all of these separate pages all over the internet by changing just one file that you control (syndicate.js).

It's much more flexible than our previous daily cartoon example. If you need to alter the path or size of your images, just update your syndicate.js file. You host sites won't even notice the difference, let alone have to update their code.

You can use the same technique to send any HTML code to another website. Just put your HTML inside document.write() code. You need to take care with quotes, because Javascript can think that you're telling it you've finished your document.write when you're using an apostrophe. Javascript uses a leading \ before apostrophes or HTML quotes to avoid confusion, like this:

<strong>Don't let apostrophes confuse</strong>

would become:

document.write('<strong>Don\'t let apostrophes confuse</strong>');

Don't panic though - there's a free Javascript include file creator on this site.

Random tip Javascript

If you're sending short articles to other sites, you can use a similar a trick to our daily image trick above. You can send them all in the same Javascript file (so they must be short!) and then get Javascript to pick one to display.

You store your advice in arrays (we're calling them 'quote' here) and get Javascript to show a random one. Here's the bare bones of the code:

quote=new Array();
quote[0]="Don't let pets play with matches";
quote[1]="Use an umbrella in the rain";
chosen=Math.floor(Math.random()*quote.length);
document.write(quote[chosen]);

Just add new quotes in turn, increasing the number in square brackets.

Daily quote Javascript

This mutant hybrid of our two scripts will show a daily quote:

quote=new Array();
quote[0]="Don't let pets play with matches";
quote[1]="Use an umbrella in the rain";
... ...
quote[31]="Eat yoghurt";
today=new Date();
chosen=today.getDate();
document.write(quote[chosen]);

Dress it up by getting Javascript to insert HTML formatting, write some more useful advice and put it in a .js file and you're ready to syndicate your ideas all over the web.

Related links

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.