Documentation
Social Rail documentation - WordPress version
PLUGIN INSTALLATION
You can install the plugin in two ways:
1. Open the WordPress admin area and go to Plugins > Add New > Upload, open the file socialrail.zip and install plugin.
2. Unzip the content of the socialrail.zip file to /wp-content/plugins/ directory and then on WordPress admin plugins page activate the plugin.
Once the plugin is activated you need to insert the shortcode you want from the ones below. Facebook require a valid access token. Twitter may require your accesses.
These settings can be inserted at Settings > Social Rail.
1. Open the WordPress admin area and go to Plugins > Add New > Upload, open the file socialrail.zip and install plugin.
2. Unzip the content of the socialrail.zip file to /wp-content/plugins/ directory and then on WordPress admin plugins page activate the plugin.
Once the plugin is activated you need to insert the shortcode you want from the ones below. Facebook require a valid access token. Twitter may require your accesses.
These settings can be inserted at Settings > Social Rail.
USAGE
You're almost ready, just copy and paste these shortcodes below and replace "156149777783739" 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
|sr site="fb" type="base" id="156149777783739" options="comments:false,limit:3"]
FACEBOOK - SLIDER
|sr site="fb" type="slider" id="156149777783739" options="comments:false,limit:4"]
FACEBOOK - CAROUSEL
|sr site="fb" type="carousel" id="156149777783739" options="minWidth:130,numItems:2,limit:8,comments:false,media:false,message_length:75"]
FACEBOOK - SCROLL BOX
|sr site="fb" type="scroll" id="156149777783739" options="limit:8,mobileDisabled:true"]
TWITTER - BASE
|sr site="tw" type="base" id="twitter" options="count:10"]
TWITTER - SLIDER
|sr site="tw" type="slider" id="twitter"]
TWITTER - CAROUSEL
|sr site="tw" type="carousel" id="twitter" options="minWidth:130,numItems:2,count:20,length:100,hideReplies:true"]
TWITTER - SCROLL BOX
|sr site="tw" type="scroll" id="twitter" options="count:8,mobileDisabled:true"]
FACEBOOK INSTALLATION - ACCESS TOKEN
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
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 ) Go to Settings > Social Rail and insert he 4 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 ) Go to Settings > Social Rail and insert he 4 keys.
SHORTCODE VALUES
| Shortcode | Value | Example | Description |
|---|---|---|---|
| site | fb - tw | site="fb" | Select the stream type, Facebook or Twitter |
| type | empty - base - slider - carousel - scoll | type="slider" | Set the stream type |
| style | boxed - dark - boxed dark | style="boxed" | Set the design |
| options | List of options | options="minWidth:130,numItems:2" | This attribute accept all the options listed below on this page |
| trigger | manual | style="manual" | If setted the stream is not activated automatically but must be activated via Javascript, go to http://www.socialrail.info/doc/#options for more details |
| height | Integer, .class, #ID, fullscreen | height="350" | *Only for Scroll Box type, set the box height |
| offset | Integer | offset="50" | *Only for Scroll Box type, set the box offset if the height is automatic |
OPTIONS
This options can be used with the shortcode attribute
options="".- 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.
- 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
- 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.
- 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.