Primp My Blog: How to Add Social Media Buttons to Your Sidebar

by Kira @ Her New Leaf on January 31, 2012

Now that your blog is getting beautiful, you’re going to want to share it! Adding buttons to your blog requires a tiny bit of know-how, but it can make a big impact for your readers.

I’d also like to take a moment to share that you can now follow Her New Leaf on Facebook! I plan to use the page to communicate with my readers, find out what you want to read more about, and even provide some exclusive content for Facebook followers only!

The buttons that I use in my own sidebar are courtesy of Isa Maria of The Academy. I had been searching high and low for a cute set of icons that included a button to link to my Pinterest, and when I discovered Isa Maria’s adorable icons based on the Pantone Color of the Year, I knew they were perfect and couldn’t wait to share. Please click over to her blog and subscribe to her newsletter, they are full of wonderful tips and advice for your blog or business!

I wanted to share this fantastic resource with you all, so I decided to put it together with a teeny, tiny html primer. Don’t be scared! Way, way back when I was a wee geek of twelve, I taught myself enough html to create my own pages on Angelfire and Geocities. Remember those? So if I could do it then, you can do it now!

Rather than just giving you code to copy and paste, I figured I’d break it down a bit and teach you so that you can add a bit of html to your blog design repertoire. But if you just want to copy and paste and get it over with, I promise not to hold it against you. ; ) You can scroll to the bottom of this post to find out how.

Edit: Several of you have reported having trouble locating the URL for the buttons – that’s because you need to create it yourself by uploading the images to your own image hosting service. WordPress users can use the built-in Media Library, Blogger users can use an external service such as Photobucket. This is where you’ll find the image URL.

From your WordPress dashboard, go to Appearance > Widgets, and click and drag the “Text” Widget from the box on the left to your sidebar box on the right. It will open up a blank box.

From your Blogger dashboard, go to Design, then click “Add a Gadget.” Select “HTML/Javascript” from the menu. It will open up a blank box.

First, we’re going to learn how to create a link. You can use this basic html tag in your blog posts, email, anywhere you can use html.

<a href="URL of link">Text to Link</a>

Your link will look something like this:

My Facebook!

You can also edit this tag slightly so that your link will open in a new tab or window. This is helpful since you don’t want your readers to leave your blog to look at your pages.

<a href="URL of link" target="_blank">Text to Link</a>

But we want to show our cute buttons, so you’ll need this tag to place an image:

<img src="URL of image">

Finally, we combine the two tags to add a link to the image:

<a href="URL of link" target="_blank"><img src="URL of image"></a>

This is the same code, with my links as examples:

<a href="http://www.facebook.com/pages/hernewleaf/"target="_blank">
<img src="http://hernewleaf.com/files/facebook.png"></a>

Continue adding links and images until you have added all of the buttons you want! Make sure you test all your links because one incorrect character is all you need to send your readers to the wrong place!

Enjoying the Primp My Blog series so far? Consider adding my button to your blog!

{ 273 comments… read them below or add one }

Tanya March 14, 2014 at 1:42 pm

Does your website have a contact page? I’m having a tough time locating it but,
I’d like to send you an email. I’ve got some creative ideas for
your blog you might be interested in hearing. Either way, great site and I look forward to seeing it improve over time.
Tanya recently posted..TanyaMy Profile

Reply

Fiona Adam March 19, 2014 at 5:16 am

Great tutorial, thanks! Works like a dream.

Reply

Sarah April 3, 2014 at 4:13 pm

Hello, I know this is an older post and I hope everything works the same. I am trying to add the icons, however, the image shows but is not clickable!? What am I doing wrong? I’ve compared yours and mine and they seem the same… but maybe I’m over looking something!! HELP!! And TIA!!

Reply

Felicia April 16, 2014 at 5:30 pm

This tutorial helped a bunch, thanks so much! :)

Reply

Elana April 24, 2014 at 6:06 am

Thank you so much for this very informative tutorial!! Very useful for beginners like me haha :)

Reply

Coarse Fishing May 3, 2014 at 6:05 pm

Hi there, I would like to subscribe for this blog to obtain hottest updates, thus where can i do it please assist.
Coarse Fishing recently posted..Coarse FishingMy Profile

Reply

click here May 9, 2014 at 5:58 am

Why users still make use of to read news
papers when in this technological world all is accessible on web?
click here recently posted..click hereMy Profile

Reply

free facebook page likes May 21, 2014 at 4:24 pm

What’s up, I desire to subscribe for this weblog to obtain latest updates, therefore where
can i do it please help.
free facebook page likes recently posted..free facebook page likesMy Profile

Reply

how to get facebook verified June 12, 2014 at 11:18 am

