How to Add Social Media Buttons ~Blog Tips 101


I finally did it.  
I finally added social media buttons
or icons to my blog.


What took me so long? 

I guess I had assumed it was too 
difficult and time consuming to figure out.


But Karen over at 

posted a tutorial that inspired me. 


Along the way I figured out some shortcuts 
to share with you today.




And… in season you can grab these cute
pumpkin shaped social media buttons!


Karen's tutorial involves using photobucket and Word.  

I bypassed that and used my blog.
You can, too!  
Grab a cup of coffee and let's get to it.

Here's how to add social media buttons:



Download the icons you like and use. 
I chose a variety of colors for a whimsical, 
confetti-like feel: 

   
   


Once downloaded, 
just drag the icon you want over 
onto your desktop. Or, right-click 
and save to a folder.



Then I uploaded the buttons on my 
About This Blog page, 
just as you would for any photo 
or image in any other post.
  
I linked the images to the appropriate webpages, 
as you would for any other post.

Publish your updated "About" page and 
keep the published page open.



Now we'll create a Social Media Button gadget
for your sidebar.

Go into Blogger layout and add a Gadget.
{In Wordpress, use the Widgets function.}

You're going to choose the HTML Gadget in Blogger:
{In Wordpress, use the 'text' widget}


Put a title on your Gadget and fill it with the pair of tags shown below.  You need one tag pair for each social media button.
Basically the first tag (a href) creates your link,
and the second tag (img src) in the pair holds your image.

Keep this HTML Gadget open and proceed to the next step.




Both your HTML Gadget and your published "About" page are open on your computer desktop.

On your "About" page, right-click on a Social Media icon and copy the image address, like this:



Now, paste that image address into your Gadget
 on the (img src) line right between the "quote marks" as shown:



Repeat this for each button.
You have now added the image coding
to your Gadget or Widget.

Now it's time to add the actual link
to your social media pages:



Add the webpage links for each button
on the (a href=) line right between the quotation marks.

Just click the buttons on your "About" page
to open each social media site,
copy the address and paste it into your gadget!

Your email button requires different coding.
~Click Here~ for that tutorial.







Now you have a place where all the coding exists
for each one of your social media buttons.

You can easily copy and paste it on any page 
or post from now on.
For example, all the buttons above are working ~
 click to test!


What do you think? Fun, right?!




Need to resize your buttons?
Here's a tutorial to help you with that:



Need a range of icons or buttons?



If you use photobucket or a different platform, 
you might want to check out the tutorial at
Sew Many Ways
Thank you Karen for the inspiration!




By the way, here are the Top 3 Must-Do-Tips
for unlocking your blog's potential.



and...

check out some of the other items you can
get for the price of a latte
at my Etsy store!










Thank you for the rave reviews on this tutorial!!
How to Add Social Media Buttons to your Site ~ the step-by-step super helpful tutorial getting rave reviews at I Gotta Create!






Come Link Up!!



60 comments:

Jessica White said...

Thank you Christina! I made social media buttons before, but I wasn't too pleased with them. I'm revamping them with this tutorial and Carrie's buttons.

Kim of Mo Betta said...

Cute buttons! I've made one set, but I need to update and add more...and I definitely need step by step instructions to do it! Visiting from Making the World Cuter.

Bliss said...

Lively and vibrant, just like the blog. Good picks. Now I have to go click them to see if I hunted you down prior by the old fashioned method.

Bliss

Brooke said...

Thanks for the great tutorial. I've only been blogging for 2 months, and this is exactly what I needed. Thanks for sharing your expertise! Have a great day!

Lisa@hooplapalooza said...

oh i am SO clipping this (i use clipix more than pinterest) now as soon as i can get it together on FB, twitter, etc, i can actually add these to my site-LOL

Bonnie Brewer said...

Thanks for the great info. I'm definitely doing this.

Michelle Hargreaves said...

Do you know if it works similarly for wordpress? I've been trying to figure out how to do this for two weeks now, this is awesome, thank you!

Anonymous said...

I love the whimsical and colorful buttons! How fun! I'll be pinning this for reference later. Thanks so much!

Anonymous said...

