Simple Social Media Stream Joomla Extension

Congratulations and thank you for choosing Simple Social Media Stream!

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.

Social Stream

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.

Product Showcase

Wall

Carousel

Timeline

Installation

This is by far the easiest way of installing a Joomla extension.

  1. Go to your Joomla control panel and from the top menu, click on Extensions » Manage » Install.

  1. Go to the Upload Package File tab, select the extension file (zip files only) e.g. pkg_simplesocialmediastream.zip from your hard drive and upload it.
  2. You will get the successful installation message according to the image below.

  1. From the top menu, click on Extensions » Manage » Manage.
  2. In the extensions management page search the "social" word and make sure all the Simple Social Media Stream extensions are in enabled status.

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.

Requirements

  • The extension requires the PHP version 5.3.25 or higher.
  • The extension requires the Joomla version 2.5 or higher.
  • This extension requires both PHP's multibyte string extension AND iconv extension (enabled by default on most servers).
  • PHP's XML extension is required (enabled by default on most servers).
  • PHP's cURL extension is recommended (required for Facebook & Twitter feeds)

Quick Start Guide

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.

Create a Wall

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.

  1. From the top menu, click on Components » Simple Social Media Stream » Social Streams.
  2. On the Social Streams page, click the 1. New button.

  1. Fill out the form as follows and go to the 3. Social Networks tab.

  1. Fill out the Social Networks section as follows and click the 5. Save button.

  1. In this step, you need to set the Facebook API Credentials settings in Components » Simple Social Media Stream » Settings page. Read this topic for more details.
  2. From the top menu, click on Menus » Main Menu and in the "Menus: Items" page, click the 6. New button.

  1. On the "Menus: New Item" page, click the 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.

  1. Go to the 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.

Create a Timeline

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.

  1. Follow the same steps 1 - 7 that you did for the Wall.
  2. Go to the 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.

Create a Carousel

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.

  1. Follow the same steps 1 - 7 that you did for the Wall.
  2. Go to the Stream Options tab and select Carousel as Type and finaly, click the 2. Save button.

  1. Switch to Twitter tab.

Your social carousel feed is ready now. Go to your created page on your website to see the carousel.

Managing Social Streams

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.

Creating a New Social Stream

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.

Name

Enter a name that describes your Social Stream. This name is for your reference only.

Stream Details

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.


Social Networks

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

Facebook requires authentication to provide the feed's data. Click here for more details.

Facebook provides 2 different feed options:

1. Facebook Page Feed

The feed of posts (including status updates), photos and links on this page.

Specific sets of posts

You can set here to get sets of posts published by this page, or by others, or by both on this page.

2. Facebook Group Feed

The 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.

3. Facebook Album/Page Photos

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

4. Facebook Page Videos

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

Twitter requires authentication to provide the feed's data. Click here for more details.

Twitter provides 3 different feed options:

1. Twitter Username

Enter 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

2. Twitter List

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

3. Search Term/Hashtag

To search enter the search terms/hashtag - e.g. socialmedia

ID Range:

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.

How to find a specific tweet ID?

  1. Go to the Twitter home page at http://www.twitter.com/. If you are already logged in, you will be redirected to your Twitter page. Otherwise, login to your twitter account, which will also take you to your Twitter page.
  2. In the list of all tweets, find the specific tweet for which you wish to grab the ID.

  1. There is a date/time stamp underneath each tweet as pictured above. Click that date/time stamp.
  2. This will take you to the page for the single tweet. The URL displayed at the top of your browser will look something like this:
    https://twitter.com/DesignerDepot/status/605472728351707136
  3. The tweet ID is the last set of numbers in the URL - in the example above, that would be - 605472728351707136

Google+

Google+ requires an API Key to display feed data. Click here for more details.

Google+ provides 1 feed option:

Google Profile ID

Enter 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

Pinterest provides 2 different feed options:

1. Pinterest username

To 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

2. Pinterest board

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

Flickr requires an API Key to display feed data. Click here for more details.

Flickr provides 2 different feed options:

1. Flickr User ID

