Social Rail documentation - HTML version
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>
<link rel="stylesheet" href='socialrail/include/flexslider/flexslider.css'> <script src='socialrail/include/flexslider/flexslider.js'></script>
<script src='socialrail/include/slimscroll.js'></script>
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
<div class="social-feed-fb no-comments" data-social-id="511238532715807"></div>
<div class="social-feed-fb flexslider" data-social-id="511238532715807"></div>
<div class="social-feed-fb flexslider carousel" data-social-id="511238532715807"></div>
<div class="social-feed-fb scroll-content" data-height="400" data-social-id="511238532715807"></div>
<div class="social-feed-tw" data-social-id="twitter"></div>
<div class="social-feed-tw flexslider" data-social-id="twitter"></div>
<div class="social-feed-tw flexslider carousel" data-social-id="twitter"></div>
<div class="social-feed-tw scroll-content" data-height="400" data-social-id="twitter"></div>
You need to get an access token to make the plugin to work with Facebook. Only the Facebook Pages you own are supported.
data-token=""
of the component.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.
Name | Type | Description |
---|---|---|
Boxed | CSS |
Add class feed-boxed
|
Dark | CSS |
Add class feed-dark
|
Boxed dark | CSS |
Add classes feed-boxed feed-dark
|
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
|
Attributes | HTML |
|
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. |
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
|
Attributes | HTML |
|
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. |
<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
|
Attributes | HTML |
|
Name | Type | Description |
---|---|---|
Options | Javascript |
You can pass the below options directly into the HTML with the attribute
|
Attributes | HTML |
|