Social Media Buttons and Blog Customizations

ImageOhhh my goooodddd!! Not that I’m that religious, but that is another long story!!    Sometimes I just wish I was a genius like Leonardo da Vinci (one of my heroes by the way!) and that it would still be possible to be “the master” at the universal knowledge! 🙁  Unfortunately those times are long gone and the diverse range of trades and areas of scientific or less scientific knowledge have diverged in an infinite pattern of different paths, that it has become virtual impossible to be good at everything. If you are like me and could use a hand at configuring some social media buttons, click on for the jump…

Why?

You might be asking why all this talk, talk… But the truth is that for the past few hours I’ve been struggling to find and fine tune a couple of buttons that would allow me to link this blog and therefore my Pedro Pimentel Visuals adventure photography website to my social media profiles. It is not rocket science for sure, but having had a tip from a friend would have saved me a LOT of time.

It is fairly common knowledge that having all this back links to your multitude of platforms will highly increase your webpage SEO (search engine optimisation) and consequently strengthen your web presence. This way whenever someone looks for you, your blog, webpage or business there will be a multitude of links that hopefully come up together and make your potential customer feel more assured about who he is dealing with.

So, for the ones less knowledgeable in this tweaks and web “programming” I am not trying to create here a full tutorial on how to do this, but rather give you a few tips that you might find quite valuable for the amount of time you might save.

So… here goes the 101… or maybe should I say the 000 on social media buttons! Sorry… It is the only bit I can contribute for now!

Step 1

Find the the icons you require online. Many sites available online but I just used http://www.iconfinder.com/

There are gazillions of different and more or less artistic ones… But try to keep it KISS style I would say.  At the end of the day they are there to serve a purpose and not to distract your user from the most important stuff in your page… YOUR STUFF!

Step 2

Save the icons in your computer at a size close, but ideally always above the size you might require for your web page/blog.

Step 3

This is probably the key step… Find any place on your blog or website over which you have control to switch from Visual to HTML code. This will mainly be used as an exercise and test bench for your task. On wordpress it can be found on the right of your post window.

Once you have found this, get into visual mode (nice mode for the less web geeks like me) insert all your icons in the desired position, like you would do with other images in a blog post and finally  link each image to your social media profiles and then switch to HTML. At this stage you might want to find the little tick box that says to open in a new window rather than move away from your page.

Step 4

The code… That geeky stuff! By now, if you switch to the HTML view of what you just been building you should have ended up with something like this

<a href=”https://www.facebook.com/PedroPimentelVisuals” target=”_blank”><img style=”margin-top: -8px; margin-bottom: -8px;” title=”Follow me on Facebook” src=”http://blog.pedropimentel.net/wp-content/uploads/2012/05/1336273721_facebook_48x48.png” alt=”” width=”17″ height=”17″ /></a> <a href=”https://plus.google.com/u/0/113803118077978442332/posts” target=”_blank”><img style=”margin-top: -7px; margin-bottom: -7px;” title=”Follow me on Google+” src=”http://blog.pedropimentel.net/wp-content/uploads/2012/05/1336271862_13.png?w=54″ alt=”Image” width=”17″ height=”17″ /></a> <a href=”https://twitter.com/#!/Pedro_Pimentel” target=”_blank”><img style=”margin-top: -8px; margin-bottom: -8px;” title=”Follow me on Twitter” src=”http://blog.pedropimentel.net/wp-content/uploads/2012/05/1336273743_twitter_48x48.png” alt=”Image” width=”17″ height=”17″ /></a> <a href=”https://vimeo.com/pedropimentel” target=”_blank”><img style=”margin-top: -7px; margin-bottom: -7px;” title=”Follow me on Vimeo” src=”http://blog.pedropimentel.net/wp-content/uploads/2012/05/1336271815_vimeo2.png” alt=”” width=”16″ height=”16″ /></a>

that once copied and pasted  into any HTML code areas, widgets or posts  of your blog or website should look like something similar to the buttons here below when switched back to visual mode or once you click your preview button to check your website.

 Image Image 

All clickable and ready to go. If the sizes don’t come out as per your desires, don’t panic and go back into the HTML code to fix them manually. It is as easy as changing the pixel number for both height and width where you see alt=”Image” width=”46″ height=”46″. Remember to change it for all the icons, otherwise you’ll end up with some “escalator” look on your arrangement! 

It is a trial and error exercise, but hopefully this line might help you save some time. If you need any additional help drop me a line in the comments or via a direct email and I will do my best to help.

Hope this was worth your time. Good luck!

Leave a Reply

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