When you want to stream the activity from a facebook page to your website or blog, you copy and paste a site-generated iFrame code. We’re going to do the same thing for syndicating our webcomics without using Flash, which was covered in Pt. 1 (you can READ THAT HERE. Using iFrames and hosting it ourselves gives us a large number of options, from easily customized navigation to quickly added or removed access (if you’re licensing the webcomic for example and a payment is late).
.
Let’s consider the needs we have which would not be addressed by our Picasa usage from PT. 1
We want the gallery viewable on mobile devices including tablets
We want to keep the content identical to that of our regular webcomic, meaning limited separate updating
We want to host the images on our server instead of google’s (Picasa)
We want to make it possible to redirect traffic anywhere we like when an image is clicked
.
The advantage with iFrames is that they are embedding another website in whatever area you designate. So all we have to do is make a gallery that runs on OUR end (server) and send the iFrame code to our affiliate, it’s a natural marriage of our content and someone else’s open space. This also means you can run whatever gallery type you feel comfortable with. For this example, assuming we have more horizontal real estate than vertical (it’s going in a header after all) let’s try a gallery with little impact and easily customized features.
.
CLICK HERE to see this in action.
.
So what did we do? We just used a quick slideshow code from javascript source found HERE, and modified the next and previous buttons based on our design. Remember that you don’t want to get into customizing your syndication for every single prospective website out there, but maybe 2-3 designs that people can fit into their sites? Our favorite advantage of this technique may be that unlike lightbox and some more sophisticated solutions, adding images to the array doesn’t require naming them with a “rel” tag. Observe the method below which uses absolute naming, although relative naming would be even shorter of course:
.
And just to demonstrate how easy it is to customize, observe how simple the code is that we would sent to OUR AFFILIATE. This is all they’d have to paste into their header area. Any appearance should be changeable on your end with some simple CSS, and the embedded file will work great in both HTML and blog pages. I’ve also added a link back to this blog entry from the gallery, it’s as simple as adding a hyperlink to the cover image.
.
.
Coming in Pt. 3 – Can we Syndicate our Webcomics with a Fluid Display?
by Steve Broome
