Simple Social Media Stream extension is the best choice for those who are looking for an easy way to share their social networking updates on their Joomla ready website.
This extension gives you a combined social media stream for all of your social network updates, and can display them in 3 different layouts: Wall, Timeline, Carousel. It supports 9 and growing social networks including Facebook, Twitter, Google, Pinterest, Instagram, Youtube, Vimeo, RSS and LinkedIn and includes about 21 feeds options.
Your visitors will be able to share your posts on Facebook, Twitter, Google or Linkedin from your website. They will also have the option to reply, retweet or favorite the Twitter posts on your stream. They can even filter your social stream by social network.
You can also change the style of your stream using the theme manager and/or custom CSS stylesheets, and make it unique to your website.
Simple Social Media Stream Joomla Extension
Created By: Axent Media
Created On: 30 July 2017
Last Update: 26 August 2018
Version: 2.0.0
If you have any questions or suggestions concerning to Simple Social Media Stream extension, please contact us via our page on CodeCanyon http://codecanyon.net/user/axentmedia2 or via our website at http://axentmedia.com/
Note: We provide free installation and configuration for clients. After purchase, simply contact our support desk and provide us your website information to get this service for free.
This is by far the easiest way of installing a Joomla extension.
Extensions » Manage » Install
.Upload Package File
tab, select the extension file (zip files only) e.g. pkg_simplesocialmediastream.zip
from your hard drive and upload it.Extensions » Manage » Manage
.Now, you have installed the Simple Social Media Stream extension. You would have to read the quick start guide, create your Social Stream, add your Social Stream on your website and configure the settings to fit your needs.
After installation, you would have to create your Social Stream. Here we will show you how to create different form of feeds on your website.
In this topic we create a Facebook wall on our website.
Note: Facebook requires authentication to provide the feed's data. Read this topic for more details.
Components » Simple Social Media Stream » Social Streams
.1. New
button.3. Social Networks
tab.5. Save
button.Components » Simple Social Media Stream » Settings
page. Read this topic for more details.Menus » Main Menu
and in the "Menus: Items" page, click the 6. New
button.7. Select
button on front of the "Menu Item Type" and in the new opening window, select the 8. Simple Social Media Stream > Single Stream
.Stream Options
tab and make sure the Wall is selected as Type and finaly, click the 11. Save
button.Your social wall is ready now. Browse to your created page on your website to see the wall. Your social wall will look something like the following picture.
For more information about creating/editing a Social Stream click here.
In this topic we create a Facebook timeline on our website.
Note: Facebook requires authentication to provide the feed's data. Read this topic for more details.
Stream Options
tab and select Timeline as Type and finaly, click the 2. Save
button.Your social timeline is ready now. Go to your created page on your website to see the timeline. Your social timeline will look something like the following picture.
In this topic we create a Facebook + Twitter carousel on our website.
Note: Facebook and Twitter require authentication to provide the feed's data. Read this topic for more details.
Stream Options
tab and select Carousel as Type and finaly, click the 2. Save
button.Your social carousel feed is ready now. Go to your created page on your website to see the carousel.
To access the Social Streams management page, go to Joomla admin panel » Components » Simple Social Media Stream » Social Streams
This section lists all of your previously added Social Streams.
To add a new Social Stream, in the Social Streams page, click the New
button.
Here we will explain various parts of Add/Edit Social Stream form and all the relevant social network tabs.
Enter a name that describes your Social Stream. This name is for your reference only.
Select the content blocks you want to be included in each item on the Social Stream. Each social network may have different type of content blocks available.
This section allow you to set up the networks you want to include in your Social Stream. To add a social network to your Social Stream, go to its tab and fill out its configuration form.
To add a specific social network feed to your Social Stream, you need to declare it using an option (ID, username, search term, etc) depending on type of the network. Some social networks have multiple type of feeds available. You are required to use at least one of the options available for the social network feed to make it available in your Social Stream output.
Below is a summary of the options available for each network:
Facebook requires authentication to provide the feed's data. Click here for more details.
Facebook provides 2 different feed options:
1. Facebook Page FeedThe feed of posts (including status updates), photos and links on this page.
Specific sets of postsYou can set here to get sets of posts published by this page, or by others, or by both on this page.
2. Facebook Group FeedThe feed of posts (including status updates), photos and links on this group.
To Get Your Facebook Page/Group ID:Method 1:
You can find it in your Facebook page/group setting.
Method 2:
Obtain it from this website (Page or Group ID both).
Or, from this website (Page ID only).
Method 3:
Type in the following URL in your web browser: https://graph.facebook.com/username
Replace “username” with the name of your Facebook page profile. It should churn out a result including your page ID.
Shows all photos this page is tagged in. Enter the album ID or the page ID.
To find a Facebook album ID:Browse to your Facebook photos page and click on Albums - e.g. https://www.facebook.com/envatomarket/photos_stream?tab=photos_albums
Select an album - e.g. https://www.facebook.com/media/set/?set=a.676459932448951.1073741828.624290390999239&type=3
The album ID is the first set of numbers - in the example above, the album ID would be - 676459932448951
Shows all videos this page is tagged in. Enter the page ID.
Date Time Range:Get posts in a certain date/time from Facebook feed.
Twitter requires authentication to provide the feed's data. Click here for more details.
Twitter provides 3 different feed options:
1. Twitter UsernameEnter a Twitter username without “@”.
Browse to your Twitter page - e.g. https://twitter.com/axentmedia
The Twitter username is the last word in the URL - in the example above, that would be - axentmedia
To use a Twitter list use one of the following methods:
Method 1:
Enter the list ID - e.g. 123456
Method 2:
Browse to the Twitter list - e.g. https://twitter.com/mashable/lists/social-media
Enter the owner screen name, then “/” followed by the list slug - using the example above, that would be - e.g. mashable/social-media
To search enter the search terms/hashtag - e.g. socialmedia
Get posts in a certain ID range from Twitter feed.
Since ID: Returns results with an ID greater than (that is, more recent than) the specified ID.
Max ID: Returns results with an ID less than (that is, older than) or equal to the specified ID.
605472728351707136
Google+ requires an API Key to display feed data. Click here for more details.
Google+ provides 1 feed option:
Google Profile IDEnter your Google+ profile ID.
To find your Google+ profile ID:Browse to your Google+ page - e.g. https://plus.google.com/112592709425670873637
Your Google+ profile ID is the last set of numbers in the URL - in the example above, that would be - 112592709425670873637
Pinterest provides 2 different feed options:
1. Pinterest usernameTo get a Pinterest username, browse to your Pinterest page - e.g. https://www.pinterest.com/2013TopPins/
The Pinterest Username is the last word in the URL - in the example above, that would be - 2013TopPins
To show a Pinterest board enter the username, then "/" followed by the board name.
Browse to a Pinterest board - e.g. http://www.pinterest.com/2013TopPins/techology-trends/
In the example above, you would select - 2013TopPins/techology-trends
Flickr requires an API Key to display feed data. Click here for more details.
Flickr provides 2 different feed options:
1. Flickr User IDTo get your Flickr User ID:
46221135@N04
To get a Flickr group ID:
78842177@N00
Instagram requires your API Access Token to provide the feed's data. Click here for more details.
Instagram provides 3 different feed options:
1. Instagram User Feed
Get the most recent media published by the owner of the Access Token.
Enter self
=> To get the feed from owner of the Access Token that is set in Board Settings and/or Access Token string
=> extra Access Token from another Instagram account you want to get its feed.
To search by tag enter the tag name - e.g. joomla
To show the latest posts by a location, enter the location ID.
4. Instagram geographical locationTo search by geographical location start with the latitude, longitude and distance in meters (up to a maximum of 5000) all separated by a "," - e.g. 48.858844,2.294351,2000
Youtube requires an API Key to display feed data. If you have previously generated and added an API Key for Google+ you wil not need to do it again for YouTube as they are both using the same key. Click here for more details.
Youtube provides 2 different feed options:
1. Youtube usernameTo get a Youtube username, browse to the desired Youtube profile page - e.g: https://www.youtube.com/user/envatopsd
The Youtube username is the last word in the URL - in the example above, that would be - envatopsd
To get a Youtube playlist ID, on the desired Youtube profile page click on the Playlists tab, select and browse to a playlist - e.g: https://www.youtube.com/watch?v=z4icxr8B7ik&list=PLsBcifUwsKVXunQPoySupBM6QCcWliTKi
The playlist ID is the last set of characters in the URL - in the example above, that would be - PLsBcifUwsKVXunQPoySupBM6QCcWliTKi
To search enter the search terms - e.g. Joomla
Returns a list of videos uploaded by this channel - Enter a YouTube channel ID - e.g. UC1yP5nx6JNEBQI3ps2XFMpz
Vimeo provides 1 feed option:
Vimeo usernameTo get a Vimeo username, browse to the Vimeo profile - e.g: http://vimeo.com/bvanpeski
Your Vimeo username is the last name in the Vimeo profile URL - in the example above, that would be - bvanpeski
RSS Feeds have 1 feed option:
RSS feed URLEnter the RSS feed URL - e.g. http://feeds.bbci.co.uk/news/world/europe/rss.xml
Select Snippet for displaying a summary of the post or select Full Text to include any links or images in the feed - if available.
SoundCloud requires an API Client ID to provide the feed's data. Click here for more details.
SoundCloud provides 1 feed option:
SoundCloud User TracksThe list of tracks of the user. Enter the SoundCloud Username - e.g. mayerhawthorne
Browse to your SoundCloud page - e.g. https://soundcloud.com/axentmedia
Your SoundCloud Username is the last set of characters in the URL - in the example above, that would be - axentmedia
VK provides 2 different feed options:
1. VK Wall DomainReturns a list of posts on a user wall or community wall.
Enter the user or community short address - e.g. wphelpme
or, ID of the user or community that owns the wall - e.g. id999999999
.
Returns a list of posts on a user wall or community wall.
Enter the ID of the user or community that owns the wall. By default, current user ID - e.g. 99999999
. Use a negative value - to designate a community ID - e.g. -99999999
.
LinkedIn requires an API Key to display feed data. Click here for more details.
LinkedIn provides 1 feed option:
LinkedIn Company Page IDReturns a list of the company updates.
Enter the LinkedIn Company Page ID - e.g. 10354180
.
To edit a Social Stream, click on the name of the Social Stream to display the Social Stream configurations in a new page. Make your desired changes and click the "Save" button to save the new configurations.
To delete a Social Stream, click on the left down button beside the Social Stream name and click on "Trash". This will move the Social Stream to the Trash folder but, if you are going to remove it permanently from the Joomla system, remove it from Trash.
Let's say you would like to translate the component to Spanish, these are the steps you should follow:
/language/en-GB/en-GB.com_simplesocialmediastream.ini
into the /language/es-ES/
folder using an FTP client./language/es-ES/es-ES.com_simplesocialmediastream.ini
in the folder.es-ES.com_simplesocialmediastream.ini
and translate all the English definitions into Spanish.Find out more information on Joomla Official Translations Documentation.
To access the Social Stream Settings page, go to Components » Simple Social Media Stream » Settings
In this section you will be able to configure the settings for your Social Streams. The setting page is splitted into 4 section tabs:
This tab is splitted into 4 sections including General Settings, Wall, Timeline and Carousel settings.
The style of your Social Stream.
Results LimitLimiting the maximum number of results to display on the stream.
Words LimitLimiting the description words count to display for each item on the stream - Leave empty for no limit.
Comment Words LimitLimiting the comment words count to display for each item - Leave empty for no limit.
Title LimitLimit of the title words count to display for each item on the stream - Leave empty for no limit.
User info position & detailThis will define, how to display the user info for each item on the Social Stream.
Lightbox contentThis will define, how to display the Social Stream item information in lightbox window.
Item image styleThis will define, how to display the image for each item on the Social Stream.
Read moreIf checked, the (…) character at the bottom of each feed item will be linked to the rest of the content.
OrderingSelect whether to order the results depending on date of each item or randomly.
Load moreIf checked, a load more bar will appear at the bottom of the social network wall and loads more social items if clicked.
LinksIf checked, all links will open in a new window else they will be open in the parent window.
Nofollow linksIf checked, all links will have the status of nofollow.
Use httpsIf checked, all links and images will be getting over https.
Displaying AdsIf any of these items is checked, the ads (from Manage Ads) will be displayed on it.
Filter networksIf checked, a navigation bar of all active network icons will appear at the bottom of the rotating feed or above the social network wall. These icons will allow the user to filter the social stream items.
Display Show AllShow All button will appear at the first or end of the social network filtering navigation bar.
Filtered by defaultWhich filtering button to be selected by default.
Filter networks orderingOrder of the filtering navigation bar that appear at the bottom of the rotating feed or above the social network wall. Do not forget to save the changes.
Stream Auto UpdateIf enabled, the Social Stream will get updated automatically without the need to refresh the page - If enabled, the "Cache Time" value will be ignored and considered as 0.
Auto update intervalThe time delay for updating the Social Streams (in minutes). Considering that there are some limits on social networks about the number of requests sent to their API, the minimum allowed value is 1.
Cache TimeThe time delay for caching of Social Streams (in minutes) - reduces up download time. 0 Zero value means no caching.
NOTE: Make sure the `media/com_simplesocialmediastream/cache` path is writable by the server (depending on your web hosting server, permissions set to 755, 775, or 777).
Number of feed crawls per each request. 0 Zero value means to crawl all at once. (depending on your web hosting server resources, some servers can not read a lot of feeds at the same time).
API connection timeoutSocial API request connection timeout (in seconds). (depending on your web hosting server resources, some servers can not wait to process very long time).
Debug LogIf checked, all social APIs errors will be logged in a file in "administrator/logs/com_simplesocialmediastream.log" path. You can find all the problems that may occurs during the feed crawling process.
NOTE: Make sure the `com_simplesocialmediastream.log` file inside the `administrator/logs` folder is existed and writable by the server (depending on your web hosting server, permissions set to 644, 655, or 666).
These options only apply to the wall display mode.
Duration of the transition when items change position or appearance - in milliseconds - 0 means no transitions.
StaggerStaggers item transitions, so items transition incrementally after one another - in milliseconds - Leave empty to disable it.
Search FilteringIf checked, a search box will appear above the social network wall allowing the user to filter the social stream items using a search phrase.
Filter DirectionLet layout to start render from left to right or, right to left.
Re-layout wall based onIf "Page scroll" is enabled, the wall gaps will get filled when the visitor scroll the page but, if "Images load" is enabled, the wall gaps will get filled when a new image on the wall is loaded.
Wall Block WidthWidth of wall block (px) - Leave empty for full width.
Wall Block HeightHeight of wall block (px) - Leave empty for infinite height.
Item Width Definition
If "Fixed Width" is enabled, the "Item Width" value will be applied to each wall item - Responsive Breakpoints will be ignored.
If "Based on browser width" is enabled, the "Responsive Breakpoints" sets will be applied to wall items based on browser width.
If "Based on container width" is enabled, the "Responsive Breakpoints" sets will be applied to wall items based on wall container block width.
Defines the number of items (columns) shwoing on each row for different viewport/container sizes - Requires "Fixed Width" to be disabled.
Gutter XThe horizontal space between item elements - in pixels. This may changes automatically when "Fixed Width" is disabled.
Gutter YThe vertical space between row elements - in pixels. This may changes automatically when "Fixed Width" is disabled.
These options only apply to the carousel display mode.
Defines the animation speed (in ms) of the rows moving left or right.
Transition SpeedThe time (in ms) between each auto transition.
Auto WidthIf enabled, the "Slide Width" value will be applied to each slide - Number of items will be ignored.
Number of itemsDefines the number of items shwoing in each slide for different viewport sizes - Requires Auto Width to be OFF.
Slide WidthWidth of slide item (px) - Do not leave empty!
Animation DirectionSets the direction of carousel feed movement to either "right" or "left".
ControlsIf checked, prev/next buttons will be displayed.
Auto StartIf checked, the Slider will automatically start to play.
Loop slideIf checked, will enable the ability to loop back to the beginning of the slide when on the last element - Slide Move will be ignored.
Slide MoveNumber of slides to be moved at a time - Requires Loop slide to be OFF.
Enable pagerEnable/disable pager option.
Slide MarginSpacing between each slide.
These options only apply to the timeline display mode.
To display timeline in one column or based on browser screen width.
Some networks require authentication to provide feed data.
To access the API Credentials page, from the top menu, click on Components » Simple Social Media Stream » Settings » API Credentials
tab.
In this quick guide we are going to show you how to create an App in Facebook and get the App Token. This is required for all Facebook feeds.
If you want to use this method, your app must be reviewed and approved by Facebook for the 'Page Public Content Access' permission.
Required For All Twitter Feeds.
To create your Twitter API credentials:After creating the Application, the Application Details page opens.
Copy the API Key, API Secret, Access Token and Access Token Secret values and paste into the "Twitter API Credentials" form in "Social Stream Settings" page and the extension should now have access to your Twitter feed data.
To create an Instagram API Access Token, use one of the following methods:
Components » Simple Social Media Stream » Settings
.API Credentials
tab and scroll to the Instagram API Credentials section.If you want to use this method with any other endpoint rather than "Instagram User Feed" (users/self/media/recent), it requires your app to be approved by Instagram.
Components » Simple Social Media Stream » Settings
.API Credentials
tab and scroll to the Instagram API Credentials section.In this quick guide we are going to show you how to create and obtain your LinkedIn Access Token. This is required to get any type of LinkedIn feeds.
You can add your Social Stream on your website in 2 different ways:
Menus » Main Menu
and in the "Menus: Items" page, click the 1. New
button.2. Select
button on front of the "Menu Item Type" and in the new opening window, select the 3. Simple Social Media Stream > Single Stream
.Save
button.Browse to your created page on your website to see the social stream.
Extensions » Modules
.2.
Set your Social Stream requirements, 3.
set a position for displaying the Social Stream on your website and finally, 4.
set the module status to Published.Menu Assignment
tab and assign the module to your desired pages and 6. Save
.Browse to the pages on your website you have assigned the module, to see the social stream.
To access the Themes management page, from Joomla admin panel go to Components » Simple Social Media Stream » Themes
This section lists all of your previously added Themes.
To edit a Theme, click on the name of the Theme to display the Theme configurations in a new page. Make your desired changes and click the "Save" button to save the new configurations.
To delete a Theme, click on the left down button beside the name of the Theme and click on "Trash". This will move the Theme to the Trash folder but, if you are going to remove it permanently from the Joomla system, delete it from Trash.
To create a Theme, click the New
button in the Themes management page.
Select a name for the theme CSS class selector (without dot).
Stream LayoutThe stream layout is the main displaying structure of the output feed items. We have created 5 different layouts for this extension. You can create your own layout and put in the media/com_simplesocialmediastream/layout/
folder to use here.
To create your own custom layout:
media/com_simplesocialmediastream/css/styles.css
located in your Joomla directory using an FTP client, add your own css at the end of the file and minify the file to styles.min.css again.media/com_simplesocialmediastream/layout
and create a new .php file with your own layout name - e.g. mylayout.phpCustom CSS for styling the Social Stream can be entered into this text area. Any CSS rules included in this text area will automatically be inserted into the page.
As an example you can write your CSS code something like this:
.sboard.<class-name> .sb-item { font-family: Arial, sans-serif; }
Replace <class-name> with the "CSS Class Name" in the current theme.
Each type of stream has it's dedicated options in a separate tab.
Body Background ColorThis color applies to your Social Stream background. Select the new background color of the and click elsewhere on the screen to close the colorpicker widget.
Body Border ColorSelect the new border color of the Social Stream and then click elsewhere on the screen to close the colorpicker widget.
Body Border SizeIn order to set a border size (in px) for the Social Stream.
Body Background ImageIn order to set a background image for the Social Stream.
Font ColorSelect the new font color for the feed item and then click elsewhere on the screen to close the colorpicker widget.
Item Background ColorSelect the new background color for the feed item and then click elsewhere on the screen to close the colorpicker widget.
Item Border ColorSelect the new border color for the feed item and then click elsewhere on the screen to close the colorpicker widget.
Item Border SizeIn order to set a border size (in px) for the feed item.
Components » Simple Social Media Stream » Settings
.License/Purchase
Key text box and Save.Yes, this extension works with Joomla v2.x.
The only limitation is that you can not update the extension via Joomla Automatic Updates.
This message is usually caused for one of the following reasons:
After fixing the problem, try cleaning the cache from Components » Social Stream » Settings
page.
Social Stream is conflicting with an another extension installed on your website or an another script that is making a problem for Social Stream scripts.
Please, contact our support desk and provide us with your website URL and other required information.
Components » Social Stream » Settings
page.There should be one of the following reasons that your Facebook feed may not work:
Unfortunately, this is Twitter API limitations for hashtags or any search that is made via its API platform and we can't change this rule. The Search API is not complete index of all Tweets, but instead an index of recent Tweets.
Please check Twitter Search API Documentation for reference.
There could be one of the following reasons that your Google+ feed may not work:
Without creating apps and adding API tokens and keys, your website will not be able to connect to the Social Networking servers. The token authentication makes a secure channel via Social Network server and your website to get the permission to access your social profile and fetch your social feed.
You need to purchase one license for each site you want to use Simple Social Media Stream on.
1 site = 1 license, 2 sites = 2 licenses, 3 sites = 3 licenses and so on.
It doesn’t matter if they are all in use by the same company, on the same server, by the same developer, etc. The license terms are single use – one license per site.
If you require a developer license, simply contact our support desk.
Simple Social Media Stream Joomla Extension - Created By Axent Media - Commercial license.
Server-Side
OAuth library - by Andy Smith - MIT license.
OAuth for Twitter's REST API - Created by Abraham Williams.
SimpleCache - Created by Gilbert Pellegrom - MIT license.
Client-Side
jQuery and jQuery UI - Released under the terms of the MIT license.
Isotope - Copyright 2016 Metafizzy - Commercial license included.
Timeline Drop - by kickdrop.me.
Colorbox - by Jack Moore - Licensed under MIT.
Light Slider - by Sachin N - Licensed MIT.
Lazy Load - by Mika Tuupola - MIT license.
Special scroll events for jQuery - by James Padolsey.
Font Awesome - by @davegandy - Licensed under MIT.
jQuery Expander - by Karl Swedberg - Licensed MIT.