Wednesday, December 22, 2010

Cute Social Media Buttons for Blogger

Here's a super easy and quick way to get the cute little social media buttons that you see on my right sidebar:)

**IMPORTANT - WHEN COPYING AND PASTING THE CODES PROVIDED BELOW YOU MUST CHANGE ALL THE ( to < AND CHANGE ) to >

This had to be done to show the html code in this post.

Step 1 - Get Your Buttons
If you don't like mine, you can get different ones by simply googling "free social media buttons" but if you do like mine you can skip to Step 6 and just use my html code below.

Step 2 - Save your new buttons
After you find the buttons you like, you need to save them to your computer. Right click and choose "save image as..." and save it where you'd like.

Step 3 - Host Your Buttons
Now you’ll have to host them somewhere like Photobucket or Flickr, which means you just have to have an account at one of those two sites and upload the buttons from your computer into your photostream there.

Step 4 - Get the URL for each button
For Flickr, click "Actions" then "View All Sizes" Now right click and choose "copy image url"
For Photobucket, just copy the "direct link"

Step 5 - Add To Your Sidebar
If you have a self hosted Wordpress blog go to the design/widget area and add a “text” widget to the sidebar you want your buttons to show up in. If you have a blogger blog go into the design area, and “add a gadget”. Add an “html/javascript” gadget.

Almost done....

Step 6 Add the Button Code
Copy and paste the code below directly into the form (gadget)

(a href=”the url you want people to go to” target=”_blank”)(img src=”the url where the image is hosted” border=”0″ alt=””)(/a)

**Remember to change your ( to < and your ) to >

The first information that goes in will be the address you want people to go to ~ so if it is a facebook button you will add your facebook page address there (mine was http://facebook.com/simplyanniekate)

If it’s an RSS button you will add the link to your RSS feed there.
If it's a Twitter button, you'll add your Twitter URL, etc.

The second piece of information is the address where you have the image hosted, Photobucket, Flickr, or other similar hosting site (this is what we copied earlier in Step 4)

***If you like all the buttons in my sidebar simply use this code instead and you don't have to fuss with hosting your own buttons:


(a href="http://facebook.com/simplyanniekate" target="_blank")(img src="http://i1092.photobucket.com/albums/i417/simplyanniekate/facebook-64x64.png" border="0" alt="" /)(/a)
(a href="http://twitter.com/simplyanniekate" target=”_blank”)(img src="http://i1092.photobucket.com/albums/i417/simplyanniekate/twitter-64x64.png?t=1293035995" border="0" alt="" /)(/a)
(a href="http://feeds.feedburner.com/blogspot/dwtsu"_blank")(img src="http://i1092.photobucket.com/albums/i417/simplyanniekate/rss-64x64.png?t=1293035995" border="0" alt="" /)(/a)
(a href="http://youtube.com/simplyanniekate" target=”_blank”)(img src="http://i1092.photobucket.com/albums/i417/simplyanniekate/youtube-64x64.png?t=1293035995" border="0" alt="" /)(/a)

The only thing you'll need to change is the first URL after the (a href= in each code. This has my site information and will need to be changed to yours. The image URLs can be left alone since you'll be using mine.

TROUBLESHOOTING - For some reason when I initially did this, my images wouldn't come up. I had to go back and wherever there were " marks in the code, I deleted them and re-typed them. For some reason they were slanted at first and needed to be straight up and down. Weird, I know, but it worked:)

Make sure you have enough room in your sidebar, otherwise your images may be vertical. If mine are too big, simply grab your own smaller ones and go back to Step 3

Be sure to change all of your ( to < and your ) > after you paste your html code

GOOD LUCK! If you still have trouble please feel free to click the CONTACT ME tab above!

If you love this tutorial, feel free to spread Simply Annie Kate around:) Thank you, thank you!!

10 comments:

~Kimberly said...

God Bless You!!!!! I've been searching all over for a tutorial for this! Thank you! Merry Christmas!!!!!

Katie said...

You are so welcome!! Merry Christmas to you too!

~Kimberly said...

I got it all figured out for my blog! I posted a quick little link to your tutorial post, facebook and etsy shop. If you would like me to remove any of it, please let me know, but I hope you don't mind me sharing your links with my readers!!! http://www.cupcakecuppy.blogspot.com

Katie said...

Looks awesome, Kimberly! Thank you!

kletsshop said...

You are amazing!! This has been so helpful!!

Ginger said...

Cute blog! Thanks for the help. I'm a new follower.

Ginger
gingersnapcrafts.blogspot.com

{I've a got a great 100 follower giveaway going on! Check it out!}

{swank}mama said...

I'm trying to add just the Facebook and Twitter buttons but for some reason the Facebook button shows up but the Twitter button doesn't and the HTML code keeps getting erased after I save it in the gadget!!

Please email me at swankmama at live dot ca. Thanks!

{swank}mama said...

Never mind! I just changed the " where they appeared slanted and voila, it worked! Thanks so much, Katie, for providing this free tutorial :)

CityGirl said...

YAY!!!! Thank you so much Annie! Have been stumbling around for ages! Thank you thank you thank you!! xxx

website design said...

Hello to every body, it’s my first visit of this webpage; this weblog carries amazing and actually good information in favor of visitors.
website design

Related Posts Plugin for WordPress, Blogger...