SoGrid v1.0 Documentation

1. Plugin Installation

You can install the plugin with two methods:

a) upload plugin via wordpress Add New

  • 1. Go to Plugins / Add New
  • 2. Click Upload Plugin
  • 3. Select plugin zip file and click Install Now
  • 4. When upload is finished click Activate Now

b) upload plugin via FTP

  • 1. Use FTP software (FileZilla or similar) and log into your site
  • 2. Go to directory wp-content > plugins > and upload the directory soGrid from your local file sytem
  • 3. Go to Plugins/Installed Plugins
  • 4. Find Plugin SoGrid and click Activate

Important

You have to enable web server to write to wp-content/plugins/sogrid/tmp/cache directory
You can do this by using the FTP sofware and change permissions to this folder

ftp_permission

2. Setting up Pinterest Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Pinterest network button to “On” (Settings for Pinterest grid will appear bellow)
  • - In the “ID” field enter an url for a board that you want to display, like this “username/boardname” (You can get this info by visiting a board that you like on Pinterest and copying that info from an URL and pasting it into the field in SoGrid)
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"]
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the Pinterest board that you used

Pinterest Settings

You can play around with the settings of your Pinterest grid and re-style it if you want. You have tons of settings ranging from functionality options to design features. You can personalize your SoGrid just the way you want.

3. Setting up Google+ Grid

Getting your Google+ API Key

  • - To use Google+ you will need Google Api key. To get this key, login to Google and go to “https://console.developers.google.com/”
  • - Create a new project and name it SoGrid
  • - Go to “APIs and auth > APIs” and under “Social APIs” click “Google+ API” and enable it
  • - Go to “APIs and auth > Credentials” and create new key
  • - The created key should look like this “AIzaSyAPi6JG0UeBf-qbDyQhpbUSpwTJyjgPJE0”.
  • - Copy that key and paste it in “SoGrid > Options” in the field “Google APi key”

Creating Google+ Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Google+ network button to “On” (Settings for Google+ grid will appear bellow)
  • - In the “ID” field enter an url for a Google+ profile that you want to display, like this “100708263285404833152” (You can get this info by visiting your Google+ page and going to your Profile page. This is your Google+ ID “https://plus.google.com/100708263285404833152/posts” . Copy that info from an URL and paste it into the field in SoGrid)
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"]
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the Google+ posts from your profile page

NOTE: Before you start the setup of Facebook for SoGrid please follow this instructions!

In order to get your Facebook grid working you have to configure the source for the feed that will be displayed on your page.

NOTE: You need to have PHP 5.4+ enabled for your hosting. If you are running a lower version, please contact your hosting provider to update the version of PHP on your server.

Getting your Facebook API Key and Secret

  • 1) Login to Facebook and go to "https://developers.facebook.com/apps"
  • 2) In order to start the process you need to register as a developer if you are not already registered please register, you need to follow the procedure asked from Facebook
  • 3) Add new App and when you get the pop-up screen choose to make the app as a Website App

  • AddAnewApp

    Website

  • 4) Choose a name for your new App and click “Create New Facebook App ID”

  • Name

  • 5) Choose a category for your App (Communication category will be fine) and click “Create App ID”

  • Communication

  • 6) In the top right corner click “Skip Quickstart”

  • Skip

  • 7) You will then be taken to a page where you will see your App ID and App Secret

  • AppID

  • 8) Next to the App Secret click the "Show" button (it may require your Facebook password to display the secret)

  • Show

  • 9) Copy both App ID and App Secret and paste them in "SoGrid > Options" in the fields “Facebook App ID” and “Facebook App Key”

  • Data

