KLOUT and iFrame

  • shimworld · Member ·

    I wonder if it’s possible to display this seemingly innocent link http://widgets.klout.com/badge/janshim in a text widget. The one I currently have on my blog is a static image of the current Klout score.

    KLOUT provides an iframe script that I know does not work here. I read somewhere there are workarounds to make this work but methods with such elaborate steps I cannot follow. If there’s a simpler method, please let me know.

    <iframe src="http://widgets.klout.com/badge/janshim" style="border:0" scrolling="no" allowTransparency="true" frameBorder="0" width="200px" height="98px"></iframe>

    The blog I need help with is: (visible only to logged in users)

  • sanjidas · Member ·

    @shimworld,
    I am sorry but iframes are not allowed in wordpress.com, hence the need for a workaround. There’s no simpler method than the one you know of.

    It doesn’t matter how innocent your code is, iframe tags get stripped in wordpress.com for security reasons.

    If Klout gives you a Flash widget or rss links, why not use that instead?

  • shimworld · Member ·

    I have difficulty following your Tagul workaround. Using the above iframe script, could you help me with the final script i can use or do I have to create my own account first and work from there? I know there are many who have succeeded yet there are quite a few who couldn’t get it to work.

  • sanjidas · Member ·

    @shimworld,
    Those who had difficulty had so because they missed a step in the tutorial.

    do I have to create my own account first and work from there?

    If you read my post carefully you will see that I have mentioned that Tagul is a member-only service. So, yes, you have to have a (free) account at Tagul in order to get anywhere. Once you get the basic code from Tagul, I can help you modify it so that it works in wordpress.com.

    If you are stuck anywhere, please be specific about your problem so that I can help you. Follow every step as per my tutorial and it will work.

  • shimworld · Member ·

    Went through the steps and got this code

    http://tagul.com/preview?id=19497@1

  • shimworld · Member ·

    [gigya src="http://cdn.tagul.com/cloud.swf" type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”number” height=”number” flashvars="id=19497@1"]

    and got embed_shortcode: ”application/x-shockwave-flash” is not a valid MIME type

  • shimworld · Member ·

    Update: after correcting ALL the curly quotes (I missed a few pairs, hard to see on laptop’s high-res screen) .. i managed to get it to “work” although not the desired outcome.

    “This Klout profile doesn’t exist, or hasn’t been processed yet.”

  • sanjidas · Member ·

    If you save your Klout widget at Tagul again – now it says n/a probably because you haven’t saved it or deleted your saved widget – use this code:

    [gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="300" height="250" flashvars="id=NUMBER"]

    Use the above code, but please replace the bit “NUMBER” with the actual number of your Tagul ID.

    If you are wondering what went wrong for you…
    You forgot to change the number of height and width! Also some curly quotes (a real pain, thanks to how wordpress.com automatically changes the plain quotes to curly quotes) still remained.

    Test the new code and let me know. It should show your avatar and your Klout score (51).

  • shimworld · Member ·

    At first I thought I was supposed to shorten the entire <iframe> code using bit.ly service. Earlier, I shortened http://widgets.klout.com/badge/janshim and added the shortened URL into Tags Link Pattern. By now I think I have followed everything correctly because clicking on the newly created widget works.

    http://shimworld.wordpress.com/

    For the purpose of this test, it’s at the bottom of my blog’s sidebar. Trouble is it’s showing my “KLOUT” which is the text I input like your “Calendar” example. Clicking on it works just that it’s not showing it properly.

  • sanjidas · Member ·

    Thing is, it is working perfectly in my test post.

    Another thing is, the url you put in the “Tags links pattern” is almost right, but not quite!!

    You have shortened this url to put in Tagul:
    http://widgets.klout.com/badge/janshim”

    The url to be shortened is this:
    http://widgets.klout.com/badge/janshim

    If you observe carefully, you will see that you have added an extra double quote after the url.

    Just delete the double quote and it will work!

    To compare the results, visit both the urls given above.

    The one with the double quote shows up a “This Klout profile doesn’t exist, or hasn’t been processed yet.” message, but the one without the double quote produces your avatar and your Klout score (51).

    So please try again with the correct url and please be careful! :D

  • shimworld · Member ·

    Unfortunately, even with the correct URL, the Klout button does not show.

  • sanjidas · Member ·

    @shimworld,

    Your Klout is visible to me when I put the cursor somewhere below your “meta” widget. I bet you are using a colour combination that is rendering both the text and and the box as white, thus it is blending with the background of your blog and so not visible to you instantly. Change the colour combination (make sure that not both the text and the box are of the same colour!!!)

    I have taken a screenshot of your actual Klout widget (accessed after I clicked the word “Klout”).

    Here is the screenshot:
    http://prntscr.com/1tz5e

  • shimworld · Member ·

    What I now do not understand is why doesn’t the Klout button show without a mouse-over and a click. I’m really asking why I need to “put the cursor” when it should display the button without any user intervention or is this a limitation of the TAGUL method ?

  • sanjidas · Member ·

    What I now do not understand is why doesn't the Klout button show without a mouse-over and a click. I'm really asking why I need to "put the cursor" when it should display the button without any user intervention or is this a limitation of the TAGUL method ?

    I have already given you the solution to the problem:
    I bet you are using a colour combination that is rendering both the text and and the box as white, thus it is blending with the background of your blog and so not visible to you instantly. Change the colour combination (make sure that not both the text and the box are of the same colour!!!)

    You had a visible colour combination the first time you had Tagul. I read Klout in black against a white background back then. Now your text is white, the bounding box around the text is white and the box is white. Change the colour setting. You can always click the “Visualize” button in Tagul to see how a combination looks. If you see it properly in Tagul, there is no way it will be invisible in your blog because of the colour combination.

  • sanjidas · Member ·

    I'm really asking why I need to "put the cursor" when it should display the button without any user intervention or is this a limitation of the TAGUL method ?

    I forgot to elaborate on that point, sorry. Yes, this is the limitation of Tagul.

  • shimworld · Member ·

    Thank you for your help, Sanjidas. Much appreciated. Someday, WP may let us embed what is questionable today. They have already given me many features that many thought would never happen so I’m keeping my fingers crossed. :)

  • sanjidas · Member ·

    You are welcome!!

    Someday, WP may let us embed what is questionable today.

    I don’t think wp.com will ever allow iframes!

  • shimworld · Member ·

    Yes they do!

    http://en.support.wordpress.com/google-maps/ hehe.

    5) Place your mouse cursor in the second text box titled Paste HTML to embed in website. The code will begin with <iframe. Copy the code.

    6) In your WordPress.com dashboard, go to Posts->Add New or Pages->Add New (or open an existing post/page in editing mode). Paste the code directly into your HTML editor. (You can flip between the Visual and HTML editors using the tab at the top-right of the editing box.)

  • sanjidas · Member ·

    What happens when you paste the iframe code for Google Maps in wordpress.com? Wp.com automatically changes the iframe tags into a google map shortcode. So….

    <iframe blah-blah></iframe>
    becomes
    [googlemaps blah-blah]

    If they ever allow a a wp.com shortcode (like Google Maps) that will work for any iframe in wp.com, then they could have allowed iframe tags in the first place and not a modified shortcode! Because if anything can be embedded in a wordpress.com via a modified-iframe-code then it will be just as risky as iframes.

  • shimworld · Member ·

    It’s OK I can live with whatever restrictions WP.com has in place to ensure we have access to popular widgets out there. If Google Maps is the only iframe script that’s presently supported, I found a use for that too such as the following post where a Google Map is handy to have.

    PHOTOGRAPHING SOMBOI-SOMBOI PITCHER PLANTS IN THE TROPICAL RAINFOREST OF SUNGAI LIANG

  • The topic ‘KLOUT and iFrame’ is closed to new replies.