Nav Bar

Home Project Gallery Contact About Facebook Google+ Pinterest Twitter Bloglovin' Image Map

Sunday, May 5, 2013

How to add a Social Buttons Widget (Part 1)

How to add a Social Buttons Widget (Part 2) |

Update 6/3/2013: You might be wondering, "how did a blogspot blog do a tutorial for" I originally wrote this while on I have since moved to You can read more about the move here

I have seen several Social Buttons Widget tutorials out there on the interwebz lately. Most are from a Blogger (blogspot) perspective and require html coding.

Right after I set up my own social button widget (many months ago), I received an email from a fellow blogger asking how I did it and whether I used html to do it. I responded to her personally right away with some really simple, but un-detailed, directions.

After seeing all the tutorials on this topic, I thought I would offer the steps on how I made mine and also some alternatives. Both the alternative widgets and the tutorial will be from a hosted site perspective and with NO html coding. {you heard me right, girlfriend! - Or boyfriend? - NO HTML!}

Widgets Available to Bloggers

First lets take a look at a few simple widget options available for providing readers a way to follow you. These widgets are located in the Appearance menu under Widgets.

The most basic widget is the Follow Blog Widget. This is a must widget! It allows users to follow you via email. I believe the default for sites is to have this enabled. If it isn't, you should definitely enable this widget. If you don't know how, here are some directions from WordPress.

Follow Blog Widget
Follow Blog Widget - this widget gives users the ability to follow your blog via email and is a must have!

Allowing users to follow your blog via email is good and all, but what about your social links?

You can add the Facebook Like Box widget. It lets you add a like button to your sidebar so users can like your Facebook page. It can also display thumbnails of your Facebook followers and/or your wall feed. To make it so the widget doesn't have a title (like "Connect with me via Facebook") similar to below, simply leave the widget title blank.

Facebook Like Box
Facebook Like Box - this widget can be implemented in at least four different ways. Only a like button, like button with follower faces, like button with wall stream, or like button with faces and wall stream.

Another social widget is the Twitter Widget and the Twitter Timeline Widget. The Twitter Widget displays your tweets and offers users a button to follow you via twitter. It offers some filters, like not showing tweets from the publicize WordPress feature, filtering replies, or filtering retweets. The Twitter Timeline Widget is a little different, as it is the official Twitter Widget and offers interactions, like retweets, replies and favoriting tweets. You will need to set up this widget on Twitter first, and then it will be embedded into your sidebar. It can also be embedded in a post or page!

Twitter Widget
Twitter Widget - Includes your feed plus a follow button.

While writing this post, I discovered the Widget and the Gravatar Profile Widget. It looks like the Widget provides a really beautiful looking profile page (outside of your blog). The profile page includes a custom background, a bio and then all of your personal links and social networking sites. The widget provides a miniature profile including the picture of you, your bio, a link to your profile page and your social links.

