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.


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!!


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.


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,

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:

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!

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.

Clair Boone @ said...

Super helpful! Thanks girl! Please come link it up at our new Pinterest party:

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

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! 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.

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 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.

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.
Debi and Charly @ Adorned From Above

Angela Santaniello said...

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


M.J. Powell said...

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.

The Busy Bee's,
Myrna and Joye.

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….

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

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!

gokul said...

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

Miss Kim said...

I love these 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

Progaming said...

Great Post....!
Bigo live connector

Service Center LG said...

Servis HPKursus HP iPhoneAppleLes Privatewww.lampungservice.comVivo
Kursus Service HP Bandar LampungKursus Service HP Bandar LampungServis HP

Service Center Vivo said...

Imei Null Invalid
Cara Menghidupkan HP Mati Total Baterai Tanam
Service iPhone
Service HP
Service HP

carol sobers said...

This is Very Helpful!
Thank You for Sharing


Arya said...

Nice articlr. SEo has integral roll in digital marketing sector. We can go for learn digital marketing course in kochi and explore the latest trends and technic here.
#digitalmarketing #arevadigital

Greenglobe said...

Good and useful information. SEO section is one of the main content in digital amrketing. Let us check with SEO Training in Kochi, get advanced coaching clasess.

Social Media Talk said...

Embed Instagram Feed on website and display social proof to your users.

Video Chat Apks said...

This is a very interesting article to read.

Download the application:
Watch Live Video Broadcasting
Sign up for Bigo Live
Video Chat

Social Media Talk said...

Nice Blog.
Embed Instagram Feed on website to engage more user

Alice Herman said...

The Rise of Visual Commerce Platforms: How They’re Helping Businesses Grow

Naveen said...

Thanks for posting this wonderful article please keep up the good work
Heat Exchanger

Naveen said...

Very Good post thanks for sharing this keep sharing. Discounted Shoes

laxmi said...


pvagmail said...

I really appreciate your professional approach.A debt of gratitude is in order for sharing.
Buy old Google voice numbers

Bulkaccount said...

These are pieces of very useful information that will be of great use for me in future.
Buy google voice accounts

Hacker-Inside said...

Nice Article, Keep it up!
Get Daily Latest Technology News, Guides, Free Registered Softwares & Tips and Tricks => How to Earn Money on TikTok

gameking said...

Hi, I just gone through this blog, the information was really very valuable, would love to see more from you. i have also plenty of the same kind of content You can explore my blog by clicking the link below
delhi school of digital marketing
best institute for digital marketing course in delhi
digital marketing course in south delhi
internet marketing institute in delhi
top digital marketing institutes in delhi