Creating Facebook Grid

  • 1) Go to “SoGrid > Add New/Edit”

  • create_sogrid

  • 2) Name your SoGrid
  • 3) Switch the Facebook network button to "On" (Settings for Facebook grid will appear bellow)

  • create_sogrid

  • 4) In the “ID” field enter a profile ID or an Album ID for the Facebook profile that you want to display.
    (You can get this info by visiting your Facebook page and going to “About > Page Info” and at the bottom of the page you will find your “Facebook Page ID” .

    Copy that info and paste it into the field in SoGrid)

  • id

  • 5) Click “Save Sogrid” button on the right of your screen

  • savesogrid

  • 6) When you save SoGrid for the first time, you need to click the button bellow the General SoGrid Options called "Get Social Posts"

  • Get_social

  • 7) Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • 8) On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"]

  • finish

  • 9) Copy that shortcode and paste it on any page that you have or create a new page and paste it there

  • Page Shortcode

  • 10) Save that page and preview it, you will see your SoGrid with the Facebook posts from your profile page

  • Preview

Getting your Consumer Key (API Key), Consumer Secret (API Secret), Access Token and Access Token Secret

  • - Login to your Twitter account and go to “https://apps.twitter.com/”
  • - Create new App and enter name, description and website and click “Create your Twitter Application”
  • - You will be taken to a page for your App. Click the “Keys and Access Tokens” tab and click the “Create Access Tokens” button at the bottom
  • - From this page copy Consumer Key (API Key), Consumer Secret (API Secret), Access Token and Access Token Secret and paste them in “SoGrid > Options” in the fields “Consumer Key”, “Consumer Secret”, “Oauth API Access Token” and “OAuth API Secret Access Token”

Creating Twitter Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Twitter network button to “On” (Settings for Twitter grid will appear bellow)
  • - In the “ID” field enter a Twitter profile without “@” or a hashtag with “#” in front of it.
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"]
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the Facebook posts from your profile page

6. Setting up YouTube Grid

Getting your Google API Key and enabling YouTube API

  • - To use Google+ you will need Google Api key. To get this key, login to Google and go to “https://console.developers.google.com/”
  • - Create a new project and name it SoGrid
  • - Go to “APIs and auth > APIs” and under “Social APIs” click “YouTube API” and enable it
  • - Go to “APIs and auth > Credentials” and create new key
  • - The created key should look like this “AIzaSyAPi6JG0UeBf-qbDyQhpbUSpwTJyjgPJE0”.
  • - Copy that key and paste it in “SoGrid > Options” in the field “Google APi key”

Creating YouTube Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the YouTube network button to “On” (Settings for YouTube grid will appear bellow)
  • - In the “ID” enter an url for a YouTube channel that you want to display, like this “$UC_IRYSp4auq7hKLvziWVH6w”
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click "SoGrid" in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “[sogrid id="1"]
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the YouTube videos from your channel page

7. Setting up Instagram Grid

NOTE: Before you start the setup of Instagram for SoGrid please follow this instructions!

In order to get your Instagram grid working you have to configure the source for the feed that will be displayed on your page.

Getting your Client ID and Client Secret

  • 1) Login to your Instagram account and go to "https://instagram.com/developer/"

  • savesogrid

  • 2) In the upper right corner you will find "Manage Clients" , click that button and fill in the info required.

  • savesogrid

  • 3) Once you create your App you need to "Register a new client", click that button and fill in the info required.
    (We will edit the “Redirect URI” field later when we start to create the grid itself)

  • savesogrid

    savesogrid

  • 4)Once the registration phase is over, click the "Edit" button to edit a client and select "Security" tab and in that tab uncheck "Disable implicit OAuth"

  • savesogrid

    savesogrid

  • 5) From the next page copy Client ID and Client Secret and paste them in "SoGrid > Options" in the fields "Instagram Client ID" and "Instagram Client Secret" in the backend options of the SoGrid.

  • savesogrid

