Social Sqaure

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 11 social networks & loads of feed options:

  • Twitter – Latest Tweets, Twitter Lists & Search
  • Facebook – Page Latest Wall Posts
  • Google + – +1 Latest Posts
  • Instagram – User Feed + Show Likes/Comments
  • RSS Feed – Latest Posts
  • 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
  • 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

Use the following format and paste into a browser. Replace the CLIENT-ID and REDIRECT with your info from Instagram.

https://www.instagram.com/oauth/authorize/?client_id=CLIENT-ID&scope=basic+public_content&redirect_uri=REDIRECT&response_type=token

For example:

https://www.instagram.com/oauth/authorize/?client_id=c20c9ee9524c4174ad4679cb3c6ff0f3&scope=basic+public_content&redirect_uri=http://pixelpointplayground.com/grind&response_type=token

 

When you hit enter, you will see your access token in the URL, like this:

http://pixelpointplayground.com/grind/#access_token=248817449.c20c9ee.76e1e87f06904236bf76e7a3e7304c1e

 

Copy this to the module.

 

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,!263314159"


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.