EU laws require me to tell you if I have cookies. So many jokes there. I have ads installed, so I suppose I have cookies. By using this site, you agree to its use of cookies. Learn more. Sing along.

BBP #5 Social Media Icons

Last week, you worked on a sidebar button. I ran off with a church trip and haven't actually tackled that one yet, myself. It's one of those things that is still waiting for the muse to strike. How did you do? Do you have a beautiful button to share with me?

Some other sidebar buttons that you might want to work on are your social media icons. I used to think those little boxes in the sidebars were to encourage people to share your posts. I used to think the tooth fairy was a cheapskate, too. In fact, the social media boxes often found on blogs are to encourage readers to connect with you and follow you through various social media platforms. Also, the tooth fairy was probably doing the best she could at the time. It was the '80s, afterall.

When someone visits your blog and likes your content, you want to make it as easy as possible for them to find you again. I have Google Friend Connect and Networked Blogs in my sidebar because it is required for some of my review gigs. Vendors want to see some numbers so they know that someone will be reading your reviews of their product. The truth is that, while it is easy to sign up to follow a blog, few people actually read posts through those two platforms. They keep up with blogs by seeing pictures on pinterest, tweets on twitter, and posts on facebook. The most effective "follow" is through email. Share these links with readers and make it easy by using buttons at the top of your sidebar!

First things first, you need images. Each of those boxes you see in other blogs are actually individual pictures that are also links. You need a separate picture for each platform. Here's the sad part: you need to use the trademark image for these links. No cutesie versions. Yes, you've seen other gorgeous blogs use color-coordinated versions that are super-pretty. But it's not legal. Stay legal. Use the real thing.

Get those images here:

After downloading the official badge, upload these images to photobucket.

And now, the dreaded word: code. 

Go to your blogger dashboard and click on Layout. Click on the nice little box that says "Add a Gadget". Scroll down and choose HTML/JavaScript. You can give it a title if you'd like, something like "connect with me". Or leave it blank.

For each badge you want to share, copy and paste the following code, replacing the red letters with your own html addresses:

<a href="http://the address you're linking to goes" style="margin-left: .25em; margin-right: .25em; target="_blank"><img border="2" src+"http://the photobucket direct link to your image goes here.png" width="35" height="35"/></a>

You'll paste as many copies as you want badges, all into the same HTML/JavaScript box. They will automatically line up side by side unless you type in a <br> between them or unless there is not enough space to fit them all.

See the little line in there that says style="margin-left: .25em; margin-right: .25em; ? That is just to give you a bit of padding between the badges. Some of the logo owners require open space around the image of a certain width. You can play with that padding to suit your sidebar. Make it bigger or delete it completely if you like. I made the left margin of my first badge = 0 and the right margin of my last badge = 0, just to give a bit of extra room. 

Also, see where it says width="35" height="35" ? That is again, completely optional. I didn't want mine to be too distracting, but I didn't want anyone missing it either. I think 35 is a nice number. I wouldn't go under 30 and I wouldn't go over 50. Play with it until you get your badges to fit and look nice.

You may notice that I don't have all of the logos that I shared with you when we discussed image links. I just don't use instagram or google+ very much at all. Since it would basically be embarassing to share at this point, I left them off.

For a link to email you, to match the gmail logo, you'll do one small thing different than the other badges. Where the first link is supposed to link to a website address, you will instead enter the following:

<a href=""mailto://your-email-address-here"" style="margin-left: .25em; margin-right: .25em; target="_blank"><img border="2" src+"http://the photobucket direct link to your image goes here.png" width="35" height="35"/></a>

And where it says your-email-address-here? That's where you put your email address. Easy-peasy!

Check your sidebar and determine whether or not readers can easily follow you through other social platforms. Give them some easy links.

If you are not currently using other social platforms, GET TO IT! 

Take a glance at your blog and catch up:
  • Is your header readable? Attractive?
  • Do you have a blog button that is crisp and readable? Shareable?
  • Are your sidebar links working? Delete broken links!
  • Is your sidebar organized or could it use some headings?
Is the text within your post body easily read? 
  • Plenty large font? 
  • Dark font on light background? 
  • Plenty of width so that followers can read more than 4 words per line before it is squished down to the next line?
Link up and share your progress - any progress - below!

No comments:

Post a Comment

"Man lives by affirmation even more than by bread." - Victor Hugo