Creating Instagram Grid

  • 1) Go to “SoGrid > Add New/Edit”

  • savesogrid

  • 2) Name your SoGrid

  • savesogrid

  • 3) Switch the Instagram network button to “On” (Settings for Instagram grid will appear bellow)

  • savesogrid

  • 4) You should get a message in red that the Instagram key is not confirmed.
    Copy the url below (it should look like this: yourhost/?my_..) and paste it in the "Redirect URI" field in the Instagram backend
    "Manage Clients > Edit > Security > Valid redirect URIs" field and save it.

  • savesogrid


    savesogrid

  • 5) Go back to SoGrid backend and click the "Get Access Token" link and allow the Instagram App to access your data.

  • savesogrid

  • 6) In the “ID” field enter a Instagram user ID, tag, location or multiple IDs.

    • For user ID: You need to convert your username to a user ID, you can do this by using this tool
      After you get the ID, type it in this form: !USERID. Where the USERID is the ID number of your profile.
    • For using distance: Add ? and lat/long/distance where lat is latitude long is longitude and distance is max 5000
    • For using tags: Add # and tag. For example: #sports
    • For using location:Add @ and location. For example: @Serbia
    • For using multiple IDs:Add multiple IDs as explained, and separe them via commas. For example: !1978120693, !4568521253, !8956421523

    savesogrid

  • 7) Click "Save Sogrid" button on the right of your screen

  • savesogrid

  • 8) When you save SoGrid for the first time, you need to click the button bellow the General SoGrid Options called "Get Social Posts"

  • Get_social

  •   9) Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • 10) On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="2"]

  • finish

  • 11) Copy that shortcode and paste it on any page that you have or create a new page and paste it there

  • Page Shortcode

  • 12) Save that page and preview it, you will see your SoGrid with the Instagram posts from your profile page or used tags

8. Setting up Dribble Grid

Getting your Dribbble Access Token

  • - Login to your Dribbble account and go to “http://developer.dribbble.com/” and click “Register an application”
  • - Fill in the required fields (the website url has to have a "http://" in front of it) and click "Register Application"
  • - From the next page copy Client access token and paste it in “SoGrid > Options” in the “Dribble access token” field.

Creating Instagram Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Dribble network button to “On” (Settings for Dribble grid will appear bellow)
  • - In the “ID” field enter a Dribbble username or multiple usernames separated by commas.
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"] ”
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • -Save that page and preview it, you will see your SoGrid with the Dribbble posts from a profile.

9. Setting up Flickr Grid

Getting your Flickr Api Key and Flickr Api Secret

  • - Login to your Dribbble account and go to “https://www.flickr.com/services/api/” and click “Register an application”
  • - Click "Create an App" tab and under "Get your API Key" click "Request an API Key"
  • - Click "Apply For a Non-Commercial Key" and name your app, add a description and select 2 checkboxes bellow and click "Submit"
  • - From the next page copy Flickr Api Key and Flickr Api Secret pase it in “SoGrid > Options” in the “Flickr Api Key” and “Flickr Api Secret fields.

Creating Flickr Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Flickr network button to “On” (Settings for Flickr grid will appear bellow)
  • - In the “ID” field enter a Flickr user ID, search term or multiple usernames separated by commas.
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"] ”
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • -Save that page and preview it, you will see your SoGrid with the Flickr posts from a profile.

10. Setting up Tumblr Grid

Creating Tumblr Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the Tumblr network button to “On” (Settings for Tumblr grid will appear bellow)
  • - In the “ID” field enter a Tumblr user ID or multiple IDs separated by commas.
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"] ”
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the Tumblr posts from a profile.

11. Setting up VKontakte Grid

