Archive for the ‘ Web Developer ’ Category

Embeding a Facebook photo gallery in your website

Sunday, March 9th, 2014 By Nik

Sometimes, so seemed trivial tasks becomes so daunting. “Add a Facebook image gallery to your site”, was just such a task. I simply though it would as  simple as adding any other Facebook Social Plugins  .

I started , by assuming that there would surely be a plugin provided by Facebook Developers Portal to  accomplish this task. To my surprise there is no such plugin provided as a part of Facebook Social Plugins  ( If you are one of those , who  havn’t used Facebook Social Plugins before , I have added a note at the end of this post simply for your benefit).

I googled for a solution and I realized that there are few options to go about doing this task . There were solutions which actually lead me to believe that this is NOT A TRIVIAL TASK, after all. There are solutions out there that suggest several techniques , one also had some solution using Facebook Graph API… Frankly, for all I know, this would be THE way to go about it, but not some simple solution I was looking for.

Finally , after looking a few options ( I have listed some below , for your reference) , I finally found one … I saw this embedded Facebook photo gallery on some page. The developer in me , did a view source and found the simple solution I was looking for  …. Just add the following code into your HTML , where you require the Facebook Photo Album to be inserted .

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); = id; js.src = "//"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-post" data-href="" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="">Post</a> by <a href=""></a>.</div></div>

Well! The code above displays the FB Album as below …


Now this one seemed to have everything,  Facebook social links, comments etc.

Other three good techniques that I explored and that would be useful for a few,  looking at a different sort of look-n-feel , are listed below


Facebook Social Plugins

For those who are unaware , here is a list of  Social Plugins provided by default by Facebook, that a developer could use to add to any website. Its pretty simple to add these plugins to any webpage you create, as simple as Ctrl-C & Crtl-V. Surely, if are a developer you would’nt require any more spoon feeding than this…  For exact codes that you would need to embed , I suggest you visit  Facebook Social Plugins page

Like Button

Let people share pages and content from your site back to their Facebook profile with one click, so all their friends can read them.

Share Button

Allow people to share to Facebook, share with particular friends or with a group. Alternatively, they can share in a private message.

Embedded Posts

Embedded Posts let you add any public post from Facebook to your blog or web site.


The Comments plugin lets people comment on any piece of content on your site.

Send Button

Let people privately send content on your site to their friends.

Follow Button

Let people subscribe to public updates on Facebook.

Activity Feed

Displays the most interesting, recent activity taking place on your site.

Recommendations Feed

Displays the most recommended content on your site.

Recommendations Bar

Let people like content, get recommendations, and share what they are reading with their Friends.

Like Box

A special version of the Like Button only for Facebook pages.


Display the profile photos of the people who have connected with your Facebook page or app.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Its about the “Web designers who can’t code”

Tuesday, March 9th, 2010 By Nikhil

With my limited skill-set with tools like Photoshop and Illustrator, I can honestly confess that I’m a better developer than I am a designer. But my background with core (server side) development with Java/PHP/COBOL , has been a very positive influence on my UI development skills. What I mean is, while creating my designs,i.e. whenever I do design, I think about how the design can be best converted into HTML-CSS and while doing the HTML-CSS, I give a thought about the backend technology and make reasonably sure that the HTML can be easily implemented into XSL loops or PHP snippets etc.

Over years, I have been thrown head on to designs by UI designers who probably donot have a clue what HTML or CSS is. All these years I have been thinking that I would asking for too much, If I just expect the designer, who is trying to shov his “impossible to code” design down my throat, to understand just a little bit what his design would be converted into. THAT would help right?

Then, I came across this post today … Web designers who can’t code …Thanks Lord! I’m just one of many who feel the same … The above artitle is a bit a long winded .. but worth the read, every word of it.

Thanks Elliot Jay Stocks … I feel relieved!

Here is some excerpts from Elliots article.

Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. It appears there are some very strong opinions held on the subject of whether web designers should be able to code.

So, before we get into this, allow me to quickly recap what I said on this morning on Twitter:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

… I should’ve been a little more specific in my tweet. I was talking about designers who don’t have even the most basic HTML and CSS skills to turn a flat design into an actual site. Not people who intentionally choose not to code; those who can’t. And I’m also referring only to front-end code here; of course it’s ridiculous to think that designers should also be amazing back-end programmers …

We get ‘web’ designs sent in Illustrator, 300dpi, impossible to code, no consistency / usability.
~ Amy Mahon

It’s getting late, and I’ve got to wrap this up somehow. I know there will be many who disagree with me, and my intention is not to offend or upset anyone who can’t code, but I hope that some of what I’ve said reflects some of the points that always come up when delving into this debate.

At the end of the day, I don’t lose any sleep over who can code and who can’t. I’m just genuinely surprised to find so many designers that lack front-end skills, as I thought this was a thing of the past.

Also read the comments , there were around 320 comments, as i write … they are worth a read.
Please read Elliots full post here .. Web designers who can’t code

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Sunday, October 18th, 2009 By Nikhil
  • The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode.
  • In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.


  • Backwards compatible with existing browsers
  • Authors are already familiar with the syntax
  • The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
  • Convenient shorthand syntax, e.g. authors can omit some tags and attribute values


  • Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
  • Integrates directly with other XML vocabularies, such as SVG and MathML
  • Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

CSS2.1 User Agent Style Sheet Defaults