To get your Flickr User ID:

2. Flickr Group ID

To get a Flickr group ID:

Instagram

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.

2. Instagram search tag

To search by tag enter the tag name - e.g. joomla

3. Instagram location ID

To show the latest posts by a location, enter the location ID.

4. Instagram geographical location

To 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

How to find latitude and longitude coordinates of a location?
  1. Browse to this URL: http://www.gps-coordinates.net/
  2. Enter your location in the "Address" field.
  3. Click on "Get GPS Coordinates" button.
  4. You will get the Latitude and Longitude of the entered location on the map.

Youtube

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 username

To 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

2. Youtube playlist ID

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

3. Youtube search term

To search enter the search terms - e.g. Joomla

4. YouTube channel ID

Returns a list of videos uploaded by this channel - Enter a YouTube channel ID - e.g. UC1yP5nx6JNEBQI3ps2XFMpz

Vimeo

Vimeo provides 1 feed option:

Vimeo username

To 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 Feed

RSS Feeds have 1 feed option:

RSS feed URL

Enter the RSS feed URL - e.g. http://feeds.bbci.co.uk/news/world/europe/rss.xml

Text Info:

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

SoundCloud requires an API Client ID to provide the feed's data. Click here for more details.

SoundCloud provides 1 feed option:

SoundCloud User Tracks

The list of tracks of the user. Enter the SoundCloud Username - e.g. mayerhawthorne

To find your SoundCloud Username:

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

VK provides 2 different feed options:

1. VK Wall Domain

Returns 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.

2. VK Wall Owner ID

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

LinkedIn requires an API Key to display feed data. Click here for more details.

LinkedIn provides 1 feed option:

LinkedIn Company Page ID

Returns a list of the company updates.
Enter the LinkedIn Company Page ID - e.g. 10354180.

Note: Save the Social Stream configurations by clicking the "Save" or "Save & Close" button when it was done.

Edit a Social Stream

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.

Delete a Social Stream

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.

Translation

Let's say you would like to translate the component to Spanish, these are the steps you should follow:

  1. First of all, set your desired Default Language in Joomla. Read this article for more details.
  2. Copy the file /language/en-GB/en-GB.com_simplesocialmediastream.ini into the /language/es-ES/ folder using an FTP client.
  3. Rename the file as /language/es-ES/es-ES.com_simplesocialmediastream.ini in the folder.
  4. Open the file es-ES.com_simplesocialmediastream.ini and translate all the English definitions into Spanish.
  5. Save the changes.

Find out more information on Joomla Official Translations Documentation.

Social Stream Settings

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:

Tab 1 - Display Settings

This tab is splitted into 4 sections including General Settings, Wall, Timeline and Carousel settings.

General Settings


Stream Theme

The style of your Social Stream.

Results Limit

Limiting the maximum number of results to display on the stream.

Words Limit

Limiting the description words count to display for each item on the stream - Leave empty for no limit.

Comment Words Limit

Limiting the comment words count to display for each item - Leave empty for no limit.

Title Limit

Limit of the title words count to display for each item on the stream - Leave empty for no limit.

User info position & detail

This will define, how to display the user info for each item on the Social Stream.

Lightbox content

This will define, how to display the Social Stream item information in lightbox window.

Item image style

This will define, how to display the image for each item on the Social Stream.

Read more

If checked, the (…) character at the bottom of each feed item will be linked to the rest of the content.

Ordering

Select whether to order the results depending on date of each item or randomly.

Load more

If checked, a load more bar will appear at the bottom of the social network wall and loads more social items if clicked.

Links

If checked, all links will open in a new window else they will be open in the parent window.

Nofollow links

If checked, all links will have the status of nofollow.

Use https

If checked, all links and images will be getting over https.

Displaying Ads

If any of these items is checked, the ads (from Manage Ads) will be displayed on it.

Filter networks

If 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 All

Show All button will appear at the first or end of the social network filtering navigation bar.

Filtered by default

Which filtering button to be selected by default.

Filter networks ordering

Order 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 Update

If 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 interval

The 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 Time

The 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).

Crawl per request

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 timeout

Social API request connection timeout (in seconds). (depending on your web hosting server resources, some servers can not wait to process very long time).

Debug Log

If 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).


Wall Display Settings

These options only apply to the wall display mode.


Transition Duration

Duration of the transition when items change position or appearance - in milliseconds - 0 means no transitions.

Stagger

Staggers item transitions, so items transition incrementally after one another - in milliseconds - Leave empty to disable it.

Search Filtering

If 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 Direction

Let layout to start render from left to right or, right to left.

Re-layout wall based on

If "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 Width

Width of wall block (px) - Leave empty for full width.

Wall Block Height

Height 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.

Responsive Breakpoints

Defines the number of items (columns) shwoing on each row for different viewport/container sizes - Requires "Fixed Width" to be disabled.

Gutter X

The horizontal space between item elements - in pixels. This may changes automatically when "Fixed Width" is disabled.

Gutter Y

The vertical space between row elements - in pixels. This may changes automatically when "Fixed Width" is disabled.


Carousel Display Settings

These options only apply to the carousel display mode.


Animation Speed

Defines the animation speed (in ms) of the rows moving left or right.

Transition Speed

The time (in ms) between each auto transition.

Auto Width

If enabled, the "Slide Width" value will be applied to each slide - Number of items will be ignored.

Number of items

Defines the number of items shwoing in each slide for different viewport sizes - Requires Auto Width to be OFF.

Slide Width

Width of slide item (px) - Do not leave empty!

Animation Direction

Sets the direction of carousel feed movement to either "right" or "left".

Controls

If checked, prev/next buttons will be displayed.

Auto Start

If checked, the Slider will automatically start to play.

Loop slide

If 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 Move

Number of slides to be moved at a time - Requires Loop slide to be OFF.

Enable pager

Enable/disable pager option.

Slide Margin

Spacing between each slide.


Timeline Display Settings

These options only apply to the timeline display mode.


Display layout

To display timeline in one column or based on browser screen width.


Tab 2 - API Credentials

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.


Facebook API Credentials

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.

Method 1 (Using our online App):

  1. Browse to this URL: https://axentmedia.com/facebook-access-token/
  2. Click on green "Generate Access Token" button.
  3. You will need to login to your Facebook account.

  1. Then, you will be redirected back to the https://axentmedia.com/facebook-access-token/ page displaying the list of your Facebook pages with Access Tokens.
  2. Copy one of your Access Tokens and paste into the Access Token field in Facebook section in Stream Settings - API Credentials tab.

Method 2 (Using your App):

If you want to use this method, your app must be reviewed and approved by Facebook for the 'Page Public Content Access' permission.

  1. Login to your Facebook account.
  2. After login, go to this link: https://developers.facebook.com/apps/ and then click on, Add a New App button.

  1. If you have not registered to become a developer, you should do that now by pressing the “Register Now” button on the page. It's a quick and easy process to get signed up.
  2. If you are registered as a developer, the “Create a New App ID” popup will be open.
  3. Enter a custom name in the “Display Name” input, enter your email address as “Contact Email”, choose any option for “Category” and then click Create App ID button.

  1. Your App is created now. You will now get redirected to the app page automatically if not, you can browse to your app page by choosing the menu item “My Apps” from top of the page. Your page should now look something similar to the following image.
  2. Click on Tools & Support from the top navigation bar.

  1. Click on the Access Token Tool on this page or manually browse to: https://developers.facebook.com/tools/accesstoken/ page.
  2. On the new page that opens, you can simply grab your App Token or, you can create a User Token by clicking the "need to grant permissions" link according to the picture below and paste into its respective field in your Social Stream Settings page.
What is the difference between an App Token and a User Token?
App Token:
  • Is more secure.
  • Long-lived (never get expired).
  • Is only usable for getting "Public" Facebook feeds.
User Token:
  • Is less secure.
  • Short-lived (60 days expiration time but, can get easily extended by clicking the Debug button on front of User Token on the Access Token Tools page).
  • Can be also used for "Age Restricted and Private" page feeds managed by you.



Twitter API Credentials

Required For All Twitter Feeds.

To create your Twitter API credentials:
  • Browse to: https://apps.twitter.com/ and sign in with your Twitter Account.
  • You will be redirected to your Twitter Application Management area. Then click on "Create New App" button.

  • Fill out the Name, Description & Website fields.
  • Read the "Developer Agreement" and check the "Yes I agree" box.
  • Click "Create Your Twitter Application" button.

After creating the Application, the Application Details page opens.

  • Go to "Keys and Access Tokens" tab.
  • Click on the "Generate Consumer Key and Secret" button.
  • Click on the "Generate My Access Token and Token Secret" button.

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.



Google API Credentials

To create and obtain your own Google API Key:
  • Browse to your: Google Developers Console and sign-in with your Google account.
  • A default project called "API Project" is created for you when you first login to the Developers Console. You can use that project, or create a new one by clicking the "Create Project" button at the top of the window.
  • Select one of the projects in the list - e.g. "API Project"

  • If you select the previously created "API Project" for the first time, a popup opens asking you to set a Project ID. Click OK and continue.
  • Click the blue bars button and select API Manager from the left sidebar.

  • Under Google APIs, search and click on "Google+ API".
  • Click the "Enable API" button on top of the "Google+ API" page to turn it on.

  • Click back, search and click on "YouTube Data API v3".
  • Click the "Enable API" button on top of the "YouTube Data API v3" page to turn it on.

  • Click back and you will have "Google+ API" and "YouTube Data API v3" under API Library tab.

  • Click Credentials on the left sidebar, under Public API access, click "Create new key" button.
  • Copy your API KEY and paste into your Social Stream configuration form.


Instagram API Credentials

To create an Instagram API Access Token, use one of the following methods:

Method 1 (Using our inbuilt App):

  1. From Joomla admin panel, go to Components » Simple Social Media Stream » Settings.
  2. On the Stream Settings page, switch to API Credentials tab and scroll to the Instagram API Credentials section.
  3. Click on Login and get my Access Token button.

  1. Authorize our Instagram App and you will be redirected back to this page again with Access Token field filled with your token.
  2. Scroll up to the top of page and click Save.

Method 2 (Using our online App):

  1. Browse to this URL: http://axentmedia.com/instagram-access-token/
  2. Click on green "Generate Access Token" button.
  3. You will need to login to your Instagram account.

  1. Then, you will be redirected back to the http://axentmedia.com/instagram-access-token/ page displaying your Access Token.
  2. Copy your Access Token and paste into the "Instagram Access Token" field in your Social Stream Settings page, API Credentials tab or use it in 1. Instagram User Feed section within Social Stream Configurations page to get feed result from more than one Instagram account.

Method 3 (Using your App):

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.

  1. Browse to https://www.instagram.com/developer/ and login to your account if required.
  2. Click on Manage Clients, and finally click on Register a New Client.
  3. Fill out the required fields for registering a new Client ID.

  1. Set the OAuth redirect_uri field to "http://localhost" (without quotes).
    The reason you should use localhost is for security. In computer networking localhost is the web address of the computer you are using. So when Instagram redirects to your redirect_uri, all of your sensitive information is passed from Instagram's servers directly to your computer.
  2. Go to Security tab and uncheck the "Disable implicit OAuth" box or else this method will not work.

  1. Once all of the fields are filled out click Register.
  2. You have already created an Instagram client. To generate an Instagram Access Token, do the following:
  3. From Joomla admin panel, go to Components » Simple Social Media Stream » Settings.
  4. On the Settings page, switch to API Credentials tab and scroll to the Instagram API Credentials section.
  5. Replace Client ID with your Client ID you grabbed from your Instagram Manage Clients page and click on Login and get my Access Token button.

  1. Authorize our Instagram App and you will be redirected back to API Credentials page again with Access Token field filled with your token.
  2. Scroll up to the page header and click Save.

LinkedIn API Credentials

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.

  1. Browse to this URL: https://axentmedia.com/linkedin-access-token/
  2. Click on green "Generate Access Token" button.
  3. You will need to login to your LinkedIn account.

  1. Then, you will be redirected back to the https://axentmedia.com/linkedin-access-token/ page displaying your Access Token.
  2. Copy your Access Token and paste into the Access Token field in LinkedIn section in Stream Settings - API Credentials tab.

Vimeo API Credentials

To create and obtain your Vimeo Access Token:
  • Browse to this page: https://developer.vimeo.com/apps/new. You will be redirected to "Sign in" page if you are not login to your account.
  • Fill out the form as highlighted below and click on "Create app" button to complete.

  • In the next page, scroll to the "Generate a new Acceess Token" section at the end of the page.
  • Make sure to uncheck the "Private" from the Scopes.
  • Click on the "Generate Token" button and copy the "Your new Access token" string and paste into "Vimeo Access Token" text box in API Credentials section.

VK API Credentials

To create and obtain your VK Service Token:
  • Browse to this page: https://vk.com/editapp?act=create. You will be redirected to "Sign in" page if you are not login to your account.
  • Enter a name for the App in the Title input as highlighted below and click on "Connect Application" button to complete.

  • On the next page, in App Settings tab, copy the "Service token" string and paste into "VK Service Token" text box in API Credentials section.

Displaying Social Streams

You can add your Social Stream on your website in 2 different ways:

Add Social Stream on a page

  1. From the top menu, click on Menus » Main Menu and in the "Menus: Items" page, click the 1. New button.

  1. On the "Menus: New Item" page, click the 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.
  2. Finaly, click the Save button.

Browse to your created page on your website to see the social stream.

Add Social Stream as a Module

  1. From the Joomla admin panel, go to Extensions » Modules.
  2. Edit the "mod_simplesocialmediastream_stream" predefined module or you can create a new module by clicking the New button and selecting "Simple Social Media Stream - Stream as module type.

  1. 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.
  2. Go to the 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.

Managing Themes

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.

Edit a Theme

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.

Delete a Theme

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.

Creating a new Theme

To create a Theme, click the New button in the Themes management page.

General Theme Setting

CSS Class Name

Select a name for the theme CSS class selector (without dot).

Stream Layout

The 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:

  • Edit this file: 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.
  • Browse to this directory: media/com_simplesocialmediastream/layout and create a new .php file with your own layout name - e.g. mylayout.php
  • Your new layout will be available here in add/edit Theme page.
Custom CSS

Custom 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.

Dedicated Theme Settings

Each type of stream has it's dedicated options in a separate tab.

Body Background Color

This 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 Color

Select the new border color of the Social Stream and then click elsewhere on the screen to close the colorpicker widget.

Body Border Size

In order to set a border size (in px) for the Social Stream.

Body Background Image

In order to set a background image for the Social Stream.

Font Color

Select the new font color for the feed item and then click elsewhere on the screen to close the colorpicker widget.

Item Background Color

Select the new background color for the feed item and then click elsewhere on the screen to close the colorpicker widget.

Item Border Color

Select the new border color for the feed item and then click elsewhere on the screen to close the colorpicker widget.

Item Border Size

In order to set a border size (in px) for the feed item.

Licensing

To receive the product automatic updates you need to register your extension.
  • From Joomla admin panel, go to Components » Simple Social Media Stream » Settings.
  • On the Settings page, switch to Licensing tab.
  • Enter your purchase key in the License/Purchase Key text box and Save.

Where Is My Purchase Code?

If you have made your purchase directly on our website:

  • Log into your account on our website.
  • In your account Dashboard, click Orders, from the left navigation.
  • In Orders page click ‘VIEW’ on front of your purchased item according to the picture below.
  • Your license key is right in the "Your Licenses" section.

If you have made your purchase on CodeCanyon:

  • Log into your Envato Market (CodeCanyon) account.
  • Hover the mouse over your username at the top of the screen and click.
  • 1. Click ‘Downloads’ from the user menu items according to the picture.
  • 2. Click the ‘Download’ green button and 3. click ‘License certificate & purchase code’ (available as PDF or text file) from the drop down list.

  • Below is an example of a PDF License certificate and purchase code.