Getting your VKontakte Application ID and Secure key

  • - Login to your VKontakte account and go to “http://vk.com/apps?act=manage” and click “Create an application” button
  • - Name your application, under category select "Website" and enter your website (site address has to start with http://)
  • - VKontakte will require an authentication via SMS, complete the process and enter the code
  • - Go to "Settings" on the left menu and copy "Application ID:" and paste it to "vKontakte Client Id" in SoGrid options panel in your WP backend and copy "Secure key:" and paste it to "vKontakte Client Secret" in SoGrid options panel in your WP backend

Creating Flickr Grid

  • - Go to “SoGrid > Add New/Edit”
  • - Name your SoGrid
  • - Switch the VKontakte network button to “On” (Settings for VKontakte grid will appear bellow)
  • - In the “ID” field enter a VKontakte user ID, group or album.
  • - Click “Save Sogrid” button on the right of your screen
  • - Once the plugin is saved you need to click “SoGrid” in the left Wordpress menu
  • - On this page you will see your SoGrid saved and next to it there will be a shortcode like this “ [sogrid id="1"] ”
  • - Copy that shortcode and paste it on any page that you have or create a new page and paste it there
  • - Save that page and preview it, you will see your SoGrid with the VKontakte posts from a profile.

12. SoGrid Options

SoGrid has tons of options to help you personalize your grid just the way you want it. You can check out all options for SoGrid bellow with detailed description.

Social Networks

SoGrid currently supports 4 most popular social networks: Pinterest, Facebook, Google+ and Twitter. You can choose which social network you want in your SoGrid or you can add multiple networks in one grid.

General Grid Options

  • Dynamic Grid - You the option to use 2 types of grid, default grid (3 posts in a row) or dynamic grid (2 big posts, 2 small posts per row)
  • Random Order - Default ordering of the posts is done by date, if you select random order the posts will be displayed in random order
  • Dynamic Loading - When your grid has lots of social network posts you can activate dynamic loading to load each few posts dynamically and avoid long loading of pages.
  • Animate SoGrid on Scroll - Animate social network posts when the user scrolls down through the grid
  • Enable scroll image when they are higher than container - Enable or disable the option to allow the user to scroll the image of a certain post

Social Network Options

  • ID - Enter the ID of your Pinterest board, Facebook profile or album, Google+ profile or Twitter profile or hashtag
  • Maximum Results - Limit the number of posts that are going to be displayed on your grid. Each social network has a limit of how much posts it can display: Facebook: 250 posts, Google+: 500 posts, Pinterest: 25 posts, Twitter: 50 posts
  • Dynamic Loading - When your grid has lots of social network posts you can activate dynamic loading to load each few posts dynamically and avoid long loading of pages.
  • Limit Results By Date - Activate this option if you want to limit posts by a certain number of days
  • Limit Days - Limit results to posts published before certain number of days
  • Enable Intro (Image, Date) - This option allows you to enable or disable the image or the date shown on a post
  • Enable Thumb - This option allows you to enable or disable the thumb
  • Enable Text - This option allows you to enable or disable the text for a specific network
  • Share - This option allows you to enable or disable the share bar bellow the post
  • Enable Border - This option allows you to enable or disable the border around a post
  • Box Border Color - This option allows you to change the color of the border adound a post
  • Box Background Color - This option allows you to change the background color of a post
  • Share Box Background Color - This option allows you to change the color of the share box bellow the post
  • Icon Color - This option allows you to change the color of the social network specific icon
  • Date Color - This option allows you to change the color of the date
  • Title Font - This option allows you to set the font for a post title, all Google fonts are supported
  • Title Color - This option allows you to change the color of the post title
  • Text Font - This option allows you to set the font for a text in a post, all Google fonts are supported
  • Text Color - This option allows you to change the color of the text on a post
  • Share Link Color - This option allows you to change the color of the links in the share box
  • Share Cover Color - This option allows you to change the color of the hover for share links
  • Share Numbers Color - This option allows you to change the color of numbers in the share box
  • Share Icon Color - This option allows you to change the color of icon in the share box
  • Share Line Color - This option allows you to change the color of the line that separates post from the share box
  • Link Color - This option allows you to change the color of the links in a post
  • Link Hover Color - This option allows you to change the hover color of the links in a post

13. Support

Shindiri Studio supports SoGrid item on 2 instances:

  • - http://support.shindiristudio.com
  • - support@shindiristudio.com

If you have some problems regarding the plugin installation or functionality, feel free to contact us at any time, our support team will try to help you out as soon as possible.