Welcome to the third instalment of my blog tip series of posts. Klout is one of the most popular social reach indicators, particularly amongst bloggers. If you’re not aware Klout uses social media analytics to rank its users according to online social influence via the “Klout Score”, a number between 1 and 100.
Before I proceed I want to point out that my husband, who works in IT will be helping me with this series of posts going forward as he has a great understanding about these things. When I first looked into displaying a Klout badge on my website I found a very useful post about how to do this by Becky on her Cuddle Fairy website, which you can find here.
Like Becky mentions in her post I soon found that the badge was actually causing the pages on my website to load a lot more slower as the page would seem to freeze everything until the badge could be displayed. As a result of this problem, I notice that many bloggers simply use an image instead. I passed this problem onto my husband Nick who found that the way around this was to use a technique called ‘lazy loading’ which means that certain features of your web page should not stop the rest of your page from loading when someone visits your site. There are wordpress plugins available which will solve this problem for any widget that might be causing a similar problem. I will save that post for another time though as there is a lot more to explain. Today I am going to give you an easy way of resolving the problem for your Klout badge by following 3 simple steps.
Before we start, you need to know your Klout Username. If you don’t know what this is, go to klout.com in your web browser and after logging in, click your profile in the top left hand corner of the page (indicated with the red arrow in the screenshot below). This will load your profile page, however its the page name in the website address bar which reveals your username. This is highlighted in yellow in the screenshot below.
To generate a Klout Badge which won’t slow your page load time, follow the steps below:
- Enter your Klout Username
Enter your Klout username in the box below (Change “WithFranca” to your own Klout username) and then press the ‘Generate Badge’ button to create your badge. - Check Your Badge
Check that your Klout Badge loads correctly in the window below. Use the Increase/Decrease height/width buttons to ensure that the right amount of height and width is allocated to the button (e.g. a longer name will require more width and height to ensure the complete badge is displayed.). Note, each button click will increase or decrease the frame around the badge by 1 pixel.Increase Height: Decrease Height: Increase Width: Decrease Width: - Your Badge Code
When you are happy that your badge is displayed correctly in the previous step above, copy and paste the automatically generated badge html code from the text box below. You can then copy and paste this code into a sidebar text widget on your website or anywhere you want it to appear!
[do_widget id=”text-17″ title=false]
IMPORTANT
Please ensure that wherever you paste the badge code, such as into a sidebar text widget if you are a WordPress user you need to be sure that javascript is allowed. If you are using hosted WordPress.com you are not allowed to use Javascript unforunately so this will not work (for further information on this click here). Also, some Wordpress themes or configurations do not allow you to use javascript in text widgets. If that is the case this could be due to the theme’s settings or security settings, in which case a workaround is to try installing a plugin (via Plugins > Add New) called ‘Enhanced Text Widget’ which gives you a special new Text widget that should allow javascript to work (so you can then paste the code into that widgetinstead).
That’s it! I hope you find this post useful.
If you have any questions please do not hesitate to ask me. Leave a comment below if you thought this was helpful and if your klout badge works without slowing your website down.
Thanks for stopping by,
Love you all ❤️
Franca 💋
I’ve put off installing a Klout badge because I don’t want the site to take forever to load. It’s now on my to do list 🙂 Thanks so much, great post!
Thanks for linking up to #AnythingGoes
Debbie
Happy to help!! I hope now you can install your badge! 🙂 Thanks for hosting, x
That’s very useful! I need to work more on my klout and instal the badge x
You are a regular TECHY expert!! Dis your husband create the generator or where did you find it? I have an image on my site now. I’ll try your badge out on my next sidebar revamp – I’ll pin for later, thanks x
Yes my husband created the generator!! It took a little while but he managed at the end! It is much better that way and now my klout badge works perfectly without slowing my site!! Let me know when you try it to see how it goes. 🙂 x
interesting! I;m not with klout but i’ll check it out x
This is great info I was so excited, however I cannot get the badge to work on my sidebar widget. I’m sure it’s something I did as I am not very techy. It just shoes the HTML code and not the badge. Any ideas?
Stopping by from #anythinggoes
Hi Nicole, I’m sorry its not working for you :-(. I got Nick to have a look at your website to see what you mean and he thinks it might be worth double checking if you have copied and pasted the code correctly just in case. If you are sure you are copying and pasting correctly and it does not work, it may be that your wordpress theme or configuration does not allow you to use javascript in text widgets. If that is the case this could be due to your theme or security settings, in which case a workaround it to try installing a plugin (via Plugins > Add New) called ‘Enhanced Text Widget’ which gives you a special new Text widget that should allow javascript to work (so you can then paste the code into that widget). I hope this helps Nicole, regards Franca
Thank you! Finally got a Klout badge 🙂
I have not got klout although I did try it once but did not like it. However I am willing to give it another go if it helps me get more traffic.
I have been meaning to get this badge sorted on my site forever – thanks for walking me through it..
Oh I took it! Thanks! 🙂
Thanks for the great post! Really useful info 🙂
#brilliantblogposts
This is such a useful post, thank you! Unfortunately I’m having the same issue as another person in that the text widget isn’t displaying the badge, just the HTML (I have other text widgets that work to display badges). I’m planning on moving to self hosted soon so I’ll bookmark your post and try again then! #TheList
Such a useful post hun. Thanks for linking up to #TheList x
Thank you so much! I now have a shiny new Klout badge that doesn’t slow my site down! You’re a techy genius! I love how simple you’ve made it too, generating the code on the page. Thank you! #Thelist
I love how thorough you are here! I am on a wordpress hosted site and for the life of me I do not understand why they have yet to allowed javascript. It’s like they choose to remain antiquated. Or maybe they like losing people to self hosting. Thank you for sharing this with #momsterslink.
Thank you! I have finally got round to my to-do list and this works perfectly! 🙂
I have to admit that I have fallen out of love with Klout as it randomly dropped me 5 points last week. Great tips for beginners though on getting the badge working
I’m self-hosted with wordpress.org, does that mean I can’t display the Klout badge on my blog? Thanks for this! I didn’t even know you could display your Klout badge. x
Seems like a good idea but my site is already inexplicably slow. Once I get to the root of the problem I’ll be all over this. Ta!
Ive never thought of displaying mine, I have a link too it though x
Brilliant! Just bookmarked your blog! Thanks for sharing!
thank you for sharing will take a look at my own badge
This is a really useful post, it’s worked really well for me! X
Interesting post I don’t know Mich sbout klout
Great post, I don’t really use Klout enough, I don’t have it on my sites either.
I hadn’t realised that the klout badge could do this. Great tips for me who struggles with some of the technical side of blogging. My husband is in IT but he tells me to ask Google 🙁