I actually excluded my bio because it was too long. You do not have the option to provide a smaller blurb. The social apps included Facebook pages, but every time I tried to add my Facebook page it kept grabbing my personal Facebook profile (I'm using Chromebook, so maybe it will work more nicely with other OS/Browsers). There did not appear to be a Google+ page and no Pinterest or Boglovin'. You can add custom links, like to your Pinterest page, but they will not show up on the widget.

The profile is very cool. You can check my profile out and see what you think. You can move your bio anywhere on the screen. The background image (mine below is the default) can be dragged anywhere too. You can customize colors, fonts and font sizes. It is an interesting concept, to have a hub that then links to all of your social sites.

About.Me - Widget on the left, my profile on the right.

I already use the Gravatar widget to provide a picture of me and a little about me blurb. The Gravatar profile picture is also used as my profile picture when I comment on WordPress blogs. The Gravatar Profile Widget must be new. It provides a miniature Gravatar Profile, including a blurb about you, your picture and your social links and/or links to your websites. What I don't like about this widget is that it auto grabs your social links when you sign in with each service. Guess what? It grabbed all of my personal social sites, not my pages. It also didn't have Pinterest or Bloglovin'.

Gravatar Profile Widget
Gravatar Profile Widget - includes your profile picture, your bio, personal links and social sites. The social sites are auto grabbed and ended up being my personal sites, not my blog's pages.

These are good widgets, but what I really wanted was a social site widget that includes all of my social sites in one widget, including Pinterest, Bloglovin' and any other social service I decide to sign up with. The user that had emailed me had come up with decent solution. She added all of her social sites as an Image Widgets. Each social site has its own logo, so she would add them individually as an image widget and set up the link to go to her page. She had titles to each one, so I would suggest removing the titles and seeing how that looks.

One last idea would be to set up the Links Widget with all of your links. This would be set up the same way as a blogroll, but with your social links instead of blogs. The links will show up as text links or image links. When making a demonstration widget, I was actually surprised how well this option turned out. The only problem with the image links is that this is a vertical widget and doesn't list them horizontally. It also includes bullets by each link.

Link Widget
Link Widget - Left is the widget with strictly text only links underneath my about me blurb. The middle image is a image link only, while on the right is image and text links. This widget turned out surprisingly well.

What I really wanted was custom buttons that matched my theme and are horizontal in order to conserve real estate in my sidebar. So what is a girl to do? Well, I did what any DIYer does. I engineered my own widget from scratch!

In Part 2, I will step you through how I made my custom social buttons widget.


Disclaimer:  The background image for the banner is courtesy of Shopseal and licensed under the Creative Commons Attribution license. All other images are my own.

Linking to:  Give me the Goods | Creatively Tuesday | Sharing with Domestic Superhero | Pin Me


  1. Okay, I really need to set aside some time to really read and follow your tutorials. (Same goes for those found on Lauren's "The Thinking Closet".) I've surprised myself in that I actually figured some of these out on my own - the easy ones. Thanks for sharing your wealth of techie knowledge!

  2. Great tutorial.. Unfortunately I am no longer on Facebook, Twitter and had to leave Pintarest alone (was spending hours in that dreamy world of wants) so I don't use widgets but this is a great tutorial..easy and I think even my less-than-techno-brain could do this :-)

  3. Haha! You are welcome. I just went exploring in the widgets section to figure these out. Next week I'm going to show off how I made my social buttons widget from scratch.

  4. I'm glad they look easy. I was very into social networking at one point. I've currently sworn off my personal Facebook page. I actually came this close to deleting my account, but then I realized you can't have a page with out a personal account. Since I still want my page for the blog, in case that is the preferred way people want to follow me, I still have my account. The only one I really hang out on is Pinterest, and usually at night right before bed. I like getting all dreamy before bed. That, and I have found some awesome recipes on Pinterest. :D

  5. Yes, you are officially the smartest person I know. :) You are my hero for doing great things without html! I'm seriously so impressed. Looking forward to part two!

    ~Abby =)

  6. Was I that "fellow blogger" who asked about social media icons? :-) Because I think I was! You definitely gave me the tip via email on adding an HTML widget and just grabbing the html from a post draft...which I remember rocking my world at the time. Oh, how little I knew! And how thankful I was to have a tech-savvy friend in you. You are generous to share this knowledge with blogland, and I know that it will prove so useful for many. (Sorry for my delay in commenting...not sure how this post slipped through the cracks on me!)

  7. Haha! You totally are that "fellow blogger," but not any more! Your blog totally rocks now! :) I kept that email chain and kept thinking to myself that I really needed to do a write up on it, so I am finally getting to it. And no worries on the delay in commenting. I am so backed up on reading everyone's posts! I think I owe you like a couples weeks worth of reading!!! (or at least a couple weeks of commenting. I read some of your posts on the bus on my phone, but couldn't bear the idea of typing out a long winded comment on my phone.) Hugs!

  8. Yay! I knew it!

    And don't worry about playing "catch-up" with comments; I know how crazy life can get...and I, too, read my bloglovin' feed when I'm out and about, but don't dare try to hunt-and-peck my way through typing a comment. I've gotten burned too many times with typos and failures to post because I'm not logged in or something. Hugs back!

  9. I am impressed to Visit your post Thats nice entry.I want to follow your blog post continue. You can see also this post.

  10. Many applicants are eager to take the test that the National Institute of Open School administers in April, and all of them may now get their NIOS 9th class Blueprint 2023 in the syllabus-by-syllabus format from the official website of NIOS or from Official web. We are providing you with a direct link to get their NIOS 9th class Exam Pattern 2023 as many applicants had trouble downloading their Blueprint 2023 when it was first released on June 9th of last year. NIOS 9th Blueprint 2023 Hindi & English Medium From the websites provided below, candidates can get their NIOS 9th Blueprint 2023 by name or roll number. Candidates can also get their Blueprint 2023 by following the instructions below.

  11. GCERT 6th, 7th, 8th, 9th, 10th Blueprint 2023 are very Useful in Effective Exam Preparations, Students must Prepare them well in order to gain Complete knowledge on each and every Subject, Students can Download the Gujarat 6th, 7th, 8th, 9th, 10th Solved Paper 2023 from the official website. GCERT 6th Model Paper we have Provided All the Gujarat 6th, 7th, 8th, 9th, 10th Question Paper 2023 which are Collected from Gujarati, Hindi, English Medium, 6th, 7th, 8th, 9th, 10th Various Class Students can use These old Exam Question Paper as a Reference to Prepare, Students can get the Complete subject wise PDF Download Links.