JUX Social Media

Created: 03/10/2019

Lastest update: 03/10/2019

By: Joomlaux

Need Support

General introduction

What is JUX Social Media ?

Joomla Social Media Module — JoomlaUX is a premium social media module to display social feeds in beautiful responsive walls or galleries. Showing user generated content is a great way to add social proof to your site. Make any combinations of social feeds. For example, you can have Facebook feed, Instagram feed and Twitter feed mixed in the same stream ....
Help you fully display social information in many different layout styles in a flexible and beautiful way

Key features

  • Support many social most popular current as: Facebook, Twitter, Instagram, Youtube, Pinterest . . .
  • Support 7 style layout: Masonry, Grid, Justifile, Wall and Carousel
  • Limit each social and limit post for all social
  • Show or hide information each social
  • Easy to use and configure the social in the back-end
  • Update accurate information about the social from the API
  • Filter and smart search function
  • Can Custom CSS
  • 100% Responsive or fix width, height
  • Compatible with Tablet, Smart phone
  • Run on modern browsers (including IE10+)
  • Support multiple languages

This extension is your choice if

  • You want to show customers how your social activities work
  • You can display a or more social as you like
  • You want your website visitors to become your followers to show how much they value you
  • You want to display full information and beautiful interface
  • You need a reliable working solution to save your time and money

FrontEnd

Show Layout Mansonry

 

Show Layout Grid

 

Show Layout Justifed

 

Show Layout Wall

 

Show Layout Carousel

 

Show Popup Horizoltal

 

BackEnd

Tab Module Options

Config Layout Masonry

Config Layout Grid

Config Layout Carousel

 

Tab Social

 

Tab Display

 

Tab Advanced Option

 

Server Requirement

JUX Social Media has several system requirements as follow:

  • Apache 2.0 or above - http://www.apache.org recommended: Apache 2.0 or above.
  • PHP 5.2.4 or above - http://www.php.net recommended: PHP 5.3 or above.
  • MySQL 5.0.4 or above - http://www.mysql.com recommended: MySQL 5.0.4 or above.
  • Joomla! 3.x. Please go to - http://www.joomla.org  download Joomla! 3.x.
  • 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.

Client Requirements

This module can run well on major browsers such as: Internet Explorer (version 10+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

Download

After purchasing our product, you’ll see the download link at JUX Social Media 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

Module

mod_jux_social_media

 

Module Installation

Go to Administrator site => “Extensions” => “Extension Manager” in the Top Menu.

In “Upload Package File” block, please Upload & Install our extensions:

Extension manager

 

Configuration for Module

You can enter title header module, select layout config column and padding for each layout

 

Detail
  • Show Header: Show/hide text header module
  • Social Headeing: Please enter text heading for your module
  • Limit Post: You can select 1 in 5 layout different: Masonry, Grid, Justified, Wall and Carousel
  • Show Load More: The number of items to display first after the page loads
  • Responsive Desktop:Select number column, number row and padding on screen desktop for layout masonry, grid and carousel
  • Responsive Table:Select number column, number row and padding on screen table for layout masonry, grid and carousel
  • Responsive Mobile:Select number column, number row and padding on screen mobile for layout masonry, grid and carousel
  • Ratio Crop Height (px):Enter height for image layout grid
  • Padding Item (px):Enter padding item for layout Justified and Wall
  • Wall Width (px):Enter width for wall layout
  • Auto Play:Set auto play slider
  • Play Speed:Set minisecond for speed play slider
  • Loop Slider:Set loop for slider
  • Slider Scroll:Number item slider when scrolll, only for layout Carousel

Some layout types

Layout mansory with 4 column and padding item is 5px

 

Layout grid set 4 column and fix height image

 

Layout justified and padding 10px

 

Layout wall limit 5 item croll vertical

 

Configuration for social Facebook

Please enter the config for social Facebook and refer guide bellow

 

Detail
  • Show Facebook: Show/hide social facebook .
  • ID Page Facebook: Please enter id your page facebook.
  • Acces Token: Enter acces token your page facebook.
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.

How to get your Page Facebook ID and Access token Page Facebook
Please login Facebook at browser

If you want get Id page Facebook

please go to https://findmyfbid.com/, Enter url page facebook and will get id your page facebook

If you want get Access Token your page Facebook

please go to https://axentmedia.com/facebook-access-token/ , Click button "Generate Access Token", after Facebook will ask to accept the terms of access and receive the token code Remember that when you access the URL above and press the button, you will receive the access token of the User and of the page, you must copy the correct code of the page.

Then paste the code you just received into the back-end config

Some images of social facebook

Configuration for social Twitter

Please enter the config for social Twitter and refer guide bellow

Detail
  • Show Twitter: Show/hide social Twitter .
  • User Twitter: Please enter user Twitter.
  • API Key: Enter API Key Twitter.
  • API Secret: Enter API Secret Twitter.
  • Access Token: Enter Access Token Twitter.
  • Access Token Secret: Enter Access Token Secret Twitter.
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.
How to get config get APi Twitter
Please login Twitter at browser

If you want get user Twitter

please go to social Twitter and will see user name Example with url https://twitter.com/JoomlaUX, then user will is: JoomlaUX

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 Config" form in "Social Stream Settings" page and the extension should now have access to your Twitter feed data.

Some images of social facebook

Configuration for social Instagram

Please enter the config for social Instagram and refer guide bellow

Detail
  • Show Instagram: Show/hide social instagram .
  • User Instagram: Please enter user instagram.
  • Acces Token: Enter acces token your instagram.
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.
How to get user instagram and access token instagram
Please login Instagram at browser

If you want get user instagram, please go to social instagram and will see user name

If you want get Access Token your instagram

Please go to https://instagram.pixelunion.net/ , Click button "Generate Access Token", after will show code acces token your instagram, copy and page it to config back-end

Then paste the code you just received into the back-end config

Some images of social facebook

Configuration for social Youtube

Please enter the config for social Youtube and refer guide bellow

Detail
  • Show Youtube: Show/hide social youtube .
  • ID Chanel: Please enter Id chanel your youtube.
  • API Key Youtube: Enter api key for you tube
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.
How to get ID chanel and API key youtube
Please login Google at browser

If you want get ID Chanel

Please go to chanel your youtube and you will see Example with channel https://www.youtube.com/channel/UCtf9cFBJkHVAf2qMqF01xYg , then ID chanel will is: UCtf9cFBJkHVAf2qMqF01xYg or please go to url https://commentpicker.com/youtube-channel-id.php and page url chanel or url user will get ID channel

Instruction get API key youtube

1: Go to the Google Developers Console.
2: Create new project and give it a name.

3: Enter name and create button

4: Croll bellow and select API youtube

5: At tab sidebar left, click tab Credentials

6: Copy API key and paste in config back-end

Some images of social youtube

Configuration for social Pinterest

Please enter the config for social Pinterest and refer guide bellow

Detail
  • Show Pinterest: Show/hide social Pinterest .
  • User Pinterest: Please enter user Pinterest.
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.
How to get user Pinterest
Please login Pinterest at browser

If you want get user Pinterest

please go to social Pinterest and will see user name Example with url https://www.pinterest.com/joomlaux/, then user will is: joomlaux

Some images of social facebook

Configuration for social Vimeo

Please enter the config for social Vimeo and refer guide bellow

Detail
  • Show Vimeo: Show/hide social Vimeo .
  • User Vimeo: Please enter user Vimeo.
  • Limit Social: The total number of posts to display for the corresponding social, after clicking load more buttons to load show all social.
How to get user Vimeo
Please login Vimeo at browser

If you want get user Vimeo

Please go to social Vimeo and will see user name Example with url https://vimeo.com/marosuperstar, then user will is: marosuperstar

Some images of social facebook

Configuration for Display tab

You can show or hide description, limit text and the show all information for each social, select style lightbox and style icon social

 

Detail
  • Show Description: Show/hide description social
  • Limit Description: Set limit character for description
  • Show View: Show/hide total view post social
  • Show Like: Show/hide total like post social
  • Show Comment: Show/hide total comment post social
  • Show Share: Show/hide total share post social
  • Show Date: Show/hide total date post social
  • Show Name Social: Show/hide total name social post social
  • Social Icon Style: Select style for icon social
  • Show Popup: Select type show popup horiztotal or vertical

Some image show/hide config

Layout Grid show all config

 

Popup vertical content

 

Layout justified hide all information the social

 

The function to load more, search and filter is extremely smart and helpful

With the filter function, you can filter the socials easily and know the total number of social currently showing

Smart and accurate search function, so you can search everything and just enter 1 keyword suggestion

The load more function will load the number of items equal to the number of items currently displayed, meaning that if you initially set the configuration limit to 10, the modules will display first as 10 social items arranged in the order of the socials with the posting date. from closest to farthest than the present, after clicking load more will load 10 more items

Configuration for Advanced

You can write some code by custom code field for Social Media module Or add the jquery library