Home > How To's/Reviews > WordPress Social Sidebar With Data URIs

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.

 LEGAL

My posts are not to serve as a replacement for recommendations provided by licensed physicians nor do they represent the opinions of Baylor College of Medicine or its affiliated institutions. Please read this site's Disclaimer and Terms of Use for more information.

ALSO CHECK OUT  

410 Entire Directory With .htaccess

Due to an oversight with folder permissions, I was recently the victim of a massive …

 4 comments

  1. This…is GOLD! Thank you!

 DROP A LINE

Your email address will not be published. Required fields are marked *