Thank you for purchasing the Wordpress Social Stream plugin!
If you have any questions that are beyond the scope of this help file, please feel free to send us an email using the contact form on our profile page. We are also available for hire if you require any customisations or assistance with Wordpress.
Installing plugins in Wordpress is a quick and easy process:
1. In Wordpress admin go to Wordpress Admin->Plugins->Add New
2. Click the Upload link
3. Click the "Browse" button and select the plugin zip folder from your hard drive
4. Click the "Activate" link to complete the plugin installation
To access the Wordpress Social Stream plugin settings page go to Wordpress Admin->Settings->Social Stream.
The first tab is split into 2 sections:
1. Saved Streams
This section lists all of your previously saved social network streams.
Note: Save the stream settings by clicking the "edit stream" or "create new stream" buttons when complete.
The settings section allows you to configure the default features for displaying the social streams. Settings can be changed for individual social streams using the shortcodes:
The plugin includes extensive social network ID options, which are entered into the "Id" field in the stream settings. Inline help is given in the settings page for each social network regarding how to enter each Id.
Below is a summary of the Id options available for each network:
Options |
---|
Twitter has 3 different feed options:
|
Options |
---|
Facebook has 2 different ID options:
|
Options |
---|
Google + has 1 ID option:
|
Options |
---|
Youtube has 2 different ID options:
Note: The maximum limit for each youtube feed is 50 - if the limit option is set higher than 50 the plugin will automatically use 50 for youtube feeds. |
Options |
---|
Flickr has 2 different ID options:
|
Options |
---|
Delicious 1 ID option:
|
Options |
---|
Pinterest has 2 different ID options:
|
Options |
---|
RSS Feeds have 1 ID option:
|
Options |
---|
Last.fm has 1 ID option:
|
Options |
---|
Dribbble has 1 ID option:
|
Options |
---|
Vimeo has 1 ID option:
|
Options |
---|
Stumbleupon has 1 ID option:
|
Options |
---|
Deviantart has 1 ID option:
|
Options |
---|
Tumblr has 1 ID option:
|
Options |
---|
Instagram can hande 4 different types of network feed ID - search, tags, user ID and a location ID:
As with all networks multiple feeds can be entered by separating each feed ID with a comma: |
The plugin creates a social stream, which is a single stream of items and updates created from all of your individual social network profiles, data feeds and APIs.
The social stream combines each different network and orders them by date, giving you a single, standardised feed showing your social interactions over time. This gives you more opportunities to present all of this information in more useful and interesting ways.
The plugin includes 2 different features for you to display your social stream on your website - a rotating feed list plus the social network wall - more information provided on each feature in the following sections & demo pages.
Clicking on any of the help icons will display a drop-down section with more information on the settings.
One available display option built-into the plugin is to present the feed items as a "Network Wall". This wall uses jQuery isotope to create the layout and includes an animated filter feature.
The network wall can be easily added to any WordPress page using the following shortcode:
[dc_social_wall id="XXX"]
The ID for the social stream can be found from the list of saved streams in the plugin settings page.
The rotating feed list creates a list of feed items, which continuously loop in a widget style container. The plugin has 2 built-in skins, which can be used:
To create a rotating social feed list with the default settings (as per plugin settings page in admin) and with the built-in "light" skin use the following shortcode:
[dc_social_feed id="XXX"]
To switch to the dark sample skin:
[dc_social_feed id="XXX" style="dark"]
The wall layout is responsive and will therefore adjust according to the width of the parent element. Use the "cols" parameter to adjust whether to display 1, 2, 3, 4 or 5 columns (default = 4 columns).
Example - create a 3 column wall layout:
[dc_social_wall id="XXX" cols="3"]
The wall will automatically use the default settings according to the "plugin settings page in WordPress admin. To change these settings include the relevant parameter in the shortcode:
Option | Default | Alternatives | Description |
---|---|---|---|
results: | 30, | Number of results per network feed | |
max: | 'days', | days, limit | Set whether to create the feed based on maximum days or number of results per network' |
order: | 'date', | 'date', 'random' | Option to display wall items by date or randomly |
filter: | true, | true, false | Set to true to include a filter navigation allowing the user to filter specific social networks' |
cache: | true, | true, false | Set to true to cache AJAX response, set to false to force response not to be cached by the browser' |
To create a 3 column social network wall randomly displaying the last 20 items for each feed:
[dc_social_wall id="XXX" cols="3" max="limit" limit="20" order="random"]
To use your own CSS styles for the feed widget just include the CSS class name using the "style" parameter:
Example - create a feed list with the class name "custom-class":
[dc_social_feed id="XXX" style="custom-class"]
The feed list will automatically use the default settings according to the "plugin settings page in WordPress admin. To change these settings include the relevant parameter in the shortcode:
Option | Default | Alternatives | Description |
---|---|---|---|
controls: | true, | true, false | Option to include navigation controls |
rotate_delay: | 8, | Number of seconds delay for rotation | |
rotate_direction: | 'up', | 'up', 'down' | Direction of rotation |
speed: | 0.6, | Speed of ticker animation in seconds | |
results: | 30, | Number of results per network feed | |
max: | 'days', | days, limit | Set whether to create the feed based on maximum days or number of results per network' |
order: | 'date', | 'date', 'random' | Option to display feed items by date or randomly |
filter: | true, | true, false | Set to true to include a filter navigation allowing the user to filter specific social networks' |
cache: | true, | true, false | Set to true to cache AJAX response, set to false to force response not to be cached by the browser' |
To create a rotating feed list using the "dark" skin with a delay of 8 seconds, direction = down and controls disabled:
[dc_social_feed id="XXX" style="dark" rotate_delay="8" rotate_direction="down" controls="false"]
To use WordPress shortcodes outside of the post/page content, directly in a template file, you need to use additional code to call the shortcode function:
<?php echo do_shortcode('[dc_social_wall id="111"]'); ?>
If you do want to create a custom style for your social streams you can use a copy of the default css file, which is held in the same folder as this help file - see sample.css.
In the plugin settings page disable the "default skin" option to prevent the plugin from loading the original CSS - Wordpress Admin->Settings->Social Stream->Settings->Styling
Note - remember to always add any customised style sheets to your THEME FOLDER and NOT the plugin folder. Wordpress automatically deletes and updates ALL plugin files whenever an upgrade is issued.
The default styling for the feed items for the social network wall uses % widths.
To change this to fixed width so that in responsive theme layouts the number of columns in your wall will adjust based on the browser width (see demo - Full Page Responsive Network Wall) set the "Use Fixed Widths" switch to "on" in the plugin admin "Styling" section:
Wordpress Admin -> Settings -> Social Stream -> Settings -> Styling
Enter your preferred width and margins into the text fields below the switch:
e.g The Full Page Responsive Network Wall demo uses the settings shown in the screenshot above - 226 width and margins of 0, 15, 15 & 0.
To disable fixed widths and use the default % widths change the "Use Fixed Widths" switch to "off".
Starting with version 1.7 of the plugin the Twitter API now requires authentication.
To create your own Twitter API credentials
The plugin should now be able to access your Twitter feed.
Note that the above values are for demonstration only and will NOT work with your plugin.
Starting with version 1.5.8 of the plugin facebook feeds now require authentication.
To create your own Facebook App
The google +1 feed requires an API key. Fortunately creating your own google API key is fairly quick and easy:
Youtube feeds now require a google API key:
In order to use the Instagram feed you must first create your own "Client ID"
There are 4 different types of feed that can be included from Instagram:
The user feed will show the latest posts from a specific user ID. To create a user feed use "!" followed by the user ID - e.g.
id: '!123456'
To display the latest posts for a specific location enter a "@" followed by the instagram location ID - e.g.
id: '@123456'
To display the latest posts for a specific tag enter a "#" followed by the tag text - e.g. to search for images tagged with "london"
id: '#london'
To display the latest posts for a geographical location you need 3 parameters - latitude, longitude and distance(in meters up to 5000m). Enter these values starting with a "?" followed by the lat, long and distance separated by a "/" e.g.
id: '?55.123/-1.345/1000'
As with all of the other networks you can add multiple instagram feeds of any type by separating each ID with a comma - e.g.
id: '!123456,@123456,?55.123/-1.345/1000,#london,#newyork'
The instagram feed also includes the option to display the latest comments for each post plus thumbnails of users who liked the post.
To add either comments or likes enter the number that you wish to display in the "comments" and "likes" text fields.
For the facebook like box the ID of your facebook page must be used - this should be a numerical value, not the actual name of your facebook page - e.g. 157969574262873
To get the ID from your username you can use the following tool from facebook - replace "username" with the name of your facebook page profile:
To get your facebook gallery ID browse to your facebook gallery page - e.g:
http://www.facebook.com/media/set/?set=a.110070145819348.18558.110041542488875&type=3
The ID for the gallery is the first set of numbers - in the example above this would be - 110070145819348
http://www.facebook.com/media/set/?set=a.110070145819348.18558.110041542488875&type=3
To get your youtube list ID from a profile name we have created a simple online tool - How to get your Youtube ID
To get your google profile ID for the google +1 tab go to your google accounts page and click on the “edit profile” link.
Check the URL in the browser address bar – your profile ID is the number in the middle of the URL:
https://profiles.google.com/100058553707375301897/about/
To get your instagram user ID first get your access token - see section above "Plugin Options -> Creating Your Own Instagram API Client ID & Access Token".
Browse to the following URL - changing YOUR USER NAME & YOUR ACCESS TOKEN for your values:
https://api.instagram.com/v1/users/search?q=YOUR USER NAME&access_token=YOUR ACCESS TOKEN
The Instagram API should then load a page containing text with your profile details similar to the format shown below:
{"meta":{"code":200},"data":[{"username":"YOUR USER NAME","bio":"","website":"","profile_picture":"","full_name":"","id":"YOUR USER ID"}]}
Search for the "id" parameter usually located at the end of the text.
This problem is usually caused by either a javascript error elsewhere on the page or the required jQuery files have not been loaded. Check your page using Firebug for more details on any javascript errors.
If you are seeing the shortcode text appearing in the sidebar widget instead of the social stream then your theme is not set up to process shortcodes in text widgets. In order to add this feature see the following tutorial:
Check the date of the last post from the social network that is missing and make sure that your settings for "Stream" & "Results" are set correctly in order to include older posts.
In order to ensure that all social networks are included set the "Stream" option to "limit" - this will now include a fixed number of posts per feed as opposed to X number of days.
Note: the default setting for the plugin shows the last 5 days of posts.
If your twitter feed is not displaying make sure that you have set up your Twitter API Credentials.
If the twitter feeds are not showing and your Twitter API credentials are vallid this may be due to the limits imposed by Twitter on their API:
Searches - 180 calls per 15 mins.
Lists - 180 calls per 15 mins.
Users - 180 calls per 15 mins.
During this time other users will still be able to view your twitter feeds as limits are on a per user and per application basis.
There are 3 main reasons your facebook feed may not work:
1. Your facebook page ID is incorrect.
2. You are trying to use a facebook profile instead of a page.
For more information on how to create a facebook page see - http://blog.hubspot.com/blog/tabid/6307/bid/5492/How-to-Create-a-Facebook-Business-Page-in-5-Simple-Steps-With-Video.aspx
3. Your facebook settings restrict the age of the user that may view your page or you have profanity filters set - in order for the facebook feed to work you must remove any age/profanity restrictions from your fan page.
You can use the twitter search function to show searches from specific usernames using the following format -
e.g. to search tweets containing "jquery" from user "designchemical"
#jquery+from:designchemical
Below the network tabs for each social stream there is a field called "Remove Posts".
To remove specific posts from a social stream enter the URLs of each post into this field - separate each URL with a comma
Although the plugin does not include a lightbox, these can be included either separately as a plugin or integrated via your theme to enhance the social stream. An example of using a lightbox with the stream to show inline youtube and vimeo videos can be found on our demo website - Adding a jQuery Lightbox.
In the demo example we have used the jQuery prettyPhoto lightbox. Below is an example of the additional code added to open the videos in the ligthbox popup:
jQuery(window).load(function(){ jQuery(".dcsns-youtube .section-thumb a, .dcsns-vimeo .section-thumb a").prettyPhoto({ autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:'pp_default', show_title: false}); });
The actual code required would depend on which lightbox you wish to use and usually can be found in the lightbox documentation.
The only key requirement is that the jQuery code is initialised using the jQuery(window).load(function() as the feed must be fully loaded before the lightbox is added.
Each social network feed item has its own css class, which allows you to target specific feed - e.g. dcsns-youtube for youtube feeds, dcsns-vimeo for vimeo feeds, etc.
If you are using the jQuery Fancybox lightbox plugin you can use the following code for youtube videos:
jQuery(window).load(function(){ jQuery(".dcsns-youtube .section-thumb a").click(function() { jQuery.fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'title' : this.title, 'width' : 680, 'height' : 495, 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type' : 'swf', 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); return false; }); });
Once again, thank you for purchasing the WordPress Social Stream plugin!
If you have any questions relating to this plugin or suggestions for future improvements please contact us via our Code Canyon profile or via our website - http://www.designchemical.com/blog/