WordPress Social Sidebar With Data URIs

4

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.

4 COMMENTS

 LEAVE A REPLY

Please enter your comment!
Please enter your name here