How To Display Your Klout Score On Your Website or Blog

I have seen the display of Klout scores on many blogs, and I have wondered about how they did it. My interest in displaying my Klout score increased as I blogged more and learnt more about Klout. Alas, my Klout profile page has no information about how to acquire this personalised neat and cute orange badge. Klout’s help page couldn’t help me either.

So, I decided to contact Klout and ask; I’m not sure why I didn’t just google it. ๐Ÿ™‚

Klout Score Badge email | How To Display Your Klout Score On Your Website Or Blog in 5 Steps | Blogging / Social Media Tools and Processes Series | | @aNoviceMum

The link was helpful though the code was pretty explanatory; what I had to replace to personalise it became obvious after I added the code to my sidebar.

So, here is how to display your Klout score badge within a post or page, and in your sidebar in 5 steps

How To Display Your Klout Score On A Post / Page / Sidebar in 5 Steps | Blogging / Social Media Tools and Processes Series | | @aNoviceMum

Display your Klout score within a post or page:

1. Add a new post or page.
2. Change from the visual editor to the text html editor.
3. Copy and paste the Klout score badge code into the text html editor of your post or page.
If you place it in the Visual editor where you type in your words, it will not display the code in the visual editor and on the published post or page.
4. Replace the ‘YourTwitterHandle’ text with your Twitter handle without the @ sign.
It will appear as a grey box in the Visual view of your post or page.
5. Publish it on your blog.

How to add your Klout Score to a post or page | Blogging / Social Media Tools and Processes Series | | @aNoviceMum

Display your Klout score in your Sidebar:

1. Hover your mouse on Appearance in the side menu of your blog admin page, and click on Widgets.
2. Find and drag the Text box from the Widget list to the Sidebar block and click your mouse where you want to display your badge.
Or like me, you can click on an existing text box within your desired Sidebar block and decide where you want your badge to be.
3. Copy and paste the Klout score badge code into your textbox.
4. Change the YourTwitterHandle text to your Twitter handle without the @ symbol.
5. Save and view it on your blog to make sure it’s showing where you want it to be.

Adding your Klout score badge to your sidebar | Blogging / Social Media Tools and Processes Series | | @aNoviceMum

View your blog (published post or page, or refreshed sidebar) to see the display of your Klout score badge.

Klout score badge code

<iframe src=”” style=”border:0″ scrolling=”no” allowtransparency=”true” frameborder=”0″ width=”200px” height=”98px”>< /iframe >

Klout score badge display name

If you don’t like the name displayed beneath your badge, you can change it. In this spirit of keeping these posts to the point and as short as possible, I will write another post for this.

On different blogging platforms

My how-to-guide is based on my experience on my WordPress blog.

However, I think the Klout score badge code stays the same for whatever bloggingย  or website platform you use, you just need to add it to the html editor of the medium through which you want to display it. This might be within a post or page or in the widget that allows you to add html code to your sidebar. Please confirm if the code works for you on other blogging platforms like Blogger.

This post is part of a series I’m working on, to share what I’m learning about the blogging process and its tools.


Your Klout score goes up and down depending on a number of factors, and I’ll be exploring some of these in subsequent posts.

Do you have any questions about adding your Klout badge that hasn’t been answered in this post, or any other questions about Klout?

Linkup: #SundayStars | #mummymonday | #blogstorm | #TwinklyTuesday 15/9/15
Life with Baby KicksMummascribbles
The following two tabs change content below.


Founder | Writer I Editor I Manager
First-time Mum / Freelance Writer / Thinker / Educator / Business graduate / Improving Photographer / so much more. \\ Recording my mu-m-sings from the South East of England | Sharing lessons from my life's journey to encourage and inspire | Filled with gratitude for my faith, family, and friends.

42 thoughts on “How To Display Your Klout Score On Your Website or Blog

  1. Pingback: How To Give Klout In 3 Clicks - Adventures of a Novice Mum

  2. Found this super helpful.. Also I love the theme you are using with the little worm going down further as you scroll.. It was very entertaining and cute! xx ๐Ÿ™‚

  3. This is a great post, however I have tried but it doesn’t save – although I am not self hosted so I am guessing this could be why? Maybe one for me to add to the self hosted to do list!! ๐Ÿ™ #twinklytuesday
    Mudpie Fridays recently posted…Toronto ZooMy Profile

  4. Pingback: Post Comment Love and Newbie Showcase 27th to 29th November 2015 - Verily Victoria Vocalises

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge