Idiots Guide to Adding Social Media Buttons to Blogger

After searching the world over it is apparent to me that I was wrong about my technological status. Here I thought I was pluggin away in the blogging world. Sure, a hiccup here or there, but for the most part I was rockin it.

Then I attempted to add social buttons to my blog. You know, those clickable tabs so that I could remove all that junk on my right sidebar.

Photobucket

[Insert long siiiiiiggggghhhhhhhhh here.]

I just wanted it to look like this. Seems easy enough. Right?

Photobucket


I would have screamed or pulled my hair out but I didn't have it in me at 2 AM after several straight hours of staring at the computer monitor. I was toast. My brain was fried.

Why oh why won't they just work?

No, turns out I don't exactly fit into the "dummies" category by the world's standards. Trust me. Those tutorials went right over my head. So, by process of elimination there is only one category left- the category of idiots. Please. Just tell me I'm not alone in my technological retardation. Come on, just humor me a little.

So, after many, many painful, arduous hours slumped over my keyboard I have decided to share the little bit I know in an attempt to prevent you from an unnecessary computer induced cataract coma. You can thank me later.

Step 1. DOWNLOAD A PICTURE OF YOUR ICONS.
If you don't need anything fancy this is a great starting place. But there are literally hundreds of sites out there with endless amounts of images. If you get them from different sites, you may need to resize them to get them to all be the same size. I made mine 64x64 pixels in photoshop. (But the great thing about doing them this way vs blogger's generic widget is that you can customize them to any size or design of your liking.) Once you have them the size you like, save changes and then upload them to a third party hosting site, such as photobucket or flickr.

And if that seems like a pain, I have already saved several to my photobucket page and you are welcome to snag them to remove some of the leg work.


Photobucket PhotobucketPhotobucket Photobucket Photobucket PhotobucketPhotobucketPhotobucket

Just click on button you would like. It will take you to photobucket. Move cursor over icon or click on it. Then select share. Click get link code. Then copy the full size HTML code for websites and blogs. (Save this or bookmark for later.)

Step 2. ADD A GADGET
Sign in your blog and then go to design. From there click on add gadget.

Photobucket

Select the HTML/JavaScript choice.

Step 3. INSERT CODE TO HTML/JAVASCRIPT
This is the important part.

Here is the code that you will use for each and every button.

Photobucket


You will need to replace YOUR FEED URL with your actual feed url. Also replace YOUR PICTURE URL with the one that you have in your third party hosting site.

Here is an example from my HTML/JavaScript menu for the first three buttons on my right sidebar. The light blue is my feed url. The darker blue is the photo url from photobucket.

Photobucket

I found that if I didn't include any positions in the coding the buttons automatically positioned themselves just fine, at least this seems to be the case with my template.

Save your work. And like magic- POOF! It only took me 2 days to figure this out.

Now let's shift gears.

Clickable social buttons at the bottom of your posts.
I found a really easy way to do this for blogger.

Photobucket

Go to Add This. You will find this page. Make sure to click on more options on the bottom.

Photobucket

Select blogger and then the style of preference. The bottom is cut off, but you have to select whether or not you want analytics and then press GET THE CODE.

Photobucket

On the next page you will need to make sure that "install in every blog post" is selected. Then copy the code.

Photobucket

Below the code will be instructions for where to plug it into your blog. They are very precise, detailed instructions with visuals.

Photobucket

Photobucket

Follow their instructions word for word. It is a fabulous tutorial. You literally just copy and paste the code right into your edit HTML page exactly where they instruct you to (beneath the div class="post-footer" tag).

And voila. You are now movin up in the blogger world. Social media buttons. Check.

Now if someone could please tell me why they load so incredibly slow I would be most appreciative.