1. Start
  2. Introduction
  3. Features
  4. Included Folders
  5. Usage
  6. Settings
  7. Set Twitter Credentials
  8. Set Instagram Client ID
  9. Set Facebook API Keys
  10. Set Youtube API Key
  11. Multi Accounts
  12. Credits
  13. Changelog

jQuery Social Timeline

Premium Plugin


The DP Social Timeline plugin lets you retrieve status/posts/videos/images from different social networks in a timeline format from the newest to the oldest.

Introduction

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Features


Included Folders


The following files and folders are included in the package:

Usage


Simply reference the relevant files at the head of your page like so:
        
        
        
        
        
		

Initialitation

        	
        
Where #socialTimeline is the ID of the HTML element:
        	

Settings


feeds

Signature:
$('#socialTimeline').dpSocialTimeline({
    feeds: 
    {
        'twitter': {data: 'http://www.yourserver.com/twitter_oauth/user_timeline.php?screen_name=cnn', limit: 6},
        'twitter_hash': {data: 'http://www.yourserver.com/twitter_oauth/search.php?q=%23webdesign', limit: 3},
        'facebook_page': {data: 'http://www.yourserver.com/facebook_auth/facebook_page.php?page_id=5550296508', limit: 2},
        'youtube': {data: 'http://www.yourserver.com/youtube_auth/youtube.php?username=youtube'},
        'youtube_search': {data: 'http://www.yourserver.com/youtube_auth/youtube.php?q=cats'},
        'instagram': {data: 'http://yourdomain.com/instagram_auth/instagram.php?username=YOUR_USERNAME'},
        'instagram_hash': {data: 'http://yourdomain.com/instagram_auth/instagram_hash.php?tag=YOUR_HASHTAG'},
        'flickr': {data: '52617155@N08'},
        'flickr_hash': {data: 'webdesign'},
        'tumblr': {data: 'drinkyourjuice'}
    }
});

Set social RSS feeds. The included options are:

custom

Signature:
$('#socialTimeline').dpSocialTimeline({
    custom: 
    { 
        '1stwebdesigner': {
            name: '1stwebdesigner', 
            url: 'http://feeds.feedburner.com/1stwebdesigner', 
            icon: 'http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/favicon.ico',
            limit: 5 
        }
    }
});

Set custom RSS feeds.

skin

Signature:
$('#socialTimeline').dpSocialTimeline({
    skin: 'xxx'
});

Set the skin Style. (light / dark / modern). Default: "light"

layoutMode

Signature:
$('#socialTimeline').dpSocialTimeline({
    layoutMode: 'xxx'
});

Set the Layout Style. (timeline / columns / one_column). Default: "timeline"

addLightbox

Signature:
$('#socialTimeline').dpSocialTimeline({
    addLightbox: true
});

Activate the lightbox feature for images and videos.

share

Signature:
$('#socialTimeline').dpSocialTimeline({
    share: false
});

Show/hide the share buttons. Default: true

showSocialIcons

Signature:
$('#socialTimeline').dpSocialTimeline({
    showSocialIcons: true
});

Show/Hide social icons. Default: true

showFilter

Signature:
$('#socialTimeline').dpSocialTimeline({
    showFilter: true
});

Show/hide the filter buttons. Default: true

rtl

Signature:
$('#socialTimeline').dpSocialTimeline({
    rtl: true
});

Enable/Disable RTL layout. Default: false

cache

Signature:
$('#socialTimeline').dpSocialTimeline({
    cache: true
});

Enable/disable cache feature. Default: false

cacheTime

Signature:
$('#socialTimeline').dpSocialTimeline({
    cacheTime: 900
});

Set the cache expire time in seconds. Default: 900 (15 minutes)

allowMultipleFilters

Signature:
$('#socialTimeline').dpSocialTimeline({
    allowMultipleFilters: false
});

Enable/disable the multiple social filter. Default: true

showLayout

Signature:
$('#socialTimeline').dpSocialTimeline({
    showLayout: true
});

Show/hide the layout buttons. Default: true

showLayoutTimeline

Signature:
$('#socialTimeline').dpSocialTimeline({
    showLayoutTimeline: false
});

Show/hide the "timeline" layout button. Default: true

showLayoutColumns

Signature:
$('#socialTimeline').dpSocialTimeline({
    showLayoutColumns: false
});

Show/hide the "columns" layout button. Default: true

showLayoutOneColumn

Signature:
$('#socialTimeline').dpSocialTimeline({
    showLayoutOneColumn: false
});

Show/hide the "one column" layout button. Default: true

itemWidth

Signature:
$('#socialTimeline').dpSocialTimeline({
    itemWidth: 300
});

Set the width of each column. Default: 200

timelineItemWidth

Signature:
$('#socialTimeline').dpSocialTimeline({
    timelineItemWidth: '300px'
});

Set the width of each column in the timeline layout. Default: itemWidth value

columnsItemWidth

Signature:
$('#socialTimeline').dpSocialTimeline({
    columnsItemWidth: '300px'
});

Set the width of each column in the columns layout. Default: itemWidth value

oneColumnItemWidth

Signature:
$('#socialTimeline').dpSocialTimeline({
    oneColumnItemWidth: '100%'
});

Set the width of each column in the "one column" layout. Default: itemWidth value

total

Signature:
$('#socialTimeline').dpSocialTimeline({
    total: 10
});

Set the total number of items to retrieve. Default: 10

Set Twitter Credentials


  1. Add a new Twitter application
  2. Fill in Name, Description, Website, and Callback URL (don't leave any blank) with anything you want
  3. Agree to rules, fill out captcha, and submit your application
  4. Click the button "Create my access token" and then go to the OAuth tab.
  5. Copy the Consumer key, Consumer secret, Access token and Access token secret into the files twitter_oauth/user_timeline.php and twitter_oauth/search.php
  6. When you upload the files to the server, you can set the twitter option using the url of the PHP file.

Set Instagram Client ID


  1. Register an app at http://instagram.com/developer/
  2. You will find the client ID in http://instagram.com/developer/clients/manage/
  3. Copy the Client ID into the file instagram_auth/instagram.php
  4. When you upload the files to the server, you can set the instagram option using the url of the PHP file.

Set Facebook API Keys


  1. If you are not registered as a developer in Facebook, you will have to register in https://developers.facebook.com/, go to Apps -> Register as a Developer
  2. Once you are registered go to https://developers.facebook.com/ Apps -> Create a new App and fill the form
  3. If you created the App succesfully, you will see the new App ID and Secret keys in the dashboard
  4. Copy the API Keys into the file facebook_auth/facebook_page.php
  5. When you upload the files to the server, you can set the instagram option using the url of the PHP file.

Set Youtube API Keys


  1. Go to the Google Developers Console.
  2. Select a project, or create a new one.
  3. In the sidebar on the left, expand APIs & auth. Next, click APIs. In the list of APIs, make sure that the Youtube Data API shows a status of ON.
  4. In the sidebar on the left, select Credentials.
  5. Click Create new Key and select the browser key type

Using Multi Accounts


You can retrieve feeds from different usernames in the same social network using a comma as separator. I.E:

$('#socialTimeline').dpSocialTimeline({
    youtube: 'username1, username2, username3'
});

Credits


Changelog


Version 1.8

Version 1.7.9

Version 1.7.8

Version 1.7.7

Version 1.7.6

Version 1.7.5

Version 1.7.3

Version 1.7.2

Version 1.7.1

Version 1.7

Version 1.6.8

Version 1.6.7

Version 1.6.6

Version 1.6.5

Version 1.6.4

Version 1.6.3

Version 1.6.2

Version 1.6.1

Version 1.6

Version 1.5.9

Version 1.5.8

Version 1.5.7

Version 1.5.6

Version 1.5.5

Version 1.5.4

Version 1.5.3

Version 1.5.2

Version 1.5.1

Version 1.5

Version 1.4.8

Version 1.4.7

Version 1.4.6

Version 1.4.5

Version 1.4.4

Version 1.4.3

Version 1.4.2

Version 1.4

Version 1.3.9

Version 1.3.8

Version 1.3.7

Version 1.3.6

Version 1.3.5

Version 1.3.2

Version 1.3.1

Version 1.3

Version 1.2

Version 1.1

Version 1.0 Released