Tuesday, July 28th, 2009 By Nikhil

Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome… I thought of digging a bit deeper into the area of  User Agent Style Sheets …
Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

For a full list of CSS 2.1 User Agent Style Sheets defaults click here

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

User Agent Style Sheets : Mystery Margins in Google Chrome

Monday, July 27th, 2009 By Nikhil

Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from , follow link to read more on User Agent Style Sheets

CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

How To Enable Writing to Status Bar (window.status) in Firefox

Monday, April 6th, 2009 By Nikhil

Another old school memory supplemental…

Why do we to enable windos.status?
Javascripts could to be a nightmare when you have something to debug .  Firefox does have a few handy addons, like Firebug thats makes our lives easy  and   Also , the vote for the  most popular debug  technique in Javascript must go to “ALERT()” .  Anywaz! There are few instances when adding ALERT do debug your mis-behaving Javascript  is just isn’t a good idea. For example! you have dragble item whose position  needs to be alerted …. NO NO! Dont do it! … you will  just get  infinite alerts  or you wont be able actually drap your dragable. Well! There are more good situations, where you might writing out debug texts to the status bar, much more usful… Believe me! Its Experience!

IE by default left you write to the browser STATUS Bar  using the syntax “window.status = ‘ something to debug’ “, but FireFox doesn’t  . So to enable windows status change , you can do either of the following.

Open about:config in browser ( type “about:config this into the address bar )  and search for
.  Change it to false… just click on the entry to toggle its state.

OR Alternatively

Tools → Options → Content → Enable JavaScript / Advanced → Change status bar text

And also note that … to write to the status bar in your Javascript, IE is just ok if you use a short syntax i.e. status =’ some debug text’ but in FireFox, you have to use in full syntax i.e.  window.status = ‘ something to debug’

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

SevenUp! Encourage the world to get rid of IE6!

Sunday, March 22nd, 2009 By Nikhil

Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

SO … Help rid the world of IE6 with one line of javascript!

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Global Translator Plugin for your WordPress Blog

Sunday, March 8th, 2009 By Nikhil

I’m so excited about the increasing number of page views on my blog, that I check my Google Analytics almost everyday. I noticed that my blog is being referred to by sites in many other languages and by people around the world. SO Nice !!!!
To make life a bit easier for my NON-ENGLISH viewer ship, I have added a Google Widget/Plugin called “Global Translator”.

The Global Translator says that it “Automatically translates a blog in 41 different languages by wrapping four different online translation engines (Google Translation Engine, Babelfish Translation Engine,, Promt)” … If you want to add it to your own wordpress installation … check it out here

Not sure, how good the translation is but I sincerely hope that it helps a few fellow developers out there, who end up reaching my blog, only to be disappointed , that it is in English ….

The translator links are at the Bottom of Side Bar ….

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Calling Multiple Windows Onload Functions In Javascript

Saturday, March 7th, 2009 By Nikhil

Heres another little peice of Javascript trickery that I had to dig around because the situation commaned it. In one of my web sites, I had this situation where I had to implement “windows.onload” twice. The first thing that would came to an inexperienced mind like mine ( I have to honestly say that, since I have been using javascript Frameworks and libraries, I have forgotton to do simple things on my own… sad but true), is the following method…


Sorry to say but, this wont work… dont want to discuss the execution science of Javascript much … but according to my recent experience, only the last function (onloadfn3) will ill actually get executed.

In normal situations, unlike mine (which I’ll talk about a little later)… you could do one of the following to execute mutliple onload functions ….

OR something like this

function doOnLoad() {
window.onload = doOnLoad;

For my current situation , I cannot use either of the above…
Why did I need to call windows.onload twice, rather that calling two functions within a single onload function? Here is quick look at my problem statement…

“My Site pages are structured like the WORDPRESS theme…. i.e. there is a common Header.php and Footer.php that gets included into all the site pages. There is an onload function implementaion in the Footer.php to do some common onload functions. AND there are few pages that need to something of their own ONLOAD , apart from those done by the common onload function. If I assign callback function directly to the window.onload handler, it will over-ride previously assigned callbacks in the Footer.php”

…. Is my problem understood :) ?

Well! there are few solutions that I did find. They all are very similar and mainly implementions of a solution given by Simon Willison (…

Solution :

Simply add this javascript code to site …

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
       window.onload = func
    } else {
       window.onload = function() {
           if (oldonload) {

And call it instead of the usual “windows.onload”

addLoadEvent(function() {
/* more code to run on page load *

Advantages of this code snippet …
1. Primarily, It lets you have multiple windows.onload events, called from seperate parts of your code, without overridding the previous definition
2. It is really unobtrusive. It can be placed in a file with your other scripts or in a separate file.
3. It works even if window.onload has already been set.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

How to include PHP code inside a Smarty Template

Tuesday, February 24th, 2009 By Nikhil

I thought this one will be a doodle to find in google, as many you us UI and script writers would need to do this on a day to day basis, that is include a bit of peice of PHP code snippet(.php) into a Smarty Template (.tpl).  I realized that easier/popular  your query, even more difficult to find the exact answer…   a million search results but most of them reffered to “file” includes in Smarty … which has the following syntax

    {include file=”include/header.php”}

This actually inlcuded the file fine but as text , What I wanted was the result of  included file .(Note the above is used include template inside a template file). Finally with a bit persiverance …. I stumbled across a slighty modified syntax, which was the answer to my requirement … so here it is… if you havn’t found  one already

{include_php file=”include/header.php” }

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter