Thursday, July 28, 2011

Social Media Icons

I swear I will have some kind of house related goodness for you next week...it's just really hard when we are NEVER home!

In the mean time, you may have notice the addition of social media icons at the top of the ol’ sidebar that look like this…



It took me way longer to install them than it should have.  Mainly because I have zero skills when it comes to html code.  Luckily, the husband does.  He thinks it’s funny that I can write a blog but have no clue about html.  Thank you, Blogger!

Today I am going to share with you how to add social icons to your site.  It’s easy.  If you have all of the information in one post instead of piecing it together from 100 posts.  This is for my reference as much as it is yours. 

If you already know how to do this or just don’t care…enjoy a nice photo of Ike eyeing Nate’s Big Mac…because it makes me laugh…



Back to social media icons…for dummies…

Step #1: Search and download icons that you like…

I used Icon Dock.  Other options include HandyCons or Web Designer Ledger.  I guess you can also design them…but this tutorial is for dummies..like me.  You can also Google them individually….like I did for my Pinterest icon.

Step #2: Upload your files to Photobucket…

Photobucket is critical because it gives your image a home on the web that is important in the coding.

Untitledfinal

Step #3: Add a html gadget…
If you are using Blogger (if not, I can not help you…dummies, remember)…click the Design tab, click Add a Gadget, then add a HTML/Javascript gadget.

Step #4: Copy the code below, paste in the html gadget box, edit for your site…

<a href=”Add your social media direct link here”><img src="Add you Photobucket direct link here"/></a>

My facebook code looks like this…

<a href="http://www.facebook.com/decorandthedog%22><img src="http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>

Step #4: Repeat for each additional social media site…

Just keep repeating this code for each social media site.  Easy.  The code for my first two buttons looks like this…

<a href="http://www.facebook.com/decorandthedog%22><img src="http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>
<a href="http://twitter.com/#!/decorandthedog"><img src="http://i1225.photobucket.com/albums/ee382/decorandthedog/twitter.png%22/></a>

Step #5: Check out your awesome new buttons on your blog and pat yourself on the back for being so awesome…

Maybe eat some ice cream too…or a Big Mac.  Well, maybe you don’t get ice cream….because I made it easy for you….just frozen yogurt or a grilled chicken sandwich for you.

Any questions?  Are you interested in more “Dummies are Blogging” tutorials (avoiding copy right issues)? Now I want chicken nuggets....

18 comments:

  1. Hmmmm I wonder if this would work on wordpress? I love the techie tutorials! Keep em comin!

    ReplyDelete
  2. Following you on Pinterest now! ...as if I needed MORE reason to spend hours there...

    ReplyDelete
  3. Installing everything on a blog always takes me way longer than it should. And yes, it will work in wordpress. What I do is use the pictures from the original website (Icon Dock in your case). Instead of linking to photobucket, I link to the image URL. It makes the first two steps redundant (but there is a risk that if Icon Dock decides to change their photos around, you will get less than perfect look on your website).

    ReplyDelete
  4. Thank you for the tutorial....I love a blogger who shares her knowledge. Now I am going to have to read your instructions like 10 times to get it!!! I am going to follow on Pinterest too!!! :)

    ReplyDelete
  5. Nice! And totally completely 100% understand how hard it is to blog about a house when you're never AT THE HOUSE. Yeah. This is when it would be nice to be a blogger about something that doesn't require work to create something to blog about. Ha!

    ReplyDelete
  6. Cool! I guess I'd have to figure out twitter in order to do this ;) True life confession: I'm a twitter virgin!

    ReplyDelete
  7. Thanks for the tutorial. Now I suppose I'll need actual facebook, twitter, etc accounts to link them up to???Maybe I'll claim ignorance for just a little while longer :)

    ReplyDelete
  8. totally understand not having time to do house projects! We have been home, but between both of us being crazy at work and lots of visitors, anniversaries, and birthdays, its been a bit crazy!

    ReplyDelete
  9. I've been on a blogging hiatus but I came back at EXACTLY the right time. Thanks for sharing all this precious info. I am sooooo interested in more blogging for dummies.

    ReplyDelete
  10. Thankyou for the tips and great post it has rescued me from lameness

    ReplyDelete
  11. I all the time used to study paragraph in news papers but now as I am a user
    of web therefore from now I am using net for articles, thanks to web.
    Here is my web blog : web design miami beach

    ReplyDelete
  12. Hello there! I know this is somewhat off topic but
    I was wondering which blog platform are you using
    for this website? I'm getting fed up of Wordpress because I've had issues with hackers and I'm looking at alternatives for another platform. I would be fantastic if you could point me in the direction of a good platform.
    Here is my page coffee bean extract

    ReplyDelete
  13. Hi would you mind letting me know which webhost you're using? I've loaded your
    blog in 3 different internet browsers and I must say this blog
    loads a lot faster then most. Can you suggest a good hosting provider at a
    honest price? Cheers, I appreciate it!
    Feel free to surf my blog - Credit Repair Reviews

    ReplyDelete
  14. I know you wrote this a long time ago, but I just stumbled upon it today! I am a "dummy" blogger too, and needed some plain, black and white directions on creating icons on my page. Your directions are the only ones that worked, so, THANK YOU!!

    -Sarah
    {limitedspaceorganizing.blogspot.com}

    PS: Quick question, when would you suggest a "baby blogger" should create a Facebook and Twitter page for their blogs?

    ReplyDelete
  15. I've been looking for a tutorial for this! I just started my blog the other day and there is so much to learn!!

    ReplyDelete
  16. Thank you for this!! I'm such an html dummy - I need someone to hold my hand.

    ReplyDelete
  17. There's certainly a lot to know about this topic. I like all of the points you made.

    Take a look at my page - vexxhost ratings

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

My blog has moved

You will be automatically redirected to the new address.

If that does not occur, please visit http://www.decorandthedog.net'.