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.

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

Related Articles

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Try EchoTools - my free, iOS ultrasonography reference application!

Latest Articles