WordPress Social Sidebar With Data URIs

Minimizing HTTP requests is one of the “rules” of general web optimization. Data uniform resource identifier (URI) schemes provide a great way to embed images within a page without requiring an HTTP request for each image. I used the data URI method to create a social bar (in this site’s sidebar) with absolutely no additional requests for CSS images. 🙂

The following CSS should be added to your theme’s style.css file. It codes the data URIs for each of the icons in addition to utilizing some CSS3 for nifty opacity transitions on supported browsers.


.socialbar{height:35px;margin-top:10px;}

.socialicon{opacity:0.5;display:block;width:32px;height:32px;background-repeat:no-repeat;float:left;padding-left:1.5px;}

.socialicon:hover{opacity:1.0;-moz-transition:opacity 0.4s linear;-webkit-transition:opacity 0.4s linear;-o-transition:opacity 0.4s linear;transition:opacity 0.4s linear}

.facebook-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAhFBMVEUAAAD///8AAAA6V5M7WZY6WJQ8Wpf///88WpjY3up9kbo5VpE3Uos5VZA3U4s4VI1JZZ84VY9WcKY3Uoo8WZc2Uoo4U43y9Pg7WJSXp8ijsMyst842UIh3jLg2UYmkss7i5vCjsc2+yN1IZJ2kss9whrN7jrY4VI5thLOVpcRGYZhheakDw3IQAAAAA3RSTlMAAI+HcVpvAAAAuUlEQVR4XuXPR47DMAxAUSVUL+41vU+7//3CBCk2YEmLLOetKOADpMgsgpBlECFkFYTBJgiDurQ2mWRtWWOQNOmXR9okGKS5MyO/Pwt0wcnlKQa5AWADf6242TMGYHIMHHR04NiKuy3OHTgMDNCKv/XiEXBeUTC3gFEu35RAB60LKTllvqDAIRhk3kDre6B9KzLxcooFfSzQ0zco1QqklDpHf/Hvgu+RnUDr5+vzYOIGmSE5vGEeRKKuk7Ewzg5lTpAAAAAASUVORK5CYII=);}

.google-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAwFBMVEX///8AAAD////aSjjcSzndSzn429f98/LLRTTTSDftn5XXSTfiY1PTRzbfV0bNRjXKRTTQRzbrk4jSRzb65+XfeWzxt7DNRTXkb2HIRDTJRDTWSTfbSjnme27qnpT55+TVSDfvq6PHRDPGQzPORjXnsqvpnZTkhnrhemz65+Tiem3zzsruq6Loh3v88/LZYFHvtq/329fmhnrqk4j2z8reV0b0zsriemznnZTihXr1z8r0w73ywrzrnpXhbmDYSTgCQl4jAAAAAnRSTlMAjwuUU4kAAAEASURBVHhehdDVbsQwFITh7ZjCvMxlZsb3f6sex6q2kWznv8jVJ+tMBv0deSNw4E2DfU8aTGdFEVgritmUQDDODx3l44BAXtZpaC2ty5xAeXN8B9PqJP4LiOP5Ji0JvK7PGbsEzr7ZvwD6/GxqAjhlC863QPPEdwGcL9g8JXAdMy5EpoBI7AKE4CwOCVy0QGwBaQdrA66ApgXoRAAGJIB0gBcDnDfgtgUTyMwBcK9BJBPhAnigEY+E7GD4DN3ECUJaIYHKCxT0hm4dUIEaOcDb6h2mDzvA5xfNXCoAlRUMza/OJCCdNwgtGsALRATlB0uM+l5IfEeKRFX2mXveBr39AgQGJ3AFjmNAAAAAAElFTkSuQmCC);}

.instagram-social{background-image: url(data:image/png;base64,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);}

