Social

Summary

The Social plug-in was created out of a need to get content from social networks quickly, easily, and have the ability to customize the markup in which the data was wrapped.

In one line of code you can inject a Twitter feed, Flickr feed, last listened to songs from Last.fm, latest uploaded videos to YouTube, and latest links saved to Delicious. All you need is the username, and how many “posts” you want to grab.

Download

jQuery Social Plugin (261)

Demo

Launch Demo

Documentation

Base

The only required HTML to start working with Social is the block element that you are going to place the requested social data into (i.e. a DIV). It’s a good idea to have some fallback data within the DIV in case Javascript is disabled. I tend to make this a message urging the user to enable Javascript for a better experience. What you put in here is only relevant to browsers that don’t have Javascript enabled. When the plugin runs, it will replace this data as to not confuse users with Javascript.

1
2
3

<div id="social">
<p>Javascript needs to be enabled for this module.</p>
</div>

Implementation

The most basic approach only requires that you enter three variables:

Network
User
Count

Which could look something like this:

1
2
3
4
5

$('#social').social({
network : 'twitter',
user : 'justinjones53',
count : 5
});

You can take as basic, or advanced, of an approach as you want. Social will grab the data from the requested social network, wrap it in markup, and place it in the element you decide. The entire output of this plugin can be customized by you using a pretty straightforward technique. By default the plugin wraps each “item” in an LI.item, and the entire list in a UL.listing. This markup is changeable with the ‘wrapItemIn’ and ‘wrapListIn’ options. The following:

1
2
3
4
5
6
7
8

$('#social').social({
network : 'twitter',
user : 'justinjones53',
count : 4,

wrapItemIn : '<div class="single" />',
wrapListIn : '<div class="collection" />'
});

would result in:

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

In addition, each network also has their own properties, and they all have their own ‘output’ property. The output properties use a “template” style format. You can form the HTML for the output however you want, but there are some key variables that get replaced with the requested data. If this doesn’t make sense, keep reading, the examples should make it easier to understand.

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

$('#social').social({
twitter : {
output : '<span class="tweet"><span class="user"><a href="{user_url}">{user}</a></span> <span class="text">{text}</span> <span class="time"><a href="{tweet_url}">Posted {time}</a></span>'
},
flickr : {
output : '<span class="image"><a href="{url}"><img src="{image}"</a></span>'
},
lastfm : {
output : '<a class="track" href="{url}"><span class="image"><img src="{image}" /></span> <span class="name">{track}</span> <span class="album">{album}</span> <span class="artist">{artist}</span></a>'
},
delicious : {
output : '<span class="bookmark"><a href="{url}">{name}</a></span>'
},
youtube : {
output : '<span class="video"><a href="{url}" title="{name} - {views} views"><img src="{thumb}" /></a></span>'
}
});

You can see that this is some pretty basic HTML, however there are {tags} that might be a little confusing. Each social network has their own special tags that you can arrange, wrap, or remove, in any way you want. If you simply want the text, then you can strip down the output to just display that.

Twitter

{user_url}: URL string for the user’s profile page.
{tweet_url}: URL string for the specific tweet.
{text}: content of the tweet.
{time}: time the tweet was posted.
{user}: name of the user.
{source}: method in which the user posted the tweet by.
{avatar}: URL string for the user’s avatar image.

Flickr

Last.FM

YouTube

Delicious

Try’d to Test

Not all usernames work with this.
http://www.jstnjns.com/ JSTNJNS

The only reason this might not work for a certain username is because the content providers (namely Twitter and their search API) cache their data in a peculiar way. I have run into instances where a certain username doesn’t work one day, but the next it works fine.
Dallas

Works great now, learned it the hard way. Thanks though!