It’s in fact very complex in this active life to listen news on TV, therefore I only use web for
that purpose, and take the most up-to-date news.
how to get facebook verified recently posted..how to get facebook verifiedMy Profile

Reply

get riot points June 27, 2014 at 10:37 am

Summoners that disconnect while CCed will now properly run back to base.
With the increased Health and Cooldown Reduction you will be able to spam all
of these abilities with the use of Mantra as well. Victoria, who left some of her costume’s crafting to her boyfriend, wasn’t pleased with the overall design start.
get riot points recently posted..get riot pointsMy Profile

Reply

Amba Jacobs July 5, 2014 at 10:32 pm

Thanks for these very helpful and easy to follow first tentative steps into the behind-the-scenes world of HTML. I really appreciate that you broke it down for us and made us understand what we were doing, you are awesome :)
Amba Jacobs recently posted..Hello & Welcome!My Profile

Reply

transformers age of extinction apk hack July 7, 2014 at 7:37 pm

Hi there Dear, are you in fact visiting this site daily, if so
then you will without doubt get pleasant
experience.
transformers age of extinction apk hack recently posted..transformers age of extinction apk hackMy Profile

Reply

Lukas July 8, 2014 at 1:24 am

Great article! We are linking to this particularly great article on our site.
Keep up the great writing.
Lukas recently posted..LukasMy Profile

Reply

code generator psn July 8, 2014 at 4:03 am

Hi there, just became aware of your blog through Google, and found that it
is truly informative. I am gonna watch out for brussels. I
will appreciate if you continue this in future. Numerous people will be benefited from your writing.
Cheers!
code generator psn recently posted..code generator psnMy Profile

Reply

psn guthaben aufladen July 10, 2014 at 8:28 am

I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do
it for you? Plz reply as I’m looking to construct
my own blog and would like to know where u got this from.

appreciate it
psn guthaben aufladen recently posted..psn guthaben aufladenMy Profile

Reply

how to get followers on instagram without following 2014 July 11, 2014 at 8:56 am

I read this post fully concerning the resemblance of hottest and earlier
technologies, it’s awesome article.
how to get followers on instagram without following 2014 recently posted..how to get followers on instagram without following 2014My Profile

Reply

grosir tas bandung July 30, 2014 at 4:37 am

I know this if off topic but I’m looking into starting my own weblog and was wondering what all is
needed to get setup? I’m assuming having a blog like yours
would cost a pretty penny? I’m not very web savvy so I’m not 100% certain. Any suggestions or suggestions
would be greatly appreciated. Many thanks
grosir tas bandung recently posted..grosir tas bandungMy Profile

Reply

Angela August 15, 2014 at 3:40 pm

unfortunately it doesn’t work on my macbook air this app :( but great tutorial and great blog.
Angela-xoxo

Reply

jual baju batik modern August 17, 2014 at 7:11 pm

Hi there mates, its fantastic paragraph concerning educationand
fully explained, keep it up all the time.
jual baju batik modern recently posted..jual baju batik modernMy Profile

Reply

Rebecca August 19, 2014 at 11:58 am

So Totally Fantastic! Thanks!

Reply

teespring browse Campaigns August 21, 2014 at 9:13 am

Hi there! This is kind of off topic bbut I need somme
help from an esgablished blog. Is it very hard to set up your
own blog? I’m not vefy techincal but I can figure thints out prerty quick.
I’m thinking about making my own but I’m not sure whee to begin. Do you have any points
or suggestions? Cheers
teespring browse Campaigns recently posted..teespring browse CampaignsMy Profile

Reply

web site August 21, 2014 at 10:47 am

I am in fact grateful to the holder of this web page who has shared this impressive article at at this
place.
web site recently posted..web siteMy Profile

Reply

Tennille August 23, 2014 at 1:52 am

Just what I was looking for! Thanks so much! :o )

Reply

Jan August 27, 2014 at 2:25 pm

I think that everything composed was actually very
reasonable. However, think on this, what if you composed
a catchier post title? I mean, I don’t want
to tell you how to run your website, but suppose you added something to maybe get a person’s attention? I mean Primp My Blog:
How to Add Social Media Buttons to Your Sidebar is kinda vanilla.
You should peek at Yahoo’s home page and watch how they write article headlines to grab people to open the links.
You might try adding a video or a pic or two to get people interested about everything’ve got
to say. Just my opinion, it would make your website a little bit more interesting.
Jan recently posted..JanMy Profile

Reply

port macquarie australia September 2, 2014 at 8:14 pm

It’s going to be ending of mine day, however before finish I am reading this fantastic article to
increase my knowledge.
port macquarie australia recently posted..port macquarie australiaMy Profile

Reply

Leave a Comment

CommentLuv badge

{ 20 trackbacks }

Previous post:

Next post: