JUX Social Tabs Extension Documentation


1.1 Purpose

This document supports JoomlaUX customers in using Social Tabs Module.

1.2 Scope

1.3 Definitions, Abbreviations and Acronyms

No.
Name
Description
1 Joomla The most popular Open Source Content Management System, written by PHP.
2 Facebook Facebook social network
3 Facebook Likebox Facebook like
4 Facebook Recommendation Facebook recommendation
5 Twitter Twitter social network
6 Google+ Google+ social network
7 Pinterest Pinterest social network
8 RSS Feed RSS Feed social network
9 Youtube Youtube social network
10 LinkedIn LinkedIn social network
11 Instagram Instagram social network
12 Vimeo Vimeo social network
13 Flickr Flickr social network
14 Stumbleupon Stumbleupon social network
15 Tumblr Tumblr social network
16 Delicious Delicious social network
17 Digg Digg social network
18 Last.fm Last.fm social network
19 Dribbble Dribbble social network
20 deviantART deviantART social network

1.4 Overview

1.4.1 What is Social Tabs?

Social Tabs is developed by JoomlaUX to bring you a helpful & effective solution in connecting, updating information directly from different social pages to your website. Social Tabs brings you a brand new & fresh experience in presenting updates from popular social pages. Your site’s visitors won’t waste their time to browse another tab so they can view, get updates & interact (like, follow, share, comment, etc) with your social pages. With Social Tabs, all these activities can be done directly on your site. More importantly, the display & arrangement of Social Tabs on your site is totally sophisticated, logic and not space-consuming. Social Tabs is exactly your right choice to replace the current & mainstream social buttons which are less efficient & not flexible.

1.4.2 Why using Social Tabs

Nowadays, almost all individual or organizations have their own social pages so presenting these pages’ updates, activities & information helps website’s users a lot in interacting with these pages.
With the broad cover of Social Networks, excellent design with many other advantages in features & functions, JoomlaUX is confident that we bring you a perfect extension for your website.
Highlight features:
- 19 Social Media Networks
- Beautiful Design
- Flexible display: floating on a determined section of a website or fixed in a module position.
- Simple & easy-to-use configuration.

Backend

Frontend

2.1 Social Tabs Installation

2.1.1 Requirements

Server Requirements

Social Tabs 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.

Client Requirements

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

2.1.2 Installation

Download

After purchasing our product, you’ll see the download link at Social Tabs product page:

http://joomlaux.com/products/social-media-tabs.html

Note: If there is any problem, please contact us via E-mail: contact@joomlaux.com.

Package Preparation

Unpack the installation package that you downloaded to your computer. You we’ll see these files:

licence.txt

readme.txt

Modules:

Social Tabs module Installation

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

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

2.2 Manage Media Tabs module

2.2.1 Social Network Options

Social Network Options help user to enter information of each Social Network such as: ID, Title, tab order…

Facebook

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Example:

Facebook Likebox

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Example:

Facebook Recommendation

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Example:

Twitter

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Update Twitter Authentication

Requirements

Example:

Google+

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Example:

Pinterest

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

Example:

RSS Feed

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • RSS link => Link to your RSS.
  • Title => Title of your RSS
  • Follow Button => Enter text for your page RSS’s Subscribe Button
  • Limit => Number of post to display
  • Ordering => Order of RSS tab

Example:

Youtube

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Youtube ID => Your Youtube Username.
  • Title => Title of your Youtube Channel
  • Subscribe button => Display Youtube Log in or Subscribe button
  • Limit => Number of video to display
  • Ordering => Order of Youtube tab

Example:

LinkedIn

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • LinkedIn ID => LinkedIn user public profile URL
  • Ordering => Order of your LinkedIn tab

Example:

Instagram

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Instagram ID => Instagram ID is the numeric represents your account. Please read Instruction here if you don't know how to find it.
  • Client ID => Client ID of Instagram registered for your site
  • Redirect URI => Redirect link to Instagram
  • Access Token => Access Token returned by Instagram

Client ID, Redirect URI and Access Token is need for Instagram API. Please read our Instruction here to know how to create and manage your own key.

  • Title => Title of your Instalgram
  • Limit => Number of post to display
  • Ordering => Order of Instagram tab

Example:

Vimeo

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Vimeo ID => Your Vimeo Username.
  • Title => Title of your Vimeo
  • Follow Button => Enter text for your Vimeo’s Follow Button
  • Limit => Number of video to display
  • Ordering => Order of Vimeo tab

Example:

Flickr

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Flickr ID => Flickr ID is the string of letters represents your account. Please read Instruction here if you don't know how to find it.
  • Title => Title of your Flickr page
  • Follow Button => Enter text for your Flickr’s Subscribe Button
  • Limit => Number of post to display
  • Ordering => Order of Flickr tab

Example:

Stumbleupon

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • stumbleUpon ID => Your Stumbleupon Username.
  • Title => Title of your StumbleUpon page
  • Follow Button => Enter text for your StumbleUpon’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of StumbleUpon tab

Example:

Tumblr

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Tumblr ID => Your Tumblr Username.
  • Title => Title of your Tumblr page
  • Follow Button => Enter text for your Tumblr’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of Tumblr tab

Example:

Delicious

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Delicious ID => Your Delicious Username.
  • Title => Title of your Delicious page
  • Follow Button => Enter text for Delicious’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of Delicious tab

Example:

Digg

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Digg ID => ID of Digg page
  • Title => Title of Digg page
  • Limit => Number of post to display
  • Ordering => Order of Digg tab

Example:

Last.fm

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Last.fm ID => ID of your Last.fm
  • Title => Title of your Last.fm
  • Limit => Number of song to display
  • Ordering => Order of Last.fm tab

Example:

Dribbble

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • Dribbble ID => Your Dribbble Username
  • Title => Title of your Dribbble
  • Follow Button => Enter text for Dribbble’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of Dribbble tab

Example:

deviantART

To display this tab, please select ‘Show’ option, otherwise please select ‘Hide’.

Parameter:

  • deviantART ID => ID of your deviantArt page
  • Title => title of your deviantArt page
  • Follow Button => Enter text for your deviantArt’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of deviantArt tab

Example:

2.2.2 Tabs Option

General Description:

Floating Module

Effect: Allow social tabs to display in site ? fixed position.

Value:

  • Yes (Floating in Webpage) => Social tabs display on site

 

  • No (Fixed in Module Position) => Social tabs display in module’s position

Display Tabs

  • Sliding Tabs => the social tabs displays as a slider.
  • Static Tabs => the social tabs displays in the Joomla Position that the module is placed and always show.

Display Location

  • Top Left => Tabs display on top left of the site
  • Top Right => Tabs display on top right of the site
  • Middle Left => Tabs display on middle left of the site
  • Middle Right => Tabs display on middle right of the site
  • Bottom Left => Tabs display on bottom left of the site
  • Bottom Right => Tabs display on bottom right of the site

Close Tabs

  • Click Anywhere => click anywhere to hide Tabs
  • Click on Tab => click on a Tab to hide Tabs

Load Open

  • Load open (yes) => When choose load open, social media tabs will be open when loading page.
  • Load open (no) => When choose load open, social media tabs will not be open when loading page.

Default Tab Index

  • Choose tabs which will be open by default.

Width (px)

  • Width of Social Media Tabs

Height (px)

  • Height of Social Media Tabs

Offset (px)

No.

Location

Offset

  1.  

Top Left

Left

  1.  

Top Right

Right

  1.  

Middle Left

Top

  1.  

Middle Right

Top

  1.  

Bottom Left

Left

  1.  

Bottom Right

Right

Content Rotate Time

  • Time amount (by second) social tabs will load new updates from social pages.

Content Rotate Direction

  • Direction (Down – Up) in which updates will be loaded.

Enable JQuery

  • On/Off jQuery loader. Turn it off if your site already have jQuery loaded.

Enable noConflict

  • On/Off noConflict. Turn it on to prevent conflict with Joomla’s Mootools.

 

3.1 Change Social Tabs information and options

Go to Extensions => Module Manager

 

And then, change the Module’s information and options:

3.2 Tips

3.2.1 Open Tabs automatic or manual 

Open Tabs in the first load

Do not auto load Tabs

