Wednesday, June 15, 2011

Making a site social

making a site social

i recently decided to find a new job. after A couple of interviews i got accepted to a cool little company: http://www.gigya.com

one of the company's services is a JavaScript api to help you, in a very easy way, connect your site to all social networks
because everyone knows that today its all about social networks...
so i decided to give the product a try and experiment with it before i even started working there.

making a site social has a lot of benefits like increasing traffic, creating  a better surfing experience for the user by connecting with an account he already has on Facebook
and seeing his picture on your site. and so on...

so here is the full coverage of making a site social using Gigya's api.

* Gigya's service is free of charge as long as you have less than a THOUSAND unique users each month. 

the first step we need to take in order to start working with the api is to register on the site:
https://www.gigya.com/site/Register.aspx



after registration we will receive an api key.
which is enough to play around with the api and check it out.
but... if you want to upload it to production and use it properly you will have to set api keys you get from each social network.


press the edit link, then press the site settings button on the right. this will lead you to the settings page. there are a lot of settings and permissions stuff you can set there.
but first of all get the information needed for each social network you plan on working with.


now we can get to work,

i think the first basic thing a site needs is the ability to give the user the power to share things with their friends
so...  if we take a look at the available plugins page http://www.gigya.com/site/partners/widgets.aspx
there will be 2 plugins that fits us a "share" plugin and a "Share Bar" plugin

the share bar plugin is more what i had in mind for my site so ill just start with it..



people are very used to these kinds of social bars on websites which is good for us.

so each plugin in the plugin page has a wizard to help you customize the plugin the way you want with different appearances and to select the social networks.

then the wizard of course produces the code you need to put in your site in order for that plugin to work.
the first piece of code you will need to add to your site in order to work with the api is the api itself :) and the api key.
code produced by the wizard looks like this:

<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=xxxxxxxxxxxxx"></script>

<script type="text/javascript">

    
var conf= { 

      APIKey: 'xxxxxxx-xxxxxxxxxxxxxx'

    }

</script>



this script is supposed to be added in the head. for the first line its true :)
but of course putting scripts in our page is not good layer separation lines 3 to 5 should go in some general js file in your site.
also so we wont just declare a global variable in the global namespace i enter the api key to the Gigya api namespace like so:

gigya.services.socialize.apiKey =
{
          APIKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
         , enabledProviders: 'facebook,twitter'
}

the next piece of code we get is something like this:
depending of course on what settings and social networks you choose in the wizard.
i only needed this 4.

<script type="text/javascript">
var act = new gigya.services.socialize.UserAction();
act.setUserMessage("This is the user message");
act.setTitle("This is my title");
act.setLinkBack("http://www.gigya.com");
act.setDescription("This is my Description");
act.addActionLink("Read More", "http://www.gigya.com");
var showShareBarUI_params=
{
  containerID: 'componentDiv',
  shareButtons: 'facebook-like,google-plusone,share,twitter',
  userAction: act
}
</script>
<div id="componentDiv"></div>
<script type="text/javascript">

gigya.services.socialize.showShareBarUI(conf,showShareBarUI_params);
</script>

here, don't forget to change the domain Gigya to your domain.
this code will render the share bar, inside the: <div id="componentDiv"></div>
again, as before, we don't want these scripts to be inside our HTML. so we will extract the JavaScript code to a function (with a good name like RenderShareBar or similar...)
inside a js file, and call it from the onload or the $(document).ready, whatever, as long as we keep our layers separated.

and that's it! you will have a share bar in your site with just minutes of work, very cool.

so in conclusion:

making your site social is always good. so you definitely want to do it, and you can do it by yourself of course all social networks like Facebook and twitter has there
own api you can use to add and use them in your site, and its not that hard. but.... if you want to add multiple social networks then it starts getting annoying...
the Gigya api wraps all of this networks in one easy to use package with is very convenient.
another benefit is that you wont have to worry if a certain api of one of the networks changes.
another cool thing is the analytics you get in the dashboard. where you can monitor the "social activity" on your site.

http://www.gigya.com/public/platform/analyze.aspx

so that's it with the registration and share bar.
next post ill try the social login feature which i think is the most important one. so annoying when sites make you register and don't have some kind of social login...  :)

May the force be with you.




No comments:

Post a Comment