Documentation

Social Rail documentation - HTML version

GETTING STARTED

Download the plugin, insert it into the root folder of your site, or where you want, and include these 2 files into your page. Update the path with your correct path. For slider, carousel and scroll box modes you need to include additional scripts and styles like described below. Twitter stream not work for local file system file urls like file:///, use a live website or a localhost server.

<link rel="stylesheet" href='socialrail/include/main.css'>
<script src='socialrail/include/main.js'></script>

ONLY FOR SLIDER AND CAROUSEL

<link rel="stylesheet" href='socialrail/include/flexslider/flexslider.css'>
<script src='socialrail/include/flexslider/flexslider.js'></script>

ONLY FOR SCROLL BOX

<script src='socialrail/include/slimscroll.js'></script>

USAGE

You're almost ready, just copy and paste these code lines below into your html page and replace "511238532715807" or "twitter" with the Facebook page ID or Twitter username you want. You can found the Facebook ID with this web service : findmyfbid.com



FACEBOOK - BASE

<div class="social-feed-fb no-comments" data-social-id="511238532715807"></div>

FACEBOOK - SLIDER

<div class="social-feed-fb flexslider" data-social-id="511238532715807"></div>

FACEBOOK - CAROUSEL

<div class="social-feed-fb flexslider carousel" data-social-id="511238532715807"></div> 

FACEBOOK - SCROLL BOX

<div class="social-feed-fb scroll-content" data-height="400" data-social-id="511238532715807"></div>

TWITTER - BASE

<div class="social-feed-tw" data-social-id="twitter"></div>

TWITTER - SLIDER

<div class="social-feed-tw flexslider" data-social-id="twitter"></div>    

TWITTER - CAROUSEL

<div class="social-feed-tw flexslider carousel" data-social-id="twitter"></div>  

TWITTER - SCROLL BOX

<div class="social-feed-tw scroll-content" data-height="400" data-social-id="twitter"></div>

FACEBOOK INSTALLATION - ACCESS TOKEN

You need to get an access token to make the plugin to work with Facebook. Only the Facebook Pages you own are supported.

  • 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 INSTALLATION

Twitter stream don't work for local file system file urls like file:///, use a live website or a localhost server.

To start the Twitter stream you may need to set the keys:
1 ) Go to dev.twitter.com/apps and create a new app.
2 ) Click on "Keys and Access Tokens" and get the keys.
3 ) Open the file socialrail\include\tweetie\api\config.php and replace the 4 keys with the yours.


STYLES

Name Type Description
Boxed CSS Add class feed-boxed
Dark CSS Add class feed-dark
Boxed dark CSS Add classes feed-boxed feed-dark


OPTIONS

Name Type Description
Javascript initialization Javascript
$(document).ready(function () {
    $('#target').facebook_wall({
        id: 'id-facebook-page',
        access_token: 'access-token',
        limit: 3,
        locale: "en_EN",
        show_guest_entries: false
    });
});
Options Javascript

You can pass the below options directly into the HTML with the attribute data-options="".
Ex. <div class="social-feed-fb flexslider carousel" data-social-id="511238532715807" data-options="comments:false,media:false,message_length:120"></div>

  • id: ' ' Insert your profile or fanpage ID.
  • access_token: ' ' Insert your Access Token.
  • limit: 10 Any amount from 1-15.
  • comments: true Choices: 'true' or 'false'.
  • media: true Choices: 'true' or 'false'.
  • timeout: 400 Any amount (in milliseconds).
  • speed: 400 Any amount (in milliseconds).
  • effect: 'slide' Choices: 'slide', 'fade' or 'none'.
  • locale: 'da_DK' Your contry code.
  • avatar_size: 'square' Choices: 'square', 'small', 'normal' or 'large'.
  • message_length: 200 Any amount you like. Above 0 shortens the message length.
  • show_guest_entries: true Choices: 'true' or 'false'.
  • text_labels: Your translations.
  • on_complete: Execute function when complete.
Attributes HTML
  • data-options="" insert here all the options you want. Ex. data-options="limit:3"
  • data-token="" same of access_token option
  • data-trigger="manual" if setted the plugin is not initialized and must be launched with Javascript
Translations Javascript You can translate the main texts of the stream by passing an array on initialization, use this code:

$(document).ready(function () {
    $('#target').facebook_wall({
        id: '511238532715807',
        access_token: 'access_token',
        locale: "en_EN",
        text_labels: {
            shares: { singular: "Shared % time", plural: "Shared % times" },
            likes: { singular: "% Like", plural: "% Likes" },
            comments: { singular: "% comment", plural: "% comments" },
            like: "Like", comment: "Write comment", share: "Share", days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]
        }
   });
});

Currently you can use translations only with Javascript initialization.

Plugin documentation
Name Type Description
Javascript initialization Javascript
$('#target').twittie({
	'count': 1,
	'hideReplies': true
}, function() {
	alert('loaded!');
});
Options Javascript

You can pass the below options directly into the HTML with the attribute data-options="".
Ex. <div class="social-feed-tw flexslider carousel" data-social-id="twitter" data-options="count:8,length:100"></div>

  • username: null Option to load tweets from another account or list owner's username.
  • 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 forma, refernce this table for available formats.
  • apiPath: automatic Path to your tweet.php file. It's automatically calculated
Attributes HTML
  • data-options="" insert here all the options you want. Ex. data-options="limit:3"
  • data-trigger="manual" if setted the plugin is not initialized and must be launched with Javascript
