Snipperoo

Blogrolling

Blogroll
Build your personal list of favourite web sites - a blogroll. Then, add that list to your own site so that anyone can visit the sites you are promoting. Bingo!
Blogroll centralises the process of collecting sites, with a range of tools including the most useful one click site addition.

My blogroll looks like this. You can change the look of the Blogroll using CSS to reformat.

The code looks like this - a nice simple single liner:

<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=30e6e95e9ea03c661e0151a2c66b9858"></script>

You can also put an 'Add me to your Blogroll' to your site:

Blogroll Me! the code for which looks like this:

<a href="javascript:void(rollpop=window.open('http://www.blogrolling.com/add_links_pop.phtml?u=www.blog.ivanpope.com/snipperooo/&t=Snipperoo','rollit','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));rollpop.focus();">Blogroll Me!</a>

Tag-Board Message Board

TagBoard
Real time discussion on your site - no forums. Free basic or $20 year enhanced site.

                       

Powered by TagBoard Message Board

Name                 URL or Email

The code for it looks like this:

[ EDIT: look out for this horrible bit of code in this -    Messages(<a href="http://www.tag-board.com/smilies/smilies.htm" onClick="return pop_up_smilies();" target="_blank">smilies</a>) - it opens up a popunder advert every time the page is loaded]

[EDIT 2: I found out they are open about it at their site, though they say you will only get the ads once a day - I got them every time I went to the page:
Why does my free board have popup ads?                                                                                  

Tag-board has been generating popups on the free boards since December of 2003. They are set up in a rotation so that no person should receive more than 1 popup per day. We also monitor the contents of the ads shown, keeping them clean. The reason for the ads is to help pay for our servers to keep the boards free. We are sorry for the inconvience.

 

If you wish to get rid of the ads please upgrade to enhanced. Thank you.]

 

<SCRIPT LANGUAGE="Javascript" TYPE="text/javascript" SRC="http://www.tag-board.com/tagboard.js?boardname=snipperoo"></SCRIPT>

<table width="200" cellpadding="2" cellspacing="0" border="0">
  <tr>
    <td width="200" height="200" valign=top>
      <iframe src="http://www.tag-board.com/my.tag?name=snipperoo" name="tag" width="200" height="200"
marginwidth="0" marginheight="0"></iframe>
      <script>netscape_support();</script>
    </td>
  </tr>
  <tr>
    <td>
      <a href="http://www.tag-board.com/" target="_new">Powered by TagBoard Message Board</a>
    </td>
  </tr>
  <tr>
    <td>
      <form action="http://www.tag-board.com/add.tag" method="post" name="tagform" target="tag">
        <input type="hidden" name="name" value="snipperoo">
        Name<br>
        <input name="tagname" maxlength="20"><br>
        URL or Email<br>
        <input name="tagurl" maxlength="100"><br>
        Messages(<a href="http://www.tag-board.com/smilies/smilies.htm" onClick="return pop_up_smilies();" target="_blank">smilies</a>)
        <br>
        <textarea cols="24" rows="3" name="message" wrap></textarea><br>
        <input class=button type="submit" value="TAG" onclick="return Clear_Last_Message_on_Submit();">
      </form>
      <script>rememberme()</SCRIPT>
    </td>
  </tr>
</table>

Real Time Blog Analytics

Real Time Blog Analytics.

In their own words:

All you really want to know is how many people read your blog, how they find you and who keeps coming back for more. But most tools just give you lists of urls, complex graphs that don't make sense, and seven different levels of menus to navigate.

Well not any more, my friend. Blogbeat is here. Smart, elegant, and best of all, designed specifically for blogs so it's easy to understand.

BlogBeat is what I call an invisible snippet: you put the code on your page, but it doesn't show anything to the visitor. Instead, it gives you some functionality. In this case, tracking statistics.

The code in this case is Javascript. This is what it looks like:

<script type="text/javascript" src="http://tracker.blogbeat.net/blogbeat.js"></script>
<script type="text/javascript">
    Blogbeat.initialize('A',439);
</script>

This sort of code snippet has to go in a template, that is, in a part of your page that will appear on every new page.They say put it in the 'footer', but I guess putting it in my left column will work just as well.That's where I put invisible code in my other blogs.

