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
|
1 |
<div class="socialFourth socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$('.socialFourth').socialTimeLine({ width: 303, available: ['facebook'], enabled: 'facebook', facebook: { account: 'LeoMessi', token: 'your application facebook token', limit: 10, disable: ['thumbnail', 'date', 'name'] } }); |
How it looks?
One social, twitter
|
1 |
<div class="socialFifth socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('.socialFifth').socialTimeLine({ //enabled needs to have the same value which occurs in available width: 303, available: ['twitter'], enabled: 'twitter', twitter: { account: 'rihanna', consumer_key: 'your consumer key', consumer_secret: 'your consumer secret key', limit: 10, disable: ['thumbnail', 'date', 'name'] } }); |
How it looks?
One social, instagram
|
1 |
<div class="socialSixth socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$('.socialSixth').socialTimeLine({ //enabled needs to have the same value which occurs in available width: 303, available: ['instagram'], enabled: 'instagram', instagram: { access_token: 'add here your Instagram access token', disable: ['thumbnail', 'date', 'name'], limit: 10 } }); |
One social, pinterest
|
1 |
<div class="socialSeventh socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
$('.socialSeventh').socialTimeLine({ //enabled needs to have the same value which occurs in available width: 303, available: ['pinterest'], enabled: 'pinterest', pinterest: { account: 'KlavesMarina', disable: ['thumbnail', 'name'] } }); |
One social, vkontakte
|
1 |
<div class="socialTwelfth socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
$('.socialTwelfth').socialTimeLine({ //enabled needs to have the same value which occurs in available width: 303, available: ['vkontakte'], enabled: 'vkontakte', vkontakte: { account: 112985556, disable: ['thumbnail', 'date', 'name'] } }); |
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.
|
1 |
<div class="socialEighth socialMedia-switcher"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$('.socialEighth').socialTimeLine({ width: 303, available: ['pinterest', 'instagram', 'facebook', 'twitter'], enabled: 'pinterest', facebook: { account: 'skrillex', token: 'acccess token, limit: 10, disable: ['thumbnail', 'date', 'name'] }, twitter: { account: 'taylorswift13', consumer_key: 'consumer key', consumer_secret: 'consumer secret', limit: 10, disable: ['thumbnail', 'date', 'name'] }, instagram: { access_token: 'add here your Instagram access token', disable: ['thumbnail', 'date', 'name'], limit: 10 }, pinterest: { account: 'KING__K', disable: ['thumbnail', 'name'] } }); |
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.
|
1 |
<div class="socialSecond socialMedia-switcher socialMedia-switcher--right"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$('.socialNinth').socialTimeLine({ width: 303, available: ['pinterest', 'instagram', 'facebook', 'twitter'], enabled: 'facebook', facebook: { account: 'skrillex', token: 'access token', limit: 10, disable: ['thumbnail', 'date', 'name'] }, twitter: { account: 'taylorswift13', consumer_key: 'consumer_key', consumer_secret: 'consumer_secret', limit: 10, disable: ['thumbnail', 'date', 'name'] }, instagram: { access_token: 'add here your Instagram access token', disable: ['thumbnail', 'date', 'name'], limit: 10 }, pinterest: { account: 'KING__K', disable: ['thumbnail', 'name'] } }); |
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:
|
1 |
<div class="socialSecond socialMedia-switcher socialMedia-switcher--right"></div> |
After hover:
Social left looks like:
|
1 |
<div class="socialSecond socialMedia-switcher socialMedia-switcher--left"></div> |
After hover:
