JUX Social Tabs

From JoomlaUX Wiki
(Redirected from Social Media Tabs)
Jump to: navigation, search

Contents

Introduction

Purpose

This document supports JoomlaUX customers in using Social Tabs Module.

Scope

  • www.joomlaux.com
  • JoomlaUX’s customers

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

Overview

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.

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.

Screenshot

Backend

Frontend

Configuration

Social Tabs Installation

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.

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:

  • mod_jux_social_media_tabs xxx.zip.
    • Installation file for Joomla

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:

  • mod_jux_social_media_tab 1.0.2 .zip: Social Tabs


Social media tabs image005.png

Manage Media Tabs module

Social Network Options

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

  • Note: Facebook personal profile pages are never visible to the public, so you can’t use Facebook personal profiles but Facebook Fan pages.

Facebook

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

Parameter:

  • Facebook ID => Facebook ID is the number represents your account. Please read Instruction here if you don't know how to find it
  • Title => title of your Facebook page
  • Follow Button => Enter text for Facebook’s Follow Button
  • Show Wall Post as => Select display type for Wall posts
  • Limit => Number of posts to display
  • Ordering => Order of Facebook’s tab

Example:

Social media tabs image007.png

Facebook Likebox

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

Parameter:

  • Facebook Account => Your Facebook Account.
  • Show Stream => Choose to display stream
  • Show Header => Choose to display header
  • Limit => Number of your page’s fans to display
  • Ordering => Order of Like Box

Example:

Social media tabs image001.png

Facebook Recommendation

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

Parameter:

  • Recommendation Site => Website that you want to show Facebook's recommendation
  • Show Header => Choose to display header
  • Ordering => Order of Facebook Recommendation

Example:

Social media tabs image008.png

Twitter

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

Parameter:

  • Twitter ID => Your Twitter's Username.
  • Title => Title of your Twitter page
  • Follow Button => Enter text for Twitter’s Follow Button
  • Show Avatar => Show Avatar in each Tweet
  • Include Retweets => Display Retweet option in each Tweet
  • Include Replies => Display Reply option in each Tweet
  • Limit => Number of Tweet to display
  • Ordering => Order of Twitter tab

Update Twitter Authentication

  • Twitter Consumer Key => Your application's OAuth Settings Consumer Key
  • Twitter Consumer Secret => Your application's OAuth Settings Consumer Secret
  • Twitter Access Token => Your application's OAuth Settings Access Token
  • Twitter Access Token Secret => Your application's OAuth Settings Consumer Key

Requirements

  • PHP 5.2.x+
  • cURL
  • OpenSSL
  • The example requires that PHP sessions are enabled

Example:

Social media tabs image003.png

Google+

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

Parameter:

  • Google+ ID => Google+ ID is the number represents your account. Please read Instruction here if you don't know how to find it.
  • Google + API Key => API Key of project Google+. Google+ requires Google+ API Key to work. Please read our Instruction here to know how to create and manage your Google+ API Key.
  • Title => Title of your Google+ Page
  • Follow Button => Enter text for your Google+’s Follow Button
  • Limit => Number of post to display
  • Ordering => Order of Google+ tab

Example:

Social media tabs image004.png

Pinterest

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

Parameter:

  • Pinterest ID => IPinterest has 2 different ID options:user_name or "user_name/board_name"
  • Title => Title of your Pinterest page
  • Follow Button => Enter text for your Pinterest’s Follow Button
  • Limit => Number of Pinterest post to display
  • Ordering => Order of Pinterest tab

Example:

Social media tabs image005.jpg

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:

Social media tabs image0013.png

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:

Social media tabs image002.png

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:

Social media tabs image006.png

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:

Social media tabs image0016.png

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:

Social media tabs image0011.png

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:

Social media tabs image0014.png

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:

Social media tabs image009.png

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:

Social media tabs image0010.png

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:

Social media tabs image0017.png

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:

Social media tabs image021.png

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:

Social media tabs image0018.png

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:

Social media tabs image0019.png

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:

Social media tabs image0015.png

Tabs Options

General Description:

Floating Module

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

Value:

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

Social media tabs image026.png


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

Social media tabs image025.png

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

Social media tabs image027.png

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

Top Left

Left

Top Right

Right

Middle Left

Top

Middle Right

Top

Bottom Left

Left

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.

User Manual

Change Social Tabs information and options

Go to Extensions => Module Manager

Social media tabs image028.png


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

Social media tabs image029.png

Tips

Open Tabs automatically or manually

Open Tabs in the first load

  • Load Open => Yes

Social media tabs image030.png

Do not auto load Tabs

  • Load Open => No

Social media tabs image031.png

Floating in Webpage

You must choose:

  • Floating Module => Yes (Floating in Webpage)

Top - Left

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Top Left
  • Box Offset (px) => 20

Social media tabs image032.png

Top - Right

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Top Right
  • Box Offset (px) => 20
Social media tabs image033.png

Middle - Right

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Middle Right
  • Box Offset (px) => 20

Social media tabs image035.png

Middle - Left

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Middle Left
  • Box Offset (px) => 20

Social media tabs image036.png

Bottom - Right

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Bottom Right
  • Box Offset (px) => 20

Social media tabs image035.png

Bottom - Left

  • Floating Module => Yes (Floating in Webpage)
  • Display Type => Sliding Tabs
  • Display Location => Bottom Left
  • Box Offset (px) => 20

Social media tabs image036.png

Fixed in Module Position

You must select:

  • Floating Module => No (Fixed in Module Position)

Top - Right

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Top Right

Social media tabs image037.png

Top - Left

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Top Left

Social media tabs image038.png

Middle - Right

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Middle Right

Social media tabs image039.png

Middle - Left

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Middle Left

Social media tabs image040.png

Bottom - Right

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Bottom Right

Social media tabs image041.png

Bottom - Left

  • Floating Module => No (Fixed in Module Position)
  • Display Type => Sliding Tabs
  • Display Location => Bottom Left

Social media tabs image042.png

Static Tabs

  • Display Type => Static Tabs

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

Social media tabs image043.png

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

Guide to get ID and API Key for Social Tabs

How to get your Facebook Page’s numeric ID

  • Note: Facebook personal profile pages are never visible to the public, so you can’t use Facebook personal profiles but Facebook Fan pages.

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:

Social media tabs image0066.png

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:

Social media tabs image045.png


  • In the sidebar on the left, select APIs & auth. In the displayed list of APIs, make sure "Google+ API" a status of ON.
  • Accept both agreements.
  • In the sidebar on the left, select Credentials.
  • Find the line or lines labeled API key. If there is no API key, then create one by selecting Create New Key.
  • Copy your API key and paste into the social media tabs settings

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

Social Media Tabs Twitter 1.jpg

  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

  • On the Developer signup page complete the form
  • Read and accept the terms & conditions and then click "sign up"

Instagram API

  • If the signup page is submitted successfully and has been accepted click the "manage clients" tab in the top-right of the header.
  • Click the green button - "Register A New Client".

Instagram API

  • Complete the "Register new OAuth Client" form - e.g:

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.

  • Click the "Register" button. You'll get the Cliend ID generated by Intagram:

Instagram API

  • Then go back to the module option of Social Media Tab:

Social media tabs Instagram ClientID.png

    • Copy your CLIENT ID and paste into the "Client ID" option for Instagram
    • Enter your redirect_uri into the "Redirect URI" option for Instagram

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

  • Browse to the page on your website used for the "redirect_uri" in the Instagram client ID setup (note this page must have the social media tabs installed - using the Instagram Feed.
  • You will then be redirected to the Instagram login screen (if not already logged in) and then a confirmation screen where you approve your app's access to your Instagram data.

Social media tabs Instagram Authorization Request.png

  • Instagram will then automatically redirect you back to your website page given in the "redirect_uri" setting
  • When the page loads check the URL in the browser - you should see the following URL format:

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

Personal tools
Namespaces

Variants
Actions
Navigation
JoomlaUX
Toolbox