• Facebook
  • Twitter

jQuery Social Media Timeline


Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

jQuery Social Media Timeline plugin allows you to add Social Media to your website with simple HTML markup and customize it with number of various parameters.
Please read this documentation to discover all available options.


Plugin Installation


jQuery Social Media Timeline requires the following scripts to be attached in HTML page:

CSS:

JavaScript
Once scripts are attached you can attach your HTML code and add the class to style element which is going to be triggered in javascript for example throughout socialFirst:
If you want to have your social plugin sticked on the right or left side, what you have to do to add another corresponding class.

Available parameters


Main options

Option Default Type Description
width 330 integer Define width of the element.
height 600 integer Define height of the element.
enabled “twitter” string Show enabled social at the beginning
available no default value array  Order and display socials media you need. [‘facebook’, ‘twitter’, ‘instagram’, ‘pinterest’] This option is required.

Facebook

Option Default Type Description
account no default value string Social page to display. It’s simple name. This option is required.
token no default value string Access token. More info in documentation. This option is required.
limit 10 integer Number of feeds displayed in social.
media true boolean Display media (photos and videos). Allowed values are: true or false.
showOnly null string Display specified type of posts throughout the limit. Available options are: “photo”, “link”, “status”, “video”, “event”.
descriptionLength 200 integer Set the length of the message (characters).
linkLength 35 integer Set the length of the link (characters). This links shows up when post is the ‘link’ type.
linkText <i class=”icon-angle-double-right”> string Text or icon displayed as a link in the end of the message. It can be text or html.
disable null array Disable parts of the plugin. Allowed values: ‘header, ‘information’, ‘stats’, ‘thumbnail’, ‘shares’, ‘likes’, comments’, ‘date’, ‘name’. If you want to disable one part of the plugin then put one string. However, if you want to disable more things, then put it into array e.g.: [‘likes’, ‘date’].
afterLoad null function  Callback after loading content.

Twitter

Option Default Type Description
account no default value string Social page to display. It’s simple name. This option is required.
consumer_key no default value string Consumer key. More info in documentation. This option is required.
consumer_secret no default value string Consumer secret. More info in documentation. This option is required.
limit 10 integer Number of tweets displayed in social.
media true boolean Display media (photos and videos). Allowed values are: true or false.
linkText <i class=”icon-angle-double-right”> string Text or icon displayed as a link in the end of the message. It can be text or html.
disable null string Disable parts of the plugin. Allowed values: ‘header, ‘information’, ‘stats’, ‘thumbnail’, ‘retweets’, ‘tweets’, ‘date’, ‘name’. If you want to disable one part of the plugin then put one string. However, if you want to disable more things, then put it into array e.g.: [‘tweets’, ‘date’].
afterLoad null function Callback after loading content.

Notice:

Common question: How to generate all those tokens and keys?

Instagram

Option Default Type Description
access_token no default value string Your access token which you have to provide. More info in documentation.This option is required.
limit 10 integer Number of tweets displayed in social.
media true boolean Display media (photos and videos). Allowed values are: true or false.
linkText <i class=”icon-angle-double-right”> string Text or icon displayed as a link in the end of the message. It can be text or html.
disable null string Disable parts of the plugin. Allowed values: ‘header, ‘information’, ‘stats’, ‘thumbnail’, ‘likes’, ‘comments’, ‘date’, ‘name’. If you want to disable one part of the plugin then put one string. However, if you want to disable more things, then put it into array e.g.: [‘likes’, ‘date’].
afterLoad null function Callback after loading content.

Pinterest

Option Default Type Description
account no default value string Social page to display. It’s simple name. This option is required.
media true boolean Display media (photos and videos). Allowed values are: true or false.
linkText <i class=”icon-angle-double-right”> string Text or icon displayed as a link in the end of the message. It can be text or html.
disable null string Disable parts of the plugin. Allowed values: ‘header, ‘information’, ‘stats’, ‘thumbnail’, ‘likes’, ‘repins’, ‘name’. If you want to disable one part of the plugin then put one string. However, if you want to disable more things, then put it into array e.g.: [‘likes’, ‘date’].
descriptionLength 200 integer Set the length of the message (characters).
afterLoad null function Callback after loading content.

VKontakte

Option Default Type Description
account no default value integer Social page to display. VKontakte requires the id number. This option is required.
limit 10 integer Number of posts displayed in social.
media true boolean  Display media (photos and videos). Allowed values are: true or false.
linkText <i class=”icon-angle-double-right”> string Text or icon displayed as a link in the end of the message. It can be text or html.
disable null string Disable parts of the plugin. Allowed values: ‘header, ‘information’, ‘stats’, ‘thumbnail’, ‘retweets’, ‘tweets’, ‘date’, ‘name’. If you want to disable one part of the plugin then put one string. However, if you want to disable more things, then put it into array e.g.: [‘tweets’, ‘date’].
descriptionLength 200 integer Set the length of the message (characters).
afterLoad null function Callback after loading content.

How to get tokens, ids and page name


API tokens are unique identifiers of an application requesting access to your service. Each API has got different specs for tokens or ids. Note that you should be careful and create test application fot that purpose. Do not do this with your main account. In this plugin pinterest is public so it doesnt need any authorization or application. Twitter should be set for read-only app like it is presented below. However Facebook and Instagram should have their own test accounts due to security.

Facebook
How to get a Facebook Access Token (token)
Here is the whole proccess of retrieving access token: https://smashballoon.com/custom-facebook-feed/access-token/

Example Page
A sample how to get the name of the page.

 

Twitter
How to get a Customer Key and customer secret
Here is the whole proccess of retrieving access token. You should care about first step where you obtain these keys. http://www.webdevdoor.com/php/authenticating-twitter-feed-timeline-oauth/
What is very important is that you should set your application to Read-only. If you dont have it set yet go to your application and change it. This is for your security.

Example Page
A sample how to get the name of the page.

 

Instagram
How to generate an Instagram Access Token (client_id)
http://jelled.com/instagram/access-token

 

Pinterest
There is no need to get tokens or other secure keys.

Example page
A sample how to get the name of the page.

 

VKontakte
There is no need to get tokens or other secure keys.
Example page

A sample how to get the id of the page (in this case it’s number no string). Simply, click on any photo of your favourite social and go to the link and retrieve id as it is below in the picture. If social doesnt display, that means it’s not full public.


Examples of usage


Below you will find examples of usage for each social media type. You can just copy and paste code snippets from the examples below to your website and update the settings.

 

One social, facebook

How it looks?

One social, twitter

How it looks?

One social, instagram

One social, pinterest

 

One social, vkontakte

 

Multiple socials with some order
To order socials you have to pu them in order in available option. If you want to make enabled social on the start you need add into that property the social value.

Activate whichever social you want on the start.
The only what you need to do is specify in enabled the correct social you wan t to display.

Sticked socials

If you want to have sticked social on the right or on the left side on your site you simply have to add corresponding class to the thml.

Social right looks like:

After hover:

Social left looks like:

After hover:


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!