.lastfm-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEX///8AAAD////KDhLOHiLjfoHADRH77+/cXmHmj5Dqn6Dxv8D439/YTlHVPkG5DRHBDRHIDhLtr7DRLjLDDhG5DRC8DRG+DRH0z9DEDhHHDhLJDhLfbnHEDhK3DRC7DRHFDhK4DRC9DRHgm521DRC2DRBdjs+BAAAAAnRSTlMAjwuUU4kAAAD2SURBVHhe3cvHVsMwEIbRMKPeXHtJobz/K6JxDBwR4+z5Vv8ZXZ2e93ZYBO+HEfg4iMD51jTZbk1zO0eQXdrXP2ovWQRtJ0S+mxBdG0En6mHZbahFF4Gor2Ox23itBYFhLKbdinEgkC/FhLHAtZ5xTd3HVCz5DzBAuYDI+jjsb2DABFZxJwNyUMyXLAUzcKSYtKgdUimwX0cOngN/BFLjlivRgjM+BQy+gYYK51KCSQD92wqrZQZ8AkrJtne0koYClYBK9qvgDhVwGimggzOKW4jOSqOM7DEF6C0ASM0QWRmXZSmggvJ4r1IVYgoe+nfg5bDT0z4BBq8y652i2msAAAAASUVORK5CYII=);}

.linkedin-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAflBMVEUAAAD///8AAAABgbISibf////M5vABe6oBgLEBf7ABf68Bfa2q1eUBeKUBdqMBfawBeagBeqkBfKzd7vWZzeC73ep4vNaq1OQBfq4BdaHu9/oBd6UBdKDM5e8ShLBWq8wBeKYBdaK73OgSgayq0+MBc5+IxNsBdKFns9GWxdeRDNvkAAAAA3RSTlMAAI+HcVpvAAAAwklEQVR4Xu3St27FMAyGUd2QVHfvt7e093/B0EZgIAokLxnzDfo5nFFit5EQn8mEEK/JGBzfEx0ZTLc82m1ikB+yK/e4/i475AyyslLqfKfnWYVVZcagVHXhBiIaXFBRq5JBVY/WnBicTJAd64qBKqzWnkGnw2yhZuCMBvRNhxCkjVvBUgq0UsoWQM6DPY+//ASSiCQgcc2elvoIWNtjDDS+W/YjAiQC9MS9xQAAXCLgHwAiAr/LfB+b/+HvwEsysdkX8vQoqdOqHVQAAAAASUVORK5CYII=);}

.pinterest-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD///8AAADLICf////BHiXjiIzKICf88PHVTVL44eLnl5rgeX3FHybJICfOLzX10tTZW2Hutbfcam/EHybIHya5HSS/HiXxxMXqpqnSPkTCHyW6HSS9HiTml5q4HSO5HSO8HiTeiIv78PDGHybUW2DSW1/z0tS3HSPRPkThoqS2HSPiiIzfeX3rd52FAAAAA3RSTlMAAI+HcVpvAAABPUlEQVR4Xq3Px3KEMBBFUeynSM5hcnb+/99z96goizJmNr4bROsgFcHTg4LgfbEgCD4WY/C6EIP9oW03s7XtYU9gc9z+2XFDYNtJuXbdTmchxPl0c69SdlsCnayTe9cXMfZyTbhadgRkfWlS6lP47WjSXGrJIGlSrfWOx8MXrTIVstA6bRIG6yTVQEWz0MKFiEQMnSbrEWSG9ldY8U5JrhTCZD5QtFHAEuOK+wfKB7kQPbJQxHea3y/JfUBThViUQCYoICaX/YAVgRgRIdgf8DYLIneFmgI+N0LFVxhekpsCHodAHoHPMita0kN7oKT5AKOAQYQFUJArPcADzsKFnEDhATcRBsjADYR7TIBlUAJhBRQ9azsB7scVubEYE+BEBTWCCr8AbF4gdKC3mAFsDAGjLDAD/P4ZPC8WPOwbaGwxPbBpbdgAAAAASUVORK5CYII=);}

.rss-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAolBMVEUAAAD///8AAADtpwDurRH0ymb////zxFXmogDinwD77cz++e766LvxuTPspgD10Hf54qrcmwDloQDfnQDppADhngD9893yvkTvsyLjoADdnADqpQDZmQD43Jn31ojfoxHYmADbmwDVlgDrpgDXlwDoqBHnowDWlwDUlQDt05byzXfrqxHovVX0z3f9+e757Mzy04jquUTlphH657vtrBH88934+BWEAAAAA3RSTlMAAI+HcVpvAAABHklEQVR4Xq3PR27DMBBAUSbDqt6Le03v5f5XC8mRDBOE5U3+RgL1MNSQmysR8jgZIeRhMg129xPtNDhsFhfbHDRYbPPZ7GW9nvnl24UGeVmrL8752/vHZ++k6jLXoFSFPHLs9+kozypUqUFd3FXPfCx8nZ+q7opaAyWrfRIEJ/L9kwztK6k06OU8AQDaphGKMAYsmct+BFicDcIHQnRIolG4gOrTZmmPV0Y01AO2zIxJ7ZsHsDAdBXMBBEGIxIjMXOJvIaJRdAYzDwyzeYs/GrkAExy/xAZ2LohTYWfgCHMbcwDTJwHglwzh0t1iWI3hAq3xDrBLrgDsSwfUeHoOsuFyO0rgwwE04g0D3fICAKCAUUrHhwv8/g/cTkau9gcCqTOo8buEuAAAAABJRU5ErkJggg==);}

