Social Media Bar – Drop In

social media barHave you, as a web developer, ever wanted a social media bar that you could just drop in somewhere in your wordpress template and have it just work without having to mess with plugins, or strange behavior? Heh, I sure have.

Dealing with the various social media site’s buttons can be fairly maddening to deal with.

Today, +CrazyXhtml.com made a post ( https://plus.google.com/107658987396380937151/posts/eiGXKvwZpUp ) in a community that had sharing links to all the social media sites.

Now, in and of itself, this is pretty cool, but I wanted to take it a step further than that, so using the links they provided, I created a full fledged Social Media Bar.

Now, it should be mentioned that this bar probably can’t just be copy and pasted in. You’ll need to play around with the css a little bit to get it to fit your site, but with this bar you should be able to be up and running in no-time. Each button opens up in a 500×550 javascript popup window (that can be re-sized, etc) that directly pulls up the sharing content of that social media site.

You can see what the bar looks like here: https://docs.google.com/file/d/0B25BbZxm93S9OHk0eFhnY1E2d0U/edit?usp=sharing

The bar itself does not use sizing. Instead it relies on padding and margins to size itself. You can increase padding and margins to make it bigger or smaller as you see fit. Moreover, it uses percentage margins to space itself out, so you will need to set that where applicable (default: margin-right: 8.772%; ).

Uses CSS transitions for the hover effect which looks really nice.

Hope you like it! 🙂

P.s. It should be noted that of course it will work outside of wordpress, however, you would need to edit a few obvious variables.

It can be seen live in action on this site, in the footer.

https://drive.google.com/folderview?id=0B25BbZxm93S9aTJyYVlPakZublk&usp=sharing

Leave a Reply

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