Galin Iliev's blog

Software Architecture & Development

How to add Google+1 button to

After adding Facebook “Like” button to my blog I’ve decided to add Google+1 button as well Smile. I guess I am also going social although a little old fashioned with blog.

Again it is very easy to add it with two simple steps:

1. Add the tag to the template in order to appear in every post.

Open ~/themes/MY-BLOG_THEME and edit PostView.ascx by adding following script where appropriate:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" annotation="inline" href="<%=Post.PermaLink %>"></g:plusone>

2. Add google JS at the end of the page.

Open ~/themes/MY-BLOG_THEME and edit site.master and add this at the end:

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

Please refer to google documentation for more information and to configurator to customize

Single sign on with Windows Live Id and OAuth 2.0


At some point part of developing a website was creating its own AuthN system with credentials valid only for the website being built. Having lot’s of people doing this it created trouble for users remembering all the credential, emails, passwords, secret questions and so. Not to mention security implications.

Luckily at some point the biggest players started sharing the logins and OAuth was born. OAuth 1.0 was a bit complicated and this is why an effort to OAuth WRAP and OAuth 2.0 (still work in progress) is here. Having major players almost all user has accounts in one or more on the following services:

All of the above are using OAuth 2.0 which requires SSL and is the easiest version to use

Signing flow

It is described very well in OAuth 2.0 spec and in OAuth 2.0 implementation on WLID. I will put the steps here for completeness.

  1. The client initiates the flow by directing the resource owner's user agent to the Live Connect authorization endpoint, by using a URL in the following format.

    This URL contains the client ID, requested scope(s), local state, and a redirection URI to which the authorization web service is to send the user agent after access is granted or denied.

  2. The authorization server authenticates the resource owner via the user-agent, and establishes whether the resource owner grants or denies the client's access request.

  3. Assuming that the user has granted access, the Live Connect authorization server redirects the user agent back to the client by using the redirection URI that was provided in the initial request.

  4. The user agent calls the client with the redirection URI, which includes an authorization code and any local state that was provided by the client. For example:[authorizationcode].

  5. The client requests an access token from the authorization server's token endpoint by using its client credentials for authentication, and includes the authorization code that was received in the previous step. The client includes the redirection URI that was used to obtain the authorization code for verification. The request URL has the following format: redirect_uri=REDIRECT_URL& client_secret=CLIENT_SECRET& code=AUTHORIZATION_CODE& grant_type=authorization_code.

  6. The Live Connect authorization server validates the client credentials and the authorization code, and ensures that the redirection URI that was received matches the URI that was used to redirect the client in step 3.

  7. If the credentials are valid, the authorization server responds by returning an access token.

Single sign on example

Since It is based on so called 3rd party application first login is needed to accept consent form.

Preparation steps:

  1. Navigate to
  2. press Sign in button
  3. Login into the open popup
  4. Accept consent form
  5. Observe personalized message and token 
  6. Close browser

Single sign on

  1. Open new browser (InPrivate preferable) and navigate to 
  2. Verify page shows you’re not logged in:
  3. Open new tab and Navigate to and login with your Live ID
  4. Open new tab and navigate to 
  5. Observe that you’re logged in




Facebook Like button and

I have platform for only a day now and I wanted to integrate Facebook "Like" button in it. It apeeared much more easier than I thougth. All I had to to is open the ~/themes/MY-BLOG_THEME and edit PostView.ascx by adding following script where I foun appropriate:

<iframe src="<%=Post.PermaLink %>&amp;layout=button_count&amp;show-faces=true&amp;width=50&amp;height:25px&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:25px;float:left;"></iframe>

This was all. Maybe I need to get play to web frontend more often to refresh my skills :)

Migrated to

Finally I was able to migrate my old blog to the new platform Now I am ready to start blogging about Win8 development, Azure OAuth, Windows live id and facebook integration.

so many interesting subjects