Social Photo Stream jQuery Plugin

jQuery plugin that displays latest images from 8 social networks like dribbble, deviantart, piacsa, pinterest and more

Author: Pixel Industry
Website - pixel-industry.com
Licence - GPL

Description

This simple jQuery plugin allows you to make photo stream feed from 8 networks, including: picasa, pinterest, dribbble, instagram, deviantart, youtube, flickr and regular news page. You can use it on multiple places across your website. Only thing you need is the username of the account from which you want images to be shown.

Social Photo Streams included withing this plugin

• Picasa
• Pinterest
• Instagram
• Youtube
• Deviantart
• Flickr
• Dribbble
• News photo stream

Instalation

This plugin needs only two js files to work. You must include them at the bottom of the body in your HTML document. These are:

• jQuery library
• socialstream.jquery.js file which is included in the download package.

HTML Structure & jQuery code for Deviantart Feed

<article class="social-feed deviant-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ DEVIANT ART FEED ================ */
$('.deviant-feed').socialstream({
    socialnetwork: 'deviantart',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Instagram Feed

<article class="social-feed deviant-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ Instagram FEED ================ */
$('.instagram-feed').socialstream({
    socialnetwork: 'instagram',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Picasa Feed

<article class="social-feed picasa-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ PICASA FEED ================ */
$('.picasa-feed').socialstream({
    socialnetwork: 'picasa',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Pinterest Feed

<article class="social-feed pinterest-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ PINTEREST FEED ================ */
$('.pinterest-feed').socialstream({
    socialnetwork: 'pinterest',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Flickr Feed

<article class="social-feed flickr-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ FLICKRFEED ================ */
$('.flickr-feed').socialstream({
    socialnetwork: 'flickr',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Dribbble Feed

<article class="social-feed dribbble-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username:

/* ================ Dribbble Feed ================ */
$('.dibbble-feed').socialstream({
    socialnetwork: 'dribbble',
    limit: 15,
    username: 'your_username_here'
})

HTML Structure & jQuery code for Youtube Feed

<article class="social-feed youtube-feed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter your username and API key. API key can be generated on YouTube developers console. To protect your API key, create Browser key and use your domain as HTTP referrer.

/* ================ Youtube Feed ================ */
$('.youtube-feed').socialstream({
    socialnetwork: 'youtube',
    limit: 15,
    username: 'your_username_here',
    apikey: 'you_v3_api_key'
})

HTML Structure & jQuery code for News Feed

<article class="social-feed newsfeed">
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document and enter desired website link, for example:

/* ================ News Feed ================ */
$('.newsfeed').socialstream({
    socialnetwork: 'newsfeed',
    limit: 15,
    username: 'http://feeds.feedburner.com/webdesignerdepot?format=xml'
})

CSS Styling

When plugin loads, it makes one unordered list. Inside of it, every image is one list item. To style it, simply refer to for example ".social-feed.flickr-feed li" in your css file and edit it the way you like. We also included demo with simple html and css styling for easier plugin understanding.

Change Log

v1.3.1

- Image title sanitized for SEO purposes

v1.3

- Fixed Youtube stream - switched to API v3.
- Fixed issue with Smiley icons on DeviantArt stream.