FAQ

Does the extension work with Joomla v2.x?

Yes, this extension works with Joomla v2.x.
The only limitation is that you can not update the extension via Joomla Automatic Updates.

There is no feed to show or you are not connected to the world wide web!

This message is usually caused for one of the following reasons:

  1. You have not declared any social network ID in your Social Stream. Read about Social Stream configuration.
  2. API Credentials for your social network is not truly set or is not valid. Read this topic for details about API Credentials configuration.
  3. Your server has not access to the internet.

After fixing the problem, try cleaning the cache from Components » Social Stream » Settings page.

The social items appear on the website but, some other functionalities are not working!

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.

The Social Stream is working but, some networks do not appear on the stream.

  1. Social network account is new and there isn't anything found in its feed or there is no public activity to show on the public feed.
  2. Something is incorrectly cached. Try cleaning the cache from Components » Social Stream » Settings page.

Facebook feed is not displaying!

There should be one of the following reasons that your Facebook feed may not work:

  1. Your Facebook Page ID or Album ID is incorrect. Read this topic on how to find your Facebook IDs.
  2. You are using a Facebook profile ID instead of a page ID. Facebook profile feeds are private and can not be displayed on your website publicly.
  3. Your Facebook settings restrict the user that may view your page. You have to remove any age/profanity restrictions from your Facebook page.
  4. Make sure you have set up your Facebook API Credentials correctly. Read this topic for details about Facebook API Credentials configuration.

Twitter feed is not displaying!

  1. Make sure you have set up your Twitter API Credentials correctly. Read this topic for details about Twitter API Credentials configuration.
  2. If your Twitter API credentials is valid, this may be due to the Twitter API limits that is 180 calls per 15 minutes.

Tweets older than a week for a hashtag or search term does not display on my social stream

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.

Google+ feed is not displaying

There could be one of the following reasons that your Google+ feed may not work:

  1. Your Google page/profile ID or Username is incorrect. Read this topic on how to find your Google+ ID.
  2. Make sure that you have set up your Google+ API Key and it is valid. Read this topic to find that how to set Google+ API Key.
  3. Your Google settings restrict the user that may view your page. You have to remove any Target Audience restrictions from your Google+ page/profile.
    Please, note that Google does not provide any items that is published on your page before you remove the age restriction.

Instagram feed is not displaying

  1. Instagram Username is incorrect or is not exists.
  2. Make sure that you have set up your API Access Token and it is valid. Read this topic to find that how to set Instagram API Access Token.

Why do I need to create API credentials?

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.

How many sites can I use Simple Social Media Stream on?

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.

Is there a developer/multi-use license for this pruduct?

If you require a developer license, simply contact our support desk.

Credits

Design & Development:

Simple Social Media Stream Joomla Extension - Created By Axent Media - Commercial license.

Third Parties

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.

Changelog

= 2.0.0 - 26.08.2018 =
  • New : Adding a feature to display embeds in the twiiter feeds.
  • New : Adding Flickr Social Network.
  • New : Adding VK Social Network.
  • New : Adding SoundCloud Social Network.
= 1.0.9 - 15.08.2018 =
  • Fix : Some of notice errors fixed.
= 1.0.8 - 18.07.2018 =
  • Page scroll lazy load problem fixed.
= 1.0.7 - 20.06.2018 =
  • Fixing issue of custom code Ads.
  • Fixing issue of not applying themes.
  • Fixing issue of links color.
  • Fixing issue of timezone.
= 1.0.6 - 29.04.2018 =
  • Fixing the image loading problem when multiple carousels added on the same page.
  • Fixing https images loading for Facebook shared item type.
= 1.0.5 - 10.04.2018 =
  • Fix: Instagram user public feed deprecated problem fixed.
= 1.0.4 - 12.03.2018 =
  • Fix: Loading only published Ads to streams.
= 1.0.3 - 07.03.2018 =
  • Fixing the wall re-layout option problem.
= 1.0.0 - 24.10.2017 =
  • First release.