There are many other invisible snippet sites and I'll be covering a few of them over the next few weeks. The big daddy of them all is Google's Analytics - but it's been closed to new users since they made it free and the rush tipped their system over.

BlogBeat is not free, but it's not very expensive if you need to know who is doing what on your site.

 

Flickr photomadness

Flickr gives you a way to store and distribute your pictures. It led the way in user friendlyness and got a lot of press - though I heard recently that it has 2m users compared to Yahoo's 20m for their photo service. Then Yahoo bought them!
Anyway, they have a nice photo widget that you can put in your site from here. You can choose between an HTML 'badge' and a Flash badge. I only seem to see the Flash version, but I show them both below. You also get to choose what photos to show. You can show all of your own, a subset of your own, or everyone's from Flickr. You also get to set the colour scheme for your badge - as you can see I choose horrible colours.
This is the Flash version showing my Flickr photos:

www.flickr.com

This is a Flickr badge showing public photos from ivanpope. Make your own badge here.

This is the code:

<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #0000CC; background-color:#FFFF00;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'FFFF00';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=98894332%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"></iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne"    style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">what is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="http://www.flickr.com/photos/98894332@N00">ivanpope</a>. Make your own badge <a href="http://www.flickr.com/badge_new.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge -->

And this is the HTML version. You can choose from horizontal or vertical and change the image size for this one. It's a lot more flexible.

www.flickr.com More of ivanpope's photos

BlogExplosion Radio

Radio for your site
BlogExplosion offer radio snippets for your site. Three sizes. This is the largest.

This is the code:

<script language="JavaScript" type="text/javascript" src="http://radio.blogexplosion.com/nowplaying/?w=1"></script>

Feedburner widgets and code

Feedburner is one of the bright stars of the Web 2.0 bubble boom. They offer a way to provide RSS feeds from your site and to mange those feeds through their interface. They give stats about your readers - and to their subscribers they give extra power stats. But most of their services are free.

In their own words:

We offer a full range of services to help you build awareness, track circulation, and implement revenue-generating programs in your feed(s). A slew of publishers (over 120,000 and counting) currently take advantage of FeedBurner’s services, many of which are free and have been called “awesome” by these same customers. We also offer paid Premium Services when you’re ready to take analysis and awareness to the next level.

Feedburner is such an excellent service it's hard to know where to start. Just get an account and start using their services.

Feedburner Chicklets
This code:

<a href="http://feeds.feedburner.com/Snipperoo" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a>

puts this little icon in your site.

Subscribe to my feed

It is the new universal signifier for RSS feeds, but as hardly anyone recognises it. Clicking on it (yes, it's live) will give you the option to subscribe to my RSS feed and get regular updates. As it is not that obvious on its own, I've added the line of text: Subscribe to my feed.

You could choose from one of these 'chicklets' and offer the option to subscribe via one of the well known Feed aggregator type services:

FeedCount
This counter for page display keeps track of how many people have subscribed to your blog or site from Feedburner.

Headline Animator
The Headline Animator cycles through the last few posts on your blog. You can use it in emails, on eBay, on forums etc to publicise your site.

PayPal snippets

This from ePublishing Daily: PayPal Reaches 100 million Accounts

PayPal announced this week that it has surpassed 100 million accounts across 55 markets worldwide.

PayPal is popular with online buyers and merchants alike. Shoppers prefer PayPal to send money, because it is fast and easy to use, and their financial information is protected and never shared with merchants or recipients. PayPal is also used by millions of online merchants, including leading e-commerce sites around the world.

PayPal began offering its service in 1999, ending that year with 12,000 accounts and $235,000 in total payment volume. In 2005, PayPal processed more than $27 billion in total payment volume and exceeded $1 billion in revenue. The company has localized services in 14 countries and supports payments in seven currencies — U.S. Dollars, Canadian Dollars, Australian Dollars, Euros, Pounds Sterling, Japanese Yen and Chinese Yuan.

And of course PayPal does great snippets.

Merchant Tools
Buy Now Button just takes a fixed amount of money. The code looks like this:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHTwYJKoZIhvcNAQcEoIIHQDCCBzwCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhM

CVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWw
gSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQE
WDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYC/ymzB6AAfXhlOKelwJySR6QQ/zvZdXk/j/
clWu+lqTpsDzXvEPo8pTeXAQl2k1eVKPajbIOsbndu7ca0D4xwgE92xEKkBT+ysz6tJS3hJtTZt338W7ossQbUn
/ZwMYvYcVk6oXTxNkYAy1pijSM4B56P6XzHz5QDsMM/NzuaeoTELMAkGBSsOAwIaBQAwgcwGCSqGSIb3D
Vltwj2vkMdrBgWfdV1tfXtBZ35VlPKw3wEk2z/KD3FX6nBWEsbXgO4L5r9+ymEDf-----END PKCS7-----
">
</form>

(I snipped some of the encryption key out, it went on for ever!)

The button looks like this:

Buy a Pat on the Back, only $15 with FREE SHIPPING

or you can use a Subscription button:

Subscribe to a Years Worth of Pats on the Back only $60

or you can just ask for Donations:

Give me a Pat on the Back

Traffic Stats from Alexa

Alexa, the web traffic outfit that is now owned by Amazon, offers a range of interesting and useful snippets to add interest and value to your site - and potentially income!

1. Traffic Rank Button
The Alexa traffic rank button allows you to place a button on your site that automatically updates with your traffic rank every day. Clicks on the traffic buttons and banners will drive to site detail pages on Amazon.com. Sign up as an Amazon.com associate and you can monetize those clicks.
There are three different sizes of snippet, as there are with most of these Alexa snippets: Small, Regular and Banner.

The code for the Regular looks like this:

<SCRIPT type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/b?url=blog.ivanpope.com%2Fsnipperoo'></SCRIPT>

and the live version for this site would look like this:

2. Site Stats Button

Like the Traffic Rank Button, but with more information.

3. Traffic History Graph

This snippet shows traffic to your site since you inserted the code. You can add up to two more sites, so you can feel either happy or overwehelmed by how your traffic compares.
Again, you get a choice of three size variants, this is the smallest.

4.Associate Toolbar

This is the big one. The toolbar offers all the above info and the chance to earn money from referrals. You'll need to be an Amazon associate to benefit from the referrals.

Rojo launches ad share system

The RSS feed aggregator, Rojo, is launching a snippet based ad share system. Anyone with a free Rojo account can sign up for the ad share system.
I can't find anything about the system on the Rojo site, so I'll have to nick Techcrunch's outline of the service. (Thanks Mike).

The idea is that a blog include a Google Adsense-type ad unit on the site. Two ads are served in the unit and there are vertical and horizontal ad units to choose from. For ever two ads served, the publishing blog gets an impression on another blog.

FeedShare is a service that helps bloggers with similar interests promote each other. As a blogger participant you give exposure on your site to other blogs in the network, and in return your blog will be promoted on similar sites in the network.

Anyway, the code looks like this:

<script type="text/javascript">
<!--
rojo_ad_client = '60'; rojo_ad_width = '468'; rojo_ad_height = '60';
// -->
</script>
<script type="text/javascript"
  src="http://www.rojo.com/javascript/ShowFeedExchangeAds.js">
</script>

and this is what you get (horizontal version):

Stickam goes live

Stickham, which I mentioned the other day, is now live and you can sign up for an account of your own.

What does it do?

What can you do with it? They call it the 'All in one multimedia communications tool' - which leaves a bit to be desired as snappy slogans go. You can put photos and videos on your site, but the key to Stickham is that you can provide a live webcam link on your site. That means that while you are live, anyone can take a peek at your mug (or whatever else you point the camera at). Like many applications, the people who wrote this site know what Stickham does, so they don't actually bother to tell you in so many words what it does. But I think that's the gist of it.

Inserting the Snippet
Anyway, once you've got an account, go to MyPage and copy the code for your player. You can also edit the look feel of the player. The code looks like this:

<table><tr><td><embed src="http://www.stickam.com/flashVarChatPlayer/170672916-0" type="application/x-shockwave-flash" width="160" height="400" ></embed></td></tr><tr align=center ><td><a href="http://www.stickam.com" target="_blank" ><font size="-1">Get Stickam for Free.</font></a></td></tr></table>

Then paste the code and, wahey, you get one of these - when live it's so cool. The second one is a screenshot of what it looks like when it's live. Must remember not to pick my nose!

Get Stickam for Free.