.twitter-social{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACOUlEQVR42u2VzWsTQRjGB7z4gQc9ePLgSREPRcE/wauKZ1HPokeF9lQUPIkeBMG2tlqNrdXSWK3YqiBCK5hDoDbph7W1G9rSJhnTZrPZ3bj72PeFXWqpuyRjXIT+4IHJzGR+z2Z3iQAQaZi7qTyiiPBpGUMk8WlJQbSm/2nY6dM2DtE2AXF/Epz2usQ7n13s9ODFjq8QD6YhHn6rZ8jBLnZ68GTnLMSjOYjHGkQsU4/Q2eRgFzs9aIIXn8xDdC3UM+RgFzs9qBUvdC9CPF2C6FmuKjt6s2hOlfBh2Ua3ZuLokPTXGtbG+17kaExnk4Nd7PSgRtSONzzLriXHuZTUcWW0ROM/Zv8ridWKi43cmipjOFfBtbSxbn+WHOxip08sQ5Pckjc+z3PuzZggLiR0+rxpErKCIDrnTBwaLNBeOpsc7CJnaIE702V4dGkWdsXlb/KDbwoI4+ZUmfbWVuD0SBHrcVygfdbEyeEirx8ZCi7Q8d2kfTUX4PRkLGyG6QCa4cANvnq1AjcmDBLVzNXRklqBM5+KUOHEx1X1W3B93EAtZAyHvq9eYHdcIqZZqJbGL8bfKbC9T/LDVg1Z08XOPqlcwM/hwQLylgvCRTinRvg1VS+wMecTOsK4nOQnX73A3n6J4+9XcOD1Dxx7t4LmtIHJ4k8Ecfazf+XqBbb15tE0ZsB2EEp83sKefhkgV7gF9EucS+honTHxcsHG2yUbA4s2/8lcTOoBYrUC1WSrwFaB/74AczuiRM8ve7kyQo3aUQIAAAAASUVORK5CYII=);}

Now for the HTML – before copying the code below (probably into an HTML widget), be sure to modify each of the URL references based on your social media profiles. Also, the “target=’_blank'” parameter will open each of the links in a new window rather than leaving the current page on your site.

<div class="socialbar">
	<a href="FACEBOOK URL" target="_blank" class="socialicon facebook-social" title="Facebook"></a>
	<a href="GOOGLE + URL" target="_blank" class="socialicon google-social" title="Google+"></a>
	<a href="INSTAGRAM URL" target="_blank" class="socialicon instagram-social" title="Instagram"></a>
	<a href="LAST.FM URL" target="_blank" class="socialicon lastfm-social" title="Last.fm"></a>
	<a href="LINKEDIN URL" target="_blank" class="socialicon linkedin-social" title="LinkedIn"></a>
	<a href="PINTEREST URL" target="_blank" class="socialicon pinterest-social" title="Instagram"></a>
	<a href="FEEDBURNER URL" target="_blank" class="socialicon rss-social" title="Subscribe via RSS"></a>
	<a href="TWITTER URL" target="_blank" class="socialicon twitter-social" title="Twitter"></a>
</div>

If you want to use a different icon set or add/remove social media services of your own, definitely take a look at webSemantics’ image to data URI converter, and as always, post a comment if you have questions.

You might also like

Leave A Reply

Your email address will not be published.

4 Comments
  1. KevinProvance says

    This…is GOLD! Thank you!

    1. Rishi says

      You’re very welcome! Let me know the results. =)

      1. KevinProvance says

        So far, so good (http://www.kevinprovance.com if you want to see, it’s not live just yet). Did you make those icons, or did they come from a set? I want to add YouTube and Goodreads up there. Again, awesome stuff.

        1. Rishi says

          I just browsed around for “free social icon pack” and made data URIs out of icons I liked.

Leave A Reply

Your email address will not be published.