3.2.2 Floating in Webpage

You must choose:

Top - Left

Top - Right

Middle - Right

Middle - Left

Bottom - Right

Bottom - Left

3.2.3 Fixed in module position

You must select:

Top - Right

Top - Left

Middle - Right

Middle - Left

Bottom - Right

Bottom - Left

Static Tabs

The Tabs will display as static box in the Position of Joomla template that it is placed.

3.2.5 Short links to open/close/toggle Tabs

No.

Link title

HTML Source

1

Click To Toggle Tabs

<p> <a href="#" class="dcsmt-toggle">Click To Toggle Tabs</a></p>

2

Toggle & Open Tab 2

<p><a href="#" class="dcsmt-toggle" rel="1">Toggle & Open Tab 2</a></p>

3

Toggle & Open Tab 4

<p> <a href="#" class="dcsmt-toggle" rel="3">Toggle & Open Tab 4</a></p>

4

Click To Close Tabs

<p><a href="#" class="dcsmt-close">Click To Close Tabs</a></p>

5

Click To Open Tabs

<p><a href="#" class="dcsmt-open">Click To Open Tabs</a></p>

6

Open Tab 2

<p><a href="#" class="dcsmt-slide" rel="1">Open Tab 2</a></p>

7

Open Tab 3

<p><a href="#" class="dcsmt-slide" rel="2">Open Tab 3</a></p>

8

Open Tab 4

<p><a href="#" class="dcsmt-slide" rel="3">Open Tab 4</a></p>

9

Open Tab 5

<p><a href="#" class="dcsmt-slide" rel="4">Open Tab 5</a></p>

10

Open Tab 6

<p><a href="#" class="dcsmt-slide" rel="5">Open Tab 6</a></p>

11

Open Tab 7

<p><a href="#" class="dcsmt-slide" rel="6">Open Tab 7</a></p>

12

Open Tab 8

<p><a href="#" class="dcsmt-slide" rel="7">Open Tab 8</a></p>

13

Open Tab 9

<p><a href="#" class="dcsmt-slide" rel="8">Open Tab 9</a></p>

 

Social media tabs image044.png

3.2.6 Guide to get ID and API Key for Social Tabs

How to get your Facebook Page’s numeric ID

Here’s one of many way to find your Facebook Page’s numeric ID

How to find your Google+ ID

Your Google+ ID for your profiles is the long string of numbers present in the URL of our profile. Here’s a screenshot:

Creating Your Own Google API Key

The Google + feed requires an API key. Fortunately creating your own google API key is fairly quick and easy:

How to create your Twitter API Credentials

To create your own Twitter API credentials

  1. Browse to https://dev.twitter.com/ & login with your Twitter username
  2. Browse to https://dev.twitter.com/apps/new

  1. Complete name, description & website fields
  2. Check the "Yes I agree" box for the Developer Rules of the Road
  3. Enter the captcha & click "Create Your Twitter Application"

Social Media Tabs Twitter 3.jpg

  1. Click "Create My Access Token"

  2. A success message will be displayed at the top of the page

  3. Click the "Details" tab to refresh the page and display your access token

How to get your Intagram’s user ID

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:

Social media tabs image0077.png

Creating Your Own Instagram API Client ID & Access Token

In order to use the Instagram feed you must first create your own "Client ID"

 

Instagram API

 

Instagram API

Instagram API

Instagram API

Application name: social tabs

Description: create a social stream from multiple networks

Website: enter your website URL - e.g. http://www.joomlaux.com

OAuth redirect_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.

Instagram API

Social media tabs Instagram ClientID.png

(The Access Token will be add later)

How to get your Access Token (The Access Token is the last step go get access to the Instagram Data. Once you have the access token you can use this on all pages of your website.)

Social media tabs Instagram Authorization Request.png

http://your-redirect-uri#access_token=186786085.f59def8.1d34b28a52e04d36ba1dc52ca98215dc

Social media tabs Instagram Return to your page.png

- e.g 186786085.f59def8.1d34b28a52e04d36ba1dc52ca98215dc then put it to the module option:

Social media tabs Instagram Access Token.png

How to get your Flickr ID

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:

Social media tabs image0055.png