Social Square

Social Square is a Joomla module based on the fabulous Social Stream jquery plugin. This module creates a social stream, which is a single stream of items and updates created from all of your individual social network profiles, data feeds and APIs.

Social Square combines each different network, giving you a single feed showing your social interactions over time. This gives you an opportunity to present all of this information in a more useful and interesting way.

The wall setting and the standard module setting work in opposite ways. When you click a filter icon on the standard module (as seen on the right), it removes that network from the list. In the case of the wall layout, clicking an icon removes the rest of the networks and only shows you the selected network.

PLEASE NOTE: Facebook only allow public feeds from pages, not personal profiles.

Includes 15 social networks & 37 feed options:

  • Twitter – Latest Tweets, Twitter Lists & Search
  • Facebook – Page Latest Wall Posts
  • Google + – +1 Latest Posts
  • Instagram – Search Tags, User Feed, Location ID Search, Lat/Lng Search + Show Likes/Comments
  • RSS Feed – Latest Posts
  • Delicious – Latest Likes
  • Stumbleupon – Favorites or Reviews
  • Pinterest – Latest Pins
  • Dribbble – Latest Shots or Likes
  • Youtube – Latest Uploads, Favorites, New Subscription Videos & Video Search
  • Vimeo – Likes, Videos, Appeared In, Albums, Channels or Groups
  • Flickr – Latest User Uploads & Group Feeds
  • last.fm – Loved Tracks, Recent Tracks or Reply Tracker
  • Deviantart – Latest Deviations
  • Tumblr – Latest Posts (photo, video, regular, quote, audio, conversation & links)

Partial Feature List

  • Social stream loaded via AJAX
  • Display layout as a fully responsive, filterable Wall
  • Option to display wall randomly
  • Display using rotating feed list with controls
  • Create multiple streams per page
  • Create a stream based on total number of days or fixed number of items per network.
  • Rotating list with infinite loop – set direction & speed – both auto and manual.
  • Option to show/hide in user controls for feed slider.
  • Option  to disable/enable individual networks.
  • Set each feed item output content and layout.
  • Option to select number of comments to display in Instagram feed.
  • Option to select number of likes to display in Instagram feed – likes represented by user avatar.
  • Uses jQuery Isotope for dynamic wall ordering.

wall 

 

Displaying your Social Square module

The plugin includes 2 different options for you to display your social stream on your website - a rotating feed list plus a responsive social network wall! The only limitation here is that you can not display a standard social square module and a social square wall module on the same page due to the way the wall jquery works. BUT you can display 2 or more standard modules on the same page each with different settings.

 

Social Square FAQ's

 

Q: What are the parameters of this module?

A: Each network has its own setting to enter in ID and to show/hide certain elements. Below is an image that shows you the general parameters along with an example network.

social square params

 

Q: How do I get my Facebook ID?

A: For the facebook like box the ID of your facebook page must be used - this should be a numerical value, not the actual name of your facebook page - e.g. 157969574262873

To get the ID from your username you can use the following tool from facebook - replace "username" with the name of your facebook page profile:

https://graph.facebook.com/username

 

Q: How do I get my Google ID?

A: To get your google profile ID for the google +1 tab go to your google accounts page and click on the "edit profile" link.

Check the URL in the browser address bar – your profile ID is the number in the middle of the URL:

https://profiles.google.com/100058553707375301897/about/

 

Q: How do I create my own Google API key?

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

Go to https://code.google.com/apis/console#access

Login to your google account

Click "Create Project"

Google API Key

Under service list, click the "off" button next to "Google+ API" to turn it on.

Accept both agreements.

From the left menu, Go to "API Access"

Copy your API key and paste into the social square parameters

 

Q: How do I create my own Instagram API Client ID & Access Token?

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

Go to http://instagr.am/developer/

Click "Register Your Application"

On the Developer signup page complete the form

Read and accept the terms & conditions and then click "sign up"

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

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

Application name: social square

Description: Create a social stream from multiple networks

Website: Enter your website URL - e.g. http://www.pixelpointcreative.com

OAuth redirect_uri: enter the URL of a page where the social square is installed - this is required to get your access token, which you can then insert into the instagram parameters. Once you have the access token you can use this on all pages, which use the social square module on the website listed above.

Click the "Register" button

Copy your CLIENT ID and paste into the "clientId" parameters for Instagram

Enter your redirect_uri into the "Redirect URL" parameter for Instagram


How to get your access token

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 square installed - using either the network wall or the rotating 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.

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

Copy the token code after the "http://your-redirect-uri#access_token=" - e.g 186786085.f59def8.1d34b28a52e04d36ba1dc52ca98215dc

Add the access token to your Instagram parameters in the social square module.

 

Q: What are the feed options for Instagram?

A: There are 4 different types of feed that can be included from Instagram:

1. User Feed

The user feed will show the latest posts from a specific user ID. To create a user feed use "!" followed by the user ID - e.g. "!123456"

2. Location Feed

To display the latest posts for a specific location enter a "@" followed by the instagram location ID - e.g. "@123456"

3. Search Based On Tags

To display the latest posts for a specific tag enter a "#" followed by the tag text - e.g. to search for images tagged with "london" e.g. "#london"

4. Search Based On Geographical Location

To display the latest posts for a geographical location you need 3 parameters - latitude, longitude and distance(in meters up to 5000m). Enter these values starting with a "?" followed by the lat, long and distance separated by a "/" e.g.  "?55.123/-1.345/1000"


Using Multiple Feeds

As with all of the other networks you can add multiple instagram feeds of any type by separating each ID with a comma - e.g.

"!123456,@123456,?55.123/-1.345/1000,#london,#newyork"


Displaying Comments & Likes

The instagram feed also includes the option to display the latest comments for each post plus thumbnails of users who liked the post. To add either comments or likes enter the number that you wish to display using the "comments" and "likes" parameters in the module settings.

 

Q: How do I get my Instagram ID?

A: To get your instagram user ID first get your access token - see FAQ above.
Browse to the following URL - changing YOUR USER NAME & YOUR ACCESS TOKEN for your values:

https://api.instagram.com/v1/users/search?q=YOUR USER NAME&access_token=YOUR ACCESS TOKEN

The Instagram API should then load a page containing text with your profile details similar to the format shown below:

{"meta":{"code":200},"data":[{"username":"YOUR USER NAME","bio":"","website":"","profile_picture":"","full_name":"","id":"YOUR USER ID"}]}

Search for the "id" parameter usually located at the end of the text.

 

Social Square

Social Square | Ordered by Date

fresh banner