Preview

Base

Grid

Buttons

Popup

Usage

<div class="social-feed social-feed-fb" data-token="[YOUR-TOKEN]" data-social-id="123" data-options="limit:2"></div>

<div class="scroll-box" data-height="400" data-rail-color="#c3dff7" data-bar-color="#379cf4">
    <div class="social-feed social-feed-fb" data-social-id="511238532715807" data-options="limit:8" data-token="[YOUR-TOKEN]"></div>
</div> 

<div class="social-feed social-feed-fb social-slider" data-social-id="511238532715807" data-options="comments:false,limit:8,arrows:true,nav:true,controls:out,type:carousel,perView:2" data-token="[YOUR-TOKEN]"></div> 

<div class="social-feed social-feed-tw" data-social-id="twitter" data-options="count:5"></div>

<div class="scroll-box" data-height="400" data-rail-color="#c3dff7" data-bar-color="#379cf4">
    <div class="social-feed social-feed-tw" data-social-id="twitter" data-options="count:8"></div>
</div> 

<div class="social-feed social-feed-tw social-slider" data-social-id="twitter" data-options="count:8,arrows:true,nav:true,controls:out,type:carousel,perView:2"></div>

Base

<div class="icon-links icon-social">
    <a data-social="share-facebook" class="facebook"><i class="icon-facebook"></i></a>
    <a data-social="share-twitter" class="twitter"><i class="icon-twitter"></i></a>
    <a data-social="share-linkedin" class="linkedin"><i class="icon-linkedin"></i></a>
    <a data-social="share-pinterest" class="pinterest"><i class="icon-pinterest"></i></a>
</div>

Popup

<div class="icon-links icon-links-popup icon-social">
    <i></i>
    <div>
        <a data-social="share-facebook" class="facebook"><i class="icon-facebook"></i></a>
        <a data-social="share-twitter" class="twitter"><i class="icon-twitter"></i></a>
        <a data-social="share-linkedin" class="linkedin"><i class="icon-linkedin"></i></a>
        <a data-social="share-pinterest" class="pinterest"><i class="icon-pinterest"></i></a>
    </div>
</div>

Installation

<link rel="stylesheet" href='themekit/css/social.css'>
<script src='themekit/scripts/social.min.js'></script>

Settings

Name Type Description
Facebook initialization --
  • Insert into the attribute data-social-id="" the ID of the Facebook page you want to show. You can get the page ID from findmyfbid.com. You can show the feeds only of the pages you own.
  • Insert into the attribute data-token="" your personal Facebook token. Read the instructions below for more details.
Facebook token --
  • You can show the feeds only of the pages you own.
  • Sign up for facebook developers channel.
  • Create a Facebook App or use an existing app if you already have one.
  • Copy, App ID, App Secret.
  • Navigate to Facebook Graph API Explorer to generate short-lived access token.
  • Select your app from the top right Application drop-down menu.
  • In the next drop-down just below the previous one select "Get user access token".
  • In the popup window that appear select "publish pages" and "manager pages".
  • Click "Get access token" and copy the access token.
  • Navigate to Access Token Tool and click the "Debug" button of your app at right side for the user access token.
  • Go on bottom click "Extend Access Token" and copy the token.
  • Again, go to Facebook Graph API Explorer and paste the extened token you just copied at the step above.
  • Change the API endpoint to access "/me/accounts" and click "Submit".
  • On the results area copy the new generated access token. This token never expire and is the one you will insert into the attribute data-token="" of the component.
  • To be sure the token never expire open Facebook Debug Tool paste the token and click "Debug" to check the expiration value.
Twitter initialization -- Insert into the attribute data-social-id=""the Twitter channel name without the @. You can find the channell name from the URL of your browser.
Scroll box -- The scroll box mode require the following script installation: <script src='themekit/scripts/slimscroll.min.js'></script> .
For more details visit the scroll box page.
Slider -- The slider mode require the following script and style installation: 
<script src='themekit/scripts/glide.min.js'></script>
<script src='themekit/css/glide.css'></script>
Add the class social-slider to the component and the slider options into the attribute data-options. Add the attribute data-trigger="manual" to the component if it's inside another container. For more details visit the slider page.
Facebook options Attribute
limit:10 Items number, any amount from 1 to 15.
comments:true Hide or show the comments.
timeout:400 Any amount (in milliseconds)
speed:400 Any amount (in milliseconds)
effect:slide Choices are slide, fade or none.
locale: en_EN Your contry code.
avatar_size: square Choices are square, small, normal or large.
message_length: 200 Any amount you like. Above 0 shortens the message length.
show_guest_entries: true Hide or show the guest entries.
text_labels: {Translations} Insert here your translations, go to the plugin documentation for more details.

You can pass the plugin options directly from the component with the attribute data-options="optione:value,optione:value, ...". To view the full options list visit the plugin documentation page.
Twitter options Attribute
list: null List name to load tweets from. You also must define the username of the list owner.
hashtag: null Option to load tweets with a specific hashtag.
count: 10 Number of tweets you want to display.
hideReplies: false Set true if you want to hide "@" replies as well.
dateFormat: %b/%d/%Y Your date format, refernce this table for available formats.

You can pass the plugin options directly from the component with the attribute data-options="optione:value,optione:value, ...". To view the full options list visit the plugin documentation page.
Share buttons type CSS Add one of the following classes to the components to change the buttons type: icon-links-grid,icon-links-button,icon-links-popup.
Share buttons size CSS Add the class icon-lg to the component to enlarge the icons.
Try it Icon lg
Share buttons social colors CSS Add the class social-colors to the component to apply the social colors to the buttons. Use the class social-colors-hover to show the social colors only on mouse hover.
Try it Social colors Social colors hover
Share buttons URL Attribute Add the attribute data-social-url="URL" to the social item to link it to a different page. By default the URL link to the current page.
Facebook documentation
Twitter documentation
Scroll box
Slider