Thank you so much for posting! I saw this linked up at Skip to My Lou, and it caught my eye because I've just been wondering this! Pinned it for later!

Bellenza Wedding Bistro said...

Aside from being practical, the buttons are such a cute decorative touch, too!

Pieced Pastimes said...

Thanks for posting this. I have pinned it and it is on my list of things to do.
Have a Nice Day,
Suzanne

Millie Snyder said...

Thanks for posting this on the Rustic Pig! It is a great tutorial on how to jazz up the SM buttons!

b said...

Thanks, Christina! Great post and it doesn't seem too very hard. I may give it a try!

Tamsyn said...

Thank you so much for sharing this, I'm off to do it right now!!

Design_Fluff said...

Thanks for sharing this! It's been on my 'to do' list for a little while now.

Alisha @ Crafty Brooklyn Army Wife said...

Wow!! Thank you so much for sharing this tutorial!! I just did my buttons recently and ran into a little trouble. This is on my "to do" list. Stopping by from Get Your Craft On linky party and your newest follower.

Here is what I shared this week: http://craftybrooklynarmywife.blogspot.ca/2013/01/fun-fur-boa-scarf.html

Anonymous said...

Great Tutorial! I have been meaning to do the same for wordpress users. I also grabbed Carrie's buttons. She covers all the social sites that I use, which was kind of hard to find in one package. She also had the perfect color for my blog. Thanks for sharing with us. Dropping in from the Live Laugh {Linky} party.

JeniV said...

You are AWESOME! I have been trying to figure out how to get those pretty icons!
Thanks!!!

Amanda Brooke said...

I've pinned this! I am going to give it a try. :)

Michelle Hargreaves said...

Just wanted to check back and tell you that this DOES work for wordpress users! You use the widgets function and use the "text" widget. :)

Christina at I Gotta Create! said...

Thank you so much for letting me know it works in Wordpress, Michelle! I added your comments to the tutorial. <3 <3

Christina @ I Gotta Create!

Sarah Cardell said...

Thank you so much for teaching me how to do this! I'm pinning it so I have the reference and to spread the word. This is so very helpful!

Chad & Cassidy said...

Thank you! Thank you! I've been wanting to do this for a while but didn't know how. Found you over at Bacon Time.
cass-eats.blogspot.com

Clair Boone @ www.mummydeals.org said...

Super helpful! Thanks girl! Please come link it up at our new Pinterest party: http://mummydeals.org/pinteresting/

Marsha Cooper said...

I'm going to have to put this in to favorites and come back and give it a try!

The Thriftiness Miss said...

Great tute :) Pinning it!

KT said...

THANK you for posting this!! I found you at Craft, Create, and Inspire.

Linda Bouffard said...

thanks for this. I pinned for future use... I need it right now. duh. Anyway, I'd love to have you link this to my party for my followers and friends. Thanks, Linda

http://twosucculentsisters.blogspot.com/2013/01/hi-everyone-welcome-to-what-to-do.html

Patti @ Pandoras Box said...

Thanks...I also pinned this and will give it a try

Lauren said...

Great for bloggers! I'd love it if you would come share at the Funday Sunday link party that is open over at www.the-crafty-cowgirl.com! Hope to see you there!

Beth Baumgartner said...

This is such a awesome tutorial! I just added them to my blog, so easy and I thought it would be difficult!
Thank you!

Beth @ The First Year Blog

Stephanie Michaels said...

Great info the new buttons are adorable! Thanks so much for sharing on Super Sweet Saturday.
Steph
swtboutique.com

Tutus & Tea Parties said...

Awesome! Thank you for sharing at our Pinteresting Party!

Crystal said...

Thank you! I will be doing this shortly as my icons are very blah! Saw you on Sew Many Ways

Crystal said...

I put these buttons on my blog but I can't seem to link the email link(yahoo) to the email button. Any idea how?

Patty said...

You just read my mind. I have been wanting to do this! Thanks for the tutorial!

Melissa@TheHappierHomemaker said...

This is a great tutorial Christina! I have a new blogging site-SoYouWannaBeaBlogger.com and would love to feature it or any other blogging articles you have written with your permission!

Christina at I Gotta Create! said...

Crystal, you can link the email button to your profile page. Your profile page then has a direct link to your email. <3 Christina

The Pin Junkie said...

Thanks for this great information. I was able to make my buttons and it was easy!

HJ Labores said...

Me encanta tu post y los botones tan bonitos. He descargado algunos colores para cambiarlos a mi blog.
Mil gracias por compartirlo.
Abrazos

Debi @ Adorned From Above said...

this is a great tutorial. I have a link party called Wednesdays Adorned From Above Blog Hop and would love to have you share this and any other posts with everyone. It runs from Tuesday night through midnight Sunday. Here is the link to the party.
http://www.adornedfromabove.com/2013/01/wednesdays-adorned-from-above-blog-hop_22.html
Debi and Charly @ Adorned From Above

Angela Santaniello said...

I've been trying to figure this out forever! Pinning now.

Angela

M.J. Powell said...

Hi,
You have some great information and we would like for you to share with our readers too. We are hosting our first link party tomorrow and we would like to invite you to link up with us. We have a fun blog to co-host with us. Hope to see you there.

Thanks!
The Busy Bee's,
Myrna and Joye.

http://thebusybhive.blogspot.com/

Vanessa said...

Thank you for this! I will keep this in mind for future reference!

Peggy Meckling said...

Thank you for this. I will definitely use this info. I just found you through Savvy Southern Style. I'm your latest follower!

Sandy said...

What a fantastic tutorial, unfortunately, I'm on Typepad and I don't think I could do this with my blog drat! I'm adding you to my blogging bliss link so I can easily find you and return again and again! I'm a new follower too.

You had me at your about page. Sometimes it gets discouraging when I see blogs that just got started grow exponentially. We all want to grow but I'm really not in it for the numbers, I blog and share because I have to create but it would be nice to get a little blog lovin :) Maybe I'm behind because I'm social media savy and just finally added a Facebook like button. Now I'll stop talking and take a look around your blog for some creative inspiration!

Sandy said...

I meant to say....that I'm NOT social media savvy.

Kayla Retich said...

Love this can't wait to sit and read through it.

Jennifer Hughes said...

Thanks for this! I've been wondering how to do this!

Please also think about adding my linky parties to your lists…. www.creativecraftsthursday.blogspot.com

Eva {Tales of the Scotts} said...

Thanks for the info! I'm pinning it for when I need it. :)

Kathryn Ferrie said...

Thanks for this tutorial. I have been wanting to do this FOREVER!!

Georgie Lee said...

Thanks for the tutorial. I need it! Found you thoruh Skip to my Lou http://georgielee.blogspot.com

Anonymous said...

I did it! Thanks so much - it took me a while then I got the hang of it and really it was super easy!

ABily said...

Hi, Im currently in the middle of creating on my blog my own social media icons but how I suppose to link 'Mail' icon?

happyvballgirl said...

OMG, this is AWESOME! Thanks so much for this! I threw some buttons together a few months back w/ the intention of revisiting them and making them prettier. Can't wait to use your tutorial! Thanks so much!
Christine
www.myepicureanadventures.com

gokul said...

thank you very much. it's a great post.

Miss Kim said...

I love these buttons..so many pretty colors! I am sure you did a great job for breaking the steps down, making it easier..but I am still struggling! HELP!! Lol..i am a total newbie btw (been blogging for a little over a month now).
I am having some trouble. On step 2, when you state that you “linked the images to the appropriate webpages, as you would for any other posts,” I am not following. And on step 4, when I right click on the images, I am not getting an option for “copy image address”.

Christina at I Gotta Create! said...

Thank you Miss Kim! On Step 2, let's say you want to link up your facebook page. Open your facebook page and copy the web address. Now, in Blogger where you are composing your post, click on the pretty little social media icon you just uploaded to highlight it, and then click on the "link" tool . It opens a window for you to paste your Facebook web address so that the pretty little icon becomes a hot link to your facebook page.
On Step 4, I'm not sure what kind of mouse you have. Maybe you have to push both sides at once to get the full menu of options shown in my post? Good luck! I hope this helps. <3

Scarlett said...

thank you SO much! I've been wanting to do this for FOREVER and you finally showed me how. Merci!

Sonal Jain said...

All of your posts are well written. Thank you.stock tips