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. 

{love her blog}

Along the way I figured out some shortcuts 

to share with you today.

And I'm also sharing
my FREE irresistible 
social media icon buttons!

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

Come Link Up!!