Saturday, March 30, 2013

How To Install Javascript SDK for Faster Facebook Integration

I'm sure many of you already know about Facebook Social Plugins (FSP) like Facebook Like Button, Facebook Recommendation, Facebook Comments etc. They serve as a good source of traffic since Facebook users share and post your blog into their wall. To install these plugins to Blogger or Wordpress, you will be asked for something called Javascript SDK.

What is Javascript SDK


The real name of Javascript SDK is Facebook SDK for Javascript. To make it simple, it helps you install and use any Facebook Social Plugins with a few lines of code. For example:
To install Facebook like button without Javascript SDK, use this code:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=136654566362129" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
But with Javascript SDK installed, you just need:
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
Really cool, right?

Do I Need To Install Javascript SDK For Every Facebook Plugins?

Absolutely not! You only need to install it once.
If you read tutorials about installing FSP to blog, every post contains some steps like "Create Facebook Application", "Adding Code" ("code" means Javascript SDK). Or when you install a plugins from Facebook Developers, the first step is always "Include the Javascript SDK". That does not mean you must install Javascript SDK everytime, you just need to do it once.
Follow this post, and you can skip these steps forever from now on.

How To Install Javascript SDK

1. Create a Facebook Application

Facebook Application helps you manage and track your plugin. This also help you add more Administrator to manage plugin (especially for Facebook Comment) and more. Every Facebook Application comes with an App ID. When you provide this ID, it enables Facebook's Open Graph Meta Tags, which let you administer Facebook Pages for products (where you can share product updates and engage with customers who have "Liked" a product), and use Facebook Insights to track key metrics.

When creating a new Facebook Application, we are not really building an actual app, we just need a App ID. Providing an App ID for use with the Social Widgets feature is recommended, but optional, so you can skip this step.
Something you need to know about Facebook AppID:
  • You can use one AppID for multiple blogs.
  • Some plugins will not work without Facebook App.
  • Not all of the Facebook plugin need an App ID for installation code.
  • Some plugins need a particular AppID to work properly, that's mean you need to create a new Facebook App for the blog which uses that plugin.
Okay, let's do it:
  1. Go to Facebook Apps Developer and Login. Then click Create New App.
    Create New Facebook App
    Create New Facebook App

Thursday, March 21, 2013

Feedburner Subscriber Went To Zero, Again!

Yesterday (20th March 2013), as I noticed, the count number of Feedburner Subscriber is turned to zero instead showing the correct number. And if you login to Feedburner Dashboard, you will see all channel subscriber have gone zero. The Feed Stats Dashboard also show 0 Subscriber with 0 Reachability.

Not only today!

Look at image below, it has happened before. In 19th Feb 2013 and 8th March 2013, the feed count number had turned to zero for two days. So, it seems the Feedburner service is not as stable as before.
 The Feed Stats Dashboard also show 0 Subscriber with 0 Reachability
The Feed Stats Dashboard also show 0 Subscriber with 0 Reachability

Wednesday, March 20, 2013

Stylish Breadcrumbs For Blogger With Multi Label Support

Breadcrumbs is a navigation element used in user interfaces, in this case is for website. It helps users to know their current location in a website. Breadcrumbs for website often appears below title bars or menu navigations bars with links back to each category the current post is in.
Breadcrumbs for Blogger with vBB style
Breadcrumbs for Blogger with vBB style
Blogger post is located in Labels, not Categories and Blogger does not support multi level categories yet, breadcrumb is sure not available too. At this tutorial I will guide you how to add breadcrumbs for blogger with these advantages:

Pros:
  • Support Google Rich Snippet (you can test at Webmaster Rich Snippet Tool)
  • Support multi label breadcrumb
  • Breadcrumbs for label page
  • Style and compatible (even support IE)
  • Highly optimized and customize.

Breadcrumbs for Blogger is supported and display in Google SERP
Breadcrumbs for Blogger is supported and display in Google SERP