I finally did it.
I finally added social media buttons
or icons to my blog.
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:
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,
onto your desktop. Or, right-click
and save to a folder.
Then I uploaded the buttons on my
About This Blog page,
About This Blog page,
just as you would for any photo
or image in any other post.
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.
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}
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:
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:
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:
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:
If you use photobucket or a different platform,
Here's a tutorial to help you with that:
If you use photobucket or a different platform,
Thank you Karen for the inspiration!
56 comments:
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.
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.
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
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!
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
Thanks for the great info. I'm definitely doing this.
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!
I love the whimsical and colorful buttons! How fun! I'll be pinning this for reference later. Thanks so much!
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!
Aside from being practical, the buttons are such a cute decorative touch, too!
Thanks for posting this. I have pinned it and it is on my list of things to do.
Have a Nice Day,
Suzanne
Thanks for posting this on the Rustic Pig! It is a great tutorial on how to jazz up the SM buttons!
Thanks, Christina! Great post and it doesn't seem too very hard. I may give it a try!
Thank you so much for sharing this, I'm off to do it right now!!
Thanks for sharing this! It's been on my 'to do' list for a little while now.
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
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.
You are AWESOME! I have been trying to figure out how to get those pretty icons!
Thanks!!!
I've pinned this! I am going to give it a try. :)
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. :)
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!
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!
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
Super helpful! Thanks girl! Please come link it up at our new Pinterest party: http://mummydeals.org/pinteresting/
I'm going to have to put this in to favorites and come back and give it a try!
Great tute :) Pinning it!
THANK you for posting this!! I found you at Craft, Create, and Inspire.
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
Thanks...I also pinned this and will give it a try
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!
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
Great info the new buttons are adorable! Thanks so much for sharing on Super Sweet Saturday.
Steph
swtboutique.com
Awesome! Thank you for sharing at our Pinteresting Party!
Thank you! I will be doing this shortly as my icons are very blah! Saw you on Sew Many Ways
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?
You just read my mind. I have been wanting to do this! Thanks for the tutorial!
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!
Crystal, you can link the email button to your profile page. Your profile page then has a direct link to your email. <3 Christina
Thanks for this great information. I was able to make my buttons and it was easy!
Me encanta tu post y los botones tan bonitos. He descargado algunos colores para cambiarlos a mi blog.
Mil gracias por compartirlo.
Abrazos
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
I've been trying to figure this out forever! Pinning now.
Angela
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/
Thank you for this! I will keep this in mind for future reference!
Thank you for this. I will definitely use this info. I just found you through Savvy Southern Style. I'm your latest follower!
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!
I meant to say....that I'm NOT social media savvy.
Love this can't wait to sit and read through it.
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
Thanks for the info! I'm pinning it for when I need it. :)
Thanks for this tutorial. I have been wanting to do this FOREVER!!
Thanks for the tutorial. I need it! Found you thoruh Skip to my Lou http://georgielee.blogspot.com
I did it! Thanks so much - it took me a while then I got the hang of it and really it was super easy!
Hi, Im currently in the middle of creating on my blog my own social media icons but how I suppose to link 'Mail' icon?
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
thank you very much. it's a great post.
Post a Comment