SZUL

the king of all white boys

Implementing an IFRAME Toolbar

posted in technology on

When I first put together the new design on this web site, I wanted to make sure that I integrated all of the my online presence, while also duplicating things as little as possible. I wanted to have as little information as possible on my web site that was already available on social networking sites. This led me to create the social networking navigation bar at the top. The biggest drawback to this method was then when people clicked on those icons to go to those social networking sites, there was no clear way to navigate back.

After seeing the IFRAME toolbar implemented on sites like Facebook, LinkedIn and Digg, to allow users to navigate to posted links with a clear path back, I decided that this would be the perfect technique to incorporate into my navigation bar.

I belong to several different LinkedIn groups dealing with technology. As such, I ran across an article posted in a group about implementing just such an IFRAME toolbar. The article belonged to Amir Harel, and the instructions were pretty easy and straightforward. This was something that I could have just as easily implemented myself through my own programming knowledge, but why, when you can use something that works just as well, and saves you the time.

The implementation was the easy part. After that, it was just a matter of styling things to make them fit. I'm in the process of developing a logo for the web site, so that's still on my list and wasn't able to be implemented, but other than that, the toolbar works just fine.

One caveat... Twitter has JavaScript code that pushes its web site out of any IFRAME's. This means that if you click on the Twitter icon, you'll lose the toolbar. With that one exception, I'm happy with the way things turned out.

Comments:

(Please note that all comments on posts older than 30 days are moderated and will not appear right away.)