Translations Javascript You can translate the main texts of the stream by passing an array on initialization, use this code:

$(document).ready(function () {
    $('#target').facebook_wall({
        id: '511238532715807',
        access_token: 'access_token',
        locale: "en_EN",
        text_labels: {
            shares: { singular: "Shared % time", plural: "Shared % times" },
            likes: { singular: "% Like", plural: "% Likes" },
            comments: { singular: "% comment", plural: "% comments" },
            like: "Like", comment: "Write comment", share: "Share", days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]
        }
   });
});

Currently you can use translations only with Javascript initialization.

Plugin documentation
<link rel="stylesheet" href='socialrail/include/flexslider/flexslider.css'>
<script src='socialrail/include/flexslider/flexslider.js'></script>
Name Type Description
Options Javascript

You can pass the below options directly into the HTML with the attribute data-options="".
Ex. <div class="social-feed-tw flexslider carousel" data-social-id="twitter" data-options="numItems:8,itemMargin:100"></div>

  • numItems: 1 Number of items to show.
  • minWidth: 0 Set how many items are showed on mobile or small screens.
  • itemWidth: 0 Set how many items are showed on mobile or small screens.
  • minItems: 0 Min number of carousel items visibles. Items will resize fluidly when below this.
  • maxItems: null Max number of carousel items visibles. Items will resize fluidly when above this limit.
  • itemMargin: 5 Margin between carousel items.
  • move: 0 Number of carousel items that should move on animation. If 0, slider will move all visible items.
  • animation: 10 Select your animation type, "fade" or "slide".
  • easing: "swing" Determines the easing method. jQuery easing plugin is supported!.
  • direction: "horizontal" Select the sliding direction, "horizontal" or "vertical".
  • reverse: false Reverse the animation direction.
  • animationLoop: true Should the animation loop?.
  • smoothHeight: false Allow height of the slider to animate smoothly in horizontal mode .
  • startAt: 0 The slide that the slider should start on. Array notation (0 = first slide).
  • slideshow: true Animate slider automatically.
  • slideshowSpeed: 7000 Set the speed of the slideshow cycling, in milliseconds.
  • animationSpeed: 600 Set the speed of animations, in milliseconds.
  • initDelay: 0 Set an initialization delay, in milliseconds.
  • randomize: false Randomize slide order.
  • pauseOnAction: true Pause the slideshow when interacting with control elements..
  • pauseOnHover: false Pause the slideshow when hovering over slider and resume when out.
  • useCSS: true Slider will use CSS3 transitions if available.
  • touch: true Allow touch swipe navigation of the slider on touch-enabled devices.
  • video: false If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches.
  • controlNav: true Create navigation for paging control of each slide.
  • directionNav: true Create navigation for previous/next navigation? (true/false).
  • prevText: "Previous" Set the text for the "previous" directionNav item.
  • nextText: "Next" Set the text for the "next" directionNav item.
  • keyboard: true Allow slider navigating via keyboard left/right keys.
  • multipleKeyboard: false Allow keyboard navigation to affect multiple sliders.
  • mousewheel: false Allows slider navigating via mousewheel. Requires jquery.mousewheel.js.
  • pausePlay: false Create pause/play dynamic element.
  • pauseText: "Pause" Set the text for the "pause" pausePlay item.
  • playText: "Play" Set the text for the "play" pausePlay item.
Attributes HTML
  • data-options="" insert here all the options you want. Ex. data-options="numItems:3"
  • data-trigger="manual" if setted the plugin is not initialized and must be launched with Javascript

Plugin documentation
Name Type Description
Options Javascript

You can pass the below options directly into the HTML with the attribute data-options="".
Ex. <div class="social-feed-tw flexslider carousel" data-social-id="twitter" data-options="count:8,length:100"></div>

  • width: null Width in pixels of the visible scroll area. Stretch-to-parent if not set.
  • height: 250 Height in pixels of the visible scroll area.
  • size: 7 Width in pixels of the scrollbar.
  • position : right Sets the position of the scrollbar, left or right.
  • color : #000000 Color in hex of the scrollbar.
  • alwaysVisible : false Disables scrollbar hide.
  • distance : 1px Distance in pixels from the edge of the parent element where scrollbar appear.
  • start : top Defines initial position of the scrollbar, top or bottom.
  • wheelStep : 20 Integer value for mouse wheel delta.
  • railVisible : false Enables scrollbar rail.
  • railColor : #333333 Sets scrollbar rail color.
  • railOpacity : 0.2 Sets scrollbar rail opacity.
  • allowPageScroll : false Mouse wheel scroll page when bar reaches top or bottom of the container.
  • scrollTo : Jumps to the specified scroll value, ex. 50px.
  • scrollBy : ncreases/decreases current scroll value by specified amount, ex. 50px.
  • disableFadeOut : false Disables scrollbar auto fade.
  • touchScrollStep : 200 Allows to set different sensitivity for touch scroll event.
  • mobileDisabled : false Disable the scroll on mobile.
Attributes HTML
  • data-options="" Insert here all the options you want. Ex. data-options="limit:3"
  • data-trigger="manual" If setted the plugin is not initialized and must be launched with Javascript
  • data-height="123" Same as height property, accepted values: 123,.class,#ID,fullscreen
  • data-height-remove="123" Adjust the height when setted as #ID, .class, fullscreen.

Plugin documentation