What is Social Stream?
JUX Social Stream is developed by JoomlaUX to bring you the new solution in showing all your updating information directly from different social pages on your website. Combine all of your different social network interactions into a single network stream.
Your site’s visitors won’t waste their time to browse another tabs because Social Stream Includes Facebook, Twitter, Google + & LinkedIn share links to make you social network streams more interactive, help promote your social network posts and boost your traffic.
Social Stream helps Website’s users have a brand new media to presenting these page’s updates, activities and information helps website’s users a lot in interacting with these pages
Highlight features:
- 15 Social Media Networks
- Support Joomla 2.5 and Joomla 3
- Fully Responsive
- Beautiful Design
- Simple & easy-to-use configuration
- Compatible with Tablet, Smart phone
- jQuery with noConflict
Social Stream has several system requirements as follow:
You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.
PHP should be compiled with support for https (openSSL) and cURL.
PHP Safe Mode should be turned off.
This module can run well on major browsers such as: Internet Explorer (version 10+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated.
After purchasing our product, you’ll see the download link at Social Stream product page:
http://www.joomlaux.com/download.html
Note: If there is any problem, please contact us at: http://www.joomlaux.com/support/contact-us.html
Package
After download the extension you will received an installation package named:
Module |
mod_jux_social_stream.zip |
Module Installation
Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu.
In “Upload Package File” block, please Upload & Install our extensions:
Social Style |
Select social style |
Socail List Style |
Select style color for social list. ( NOTE: Only show when choose Social List Stype) |
Max Width |
Set value for max width |
Max Height |
Set value for max height(NOTE: Only show when choose Social Stream List Stype) |
Load Open |
Yes: Social Tabs automatically open at the first time when they're loaded. No: keep hiding until user clicks on a tab.(NOTE: Only show when choose Sliding Tabs type). |
Speed |
Speed (in milliseconds) of animation.(NOTE: Only show when choose Sliding Tabs type). |
Limit Feed Type |
Select Limit Feed Type. |
Limit Feed Count |
Fill Limit Feed Count |
Rotate |
Feed rotator options. (NOTE: Only show when choose Social Stream List Stype) |
Direction |
Direction for content rotation.(NOTE: Only show when choose Social Stream List Stype) |
Rotate Delay |
Delay in milliseconds between rotations - if set to 0 the automatic rotation effect is disabled.(NOTE: Only show when choose Social Stream List Stype) |
Auto play |
Set to yes to autoplay in social stream list.(NOTE: Only show when choose Social Stream List Stype) |
Filter |
Set to yes to include a filter navigation allowing the user to filter specific social networks |
Controls |
Set to yes to include links for controlling feed rotator.(NOTE: Only show when choose Social Stream List Stype) |
External |
Set to yes to share the link in Facebook, Twitter, Google+, Linkedin. |
Enable jQuery |
On/Off jQuery. Turn it off if your site have already jQuery loaded. |
Enable noConflict |
On/Off jQuery noConflict. Turn it on to prevent conflict with Joomla's Mootools. |
Figure 1: Display interface Social Stream List
Figure 2: Display interface Social Stream Networks Wall
Figure 3: Configure of Facebook
Facebook ID |
Enter the username you would like to show for the facebook gallery. |
Access Token |
Enter the access token your page facebook. |
Comments |
Enter the maximum number of comments to display for facebook page gallery images - maximum value = 25. |
Image Width |
Enter the image size for facebook gallery images: w: 600px, w: 480px, w: 320px, w: 180px |
Feed |
-show all posts on the facebook page, including those by other users -show only those posts made by the page admin |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Here's a Screenshort
Then paste the code you just received into the back-end config
Figure 4: Configure of twitter
Twitter ID |
Enter the Twitter username |
Twitter consumer key |
Twitter consumer key |
Twitter consumer key secret |
Twitter consumer key secret |
Twitter Oauth access token |
Twitter Oauth access token |
Twitter Oauth access token secret |
Twitter Oauth access token secret |
Intro |
Text for feed item link |
Search Text |
Text for search item link |
Images |
Option to show twitter images. Image sizes are: 1. thumb - w: 150 h: 150px 2. small - w: 340 h:150px 3. medium - w: 600 h: 264px 4. large - w: 786 h: 346px |
Retweets |
Show/hide retweets |
Replies |
Show/hide replies |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Text |
Show/hide wall post text |
Share |
Show/hide include share links |
Step 1: Go to Twitter Apps (http://dev.twitter.com/apps) and follow steps below:
Step2: Create new application
Step 3: Fill application form
Step 4: Agree and submit the form
Step 5: Go to of the page and click
Step 6: Use Keys to setup your twitter
Figure 5:Configuration of Pinterest
Pinterest ID |
Enter the user name follow by/and then the board name. |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
You can get ID using way following:
Here’s a screenshot:
Figure 6: Configuration of Google+
Google+ ID |
Google+ profile ID |
Intro |
Text for feed item link |
Google+ Api key |
Google+ Api key |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
Share |
Show/hide include share links |
Your Google+ ID for your profiles is the long string of numbers present in the URL of our profile.
Here’s a screenshot:
Figure 7: Configuration of RSS
RSS ID |
RSS feed Url |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display RSS name |
Share |
Show/hide include share links |
Figure 8: Configuration of youtube
Youtube ID |
Enter the required user name |
Intro |
Text for feed item link |
Search Text: |
Text for search item link |
Thumb |
Select image size |
Api key |
Youtube API KEY - required |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
You can get ID using way following:
Here’s a screenshot:
To do it, click on “Project” button and select “Create project” from the drop-down select.You will see the new project window.
Congratulations! You’ve just created your first Google APIs project. Now let’s see how you enable YouTube Data API.
The first thing you need to do is open the “YouTube Data API” page.
Click “Enable” link in the page’s header.
Click on “Create credentials” button and select “API Key” from the drop-down menu
Done! You’ve got your API key.
Figure 9: Configuration of Instagram
Instagram ID |
Enter the required Instagram's ID |
Intro |
Text for feed item link |
Search Text |
Text for search item link |
Access Token |
Instagram Access Token |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Meta |
Show/hide meta |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Instagram ID is the numeric represents your account. If you don’t know how to get it, please do these steps:
1. Go to http://jelled.com/instagram/lookup-user-id
2. Input your username and hit enter. You’ll get your ID:
Creating Your Own Instagram API Client ID & Access Token In order to use the Instagram feed you must first create your own "Client ID"
Application name: social media tabs Description: create a social stream from multiple networks Website: enter your website URL - e.g. http://www.joomlaux.com OAuthredirect_uri: enter the URL of a page where the social stream is installed - this is required to get your access token, which you can then insert into the instagram options. Once you have the access token you can use this on all pages, which use the social media tabs plugin on the website listed above.
e.g. 186786085.f59def8.1d34b28a52e04d36ba1dc52ca98215dc
Figure 10: Configuration of Vimeo
Vimeo ID |
Vimeo user's ID |
Intro |
Text for feed item link |
Images |
Size of thumbnail image |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Data feed to be shown |
|
Likes |
Show/hide Most recent likes |
Videos |
Show/hide Videos created by user |
Appears In |
Show/hide Videos that the user appears in |
Albums |
Show/hide Videos that the user appears in and created |
Channels |
Show/hide Channels the user has created and subscribed to |
Groups |
Show/hide Groups the user has created and joined |
You can get ID using way following:
Here’s a screenshot:
Figure 11: Configuration of Flickr
Flickr ID |
Text for feed item link |
Intro |
Flickr ID |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
Share |
Show/hide include share links |
Flickr ID is the ID represents your account. It has the format: xxxxx@N0x. If you don’t know how to get it, please do these steps:
1. Go to http://idgettr.com/
2. Input your username and hit enter. You’ll get your ID:
Figure 12: Configuration of Tumblr
Tumblr ID |
Tumblr username |
Intro |
Text for feed item link |
Width Image |
Width of thumbnail image - enter 75, 100, 250, 400, 500, or 1280 |
Width Video |
Width of inline video player - enter 250, 400 or 500 |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
You can get ID using way following:
Here’s a screenshot:
Figure 13: Configuration of Stumbleupon
Stumbleupon ID |
Stumbleupon username |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Data feed to be shown |
|
Favorites |
Show/hide The sites you thumbed up |
Reviews |
Show/hide Reviews you have written |
You can get ID using way following:
Here’s a screenshot:
Figure 14:Configuration of Delicious
Delicious ID |
Delicious Username |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
You can get ID using way following:
Here’s a screenshot:
Figure 15: Configuration of Last.fm
Last.fm ID |
Last.fm Username |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Data feed to be shown |
|
Recenttracks |
10 recently played tracks for this profile |
Lovedtracks |
A feed of tracks a user has loved |
Replytracker |
A feed of replies to a user's forum posts and journal comments' |
You can get ID using way following:
Here’s a screenshot:
Figure 16: Configuration of Dribbble
Dribbble ID |
Dribbble Username |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |
Content to include in stream output |
|
Shots |
Show/hide Options include latest shots |
Likes |
Show/hide Options include latest likes |
AccessToken |
Show/hide creating your own dribbble access token |
You can get ID using way following:
Here’s a screenshot:
Go to http://developer.dribbble.com/
Click "Register An Application"
Complete the "Register Application" form - e.g:
Name: social stream
Website URL: enter your website URL - e.g. http://www.designchemical.com
Check the "I accept the Dribbble API Terms & Guidelines" box
Click the "Register application" button
If the application has been submitted successfully you will see at notification at the top of the screen.
The "Client Access Token" will now be displayed at the bottom of the page. Copy/paste this token into your Dribbble "accessToken" option
Figure 17: Configuration of Deviantart
Deviantart ID |
Deviantart Username |
Intro |
Text for feed item link |
Content to include in stream output |
|
Intro |
Show/hide Item summary - icon, link & date |
Thumb |
Show/hide thumbnail (if available) |
Title |
Show/hide feed item title |
Text |
Show/hide wall post text |
User |
Show/hide display user name |
Share |
Show/hide include share links |