Custom Twitter, Google, and Facebook Vertical Box Widgets

Social Media buttons

It’s clear that Facebook, Google+, and Twitter are all crucial to social media efforts. Unfortunately, the three don’t play nice when you want to integrate all 3 widgets together. What often ends up happening is they have different widths, heights, and styling.

The fact most of these widgets use a complex combination of “iFrames within iFrames” and asyncronous Javascript makes trying to style these with conventional CSS a complete nightmare.

Thankfully, after some digging, I’ve discovered an elegant solution to create vertical box widgets that all have similar styling: CSS3 “Scale”.

CSS3 Scale

Since some widgets are wider than others, I was able to conveniently scale smaller widgets to be the same width as the others with CSS3. Here is the (cross-browser friendly) CSS:

transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1); 
-o-transform: scale(1.1); 
-moz-transform: scale(1.1); 
transform-origin: bottom left;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;

Note that you can adjust these amounts up to two decimal points (I haven’t tried more than that, but more might be possible if you really are pixel-pushing). For example, scale(1.15);

Let me know in the comments below if this helped you!

What People Are Saying:

  1. Kenny Novak says:

    great tutorial, simple and just what I was looking for. Thanks!

Leave a Reply

Copyright 2024, All rights reserved. Yadda yadda.