All your networks in one social widget

Posted: August 19, 2011 in Tech
1

It’s evident that most of us avid internet users actively use more than one social network. As reported in this study, the majority of LinkedIn and Twitter users also have Facebook accounts. The overlap of social networks will only grow with time and, with new social sites surfacing all the time (Google+, Spling, BackPlane), sharing your online presence will become increasingly more strenuous.

Using the social platform that I’ve built for 99Layers, you can now drop a custom social widget on your own site. The plugin is a dead simple way of pulling your online presence into one widget. As an example, I’ve added my social widget under the About Me section in the sidebar.

The remainder of this post will explain the steps to creating and getting your own social widget.

Step 1. Sign up to 99Layers

Go to http://99Layers.com and enter your username, email and password in the registration form.

Step 2. Connect your social networks

Click on the 'Sites' menu option and connect all your preferred social networks. When you connect to each site, 99Layers uses OAuth behind the scenes.

Step 3. Customize the social plugin

Now it’s time to customize your plugin. Go to the 'Plugin' menu option and you will see a preview of your social widget. You can change the theme, colours, width and if you want your photo shown or not.

Step 4. Drop the social widget on your site

After you've tweaked the plugin to your taste, copy the embed code and paste it where you want it to show up on your site.

Feel free to leave a comment or pop me a tweet (@ccharlesworth) with questions.

Showing Growl Notifications for New Web Visitors

Posted: July 31, 2011 in Uncategorized
0

When new users visit your website, you might want to give them a nudge in the right direction such as pushing them towards registering with your website.

The following code snippet uses jGrowl and a jQuery cookie plugin to do just that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://stanlemon.net/javascript/jquery.jgrowl.js" type="text/javascript"></script>
  <script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" type="text/javascript"></script>
	
  <link rel="stylesheet" href="http://stanlemon.net/stylesheet/jquery.jgrowl.css" type="text/css"/>	
  <style>
    .jGrowl a {color:yellow; text-decoration: none;}
  </style>
</head>
	
<body>

<script type="text/javascript">
$(function () {	
  if($.cookie("new_visitor") != "true") {
    $.cookie("new_visitor", "true", { expires: 365, path: '/' });
    $.jGrowl("Hello. New visitor?<br/><br/><a href='#'>Register</a>", {sticky: true});
  }
});
</script>

</body>
</html>

For a real live example, go to my 99Layers page – http://99layers.com/chico.

Follow me on Twitter: @​ccharlesworth

Fullscreen Image Slideshow with Zoom/Slide jQuery Animation

Posted: July 15, 2011 in jQuery, Tech
1

Ever since Flipboard first came to the iPad, I really liked its cover page slideshow of images. In this post I’m going to show you how I’ve replicated a similar visual experience.

Live Demo / Download Now / Documentation

The live demo shows a slideshow of images associated with my most recent tweets. The download includes the source code and an example with National Geographic images.

The remainder of this post explains how I got to the end result. Read the rest of this entry »

Royal Wedding Visualization Playback Video

Posted: May 19, 2011 in Tech
1

The Royal Wedding of Prince William and Kate Middleton was celebrated around the world on the 29th April 2011.

Following is a video playback of local tweets that happened on that eventful day, between the hours of 8am and 8pm.
Tip: Watch it in HD on vimeo.

 
The video is based on an app I hacked together with some help from Tom Martin. Tom and I work for the BBC Social team and we figured it would be fun to do something for the Royal Wedding. Tom came up with the idea of following the Royal Wedding using local tweets and displaying them on a map. Using Twitter’s API, we wrote some code to collect tweets that were happening near the Royal Wedding. Over the course of the day, we collected 4000+ local tweets. Since then I’ve created a web application that visually plays back those local tweets whilst highlighting some cool stats.

Follow me on Twitter: @​ccharlesworth