Involver Developer Network : klout

Involver Developer Network : klout_gate

This page last changed on Aug 15, 2012 by yuriy.kalynovskiy@involver.com.

The klout_gate allows SML developers to gate by a user's klout_score. This allows your pages to show custom content to different market segments based on how engaged they are with social media.

Attributes

Default CSS
Basic example
Using the threshold attribute
Customizing the initialization link.
Combining klout with if logic
A fully configured example
Complex example

Attributes

name	type	description
thresholds	int	Allows you to specify different idn:partials to show based on the score.
container	string	Specifies another container to render the partial in if you don't want to replace the contents of the klout_gate block and want to render it elsewhere.
klout_score	string	Outputs the users Klout score.

Default CSS

By default the Klout authorization dialog iframe has the following css applied:

         #klout_iframe {
           position: fixed;
           width:350px;
           height:175px;
           left:50%;
           margin-left:-175px;
           top:80px;
           outline:none;
           transition: all 0.25s ease-in-out;
           -webkit-transition: all 0.25s ease-in-out;
           -moz-transition: all 0.25s ease-in-out;
           border-radius:3px;
           -webkit-border-radius:3px;
           -moz-border-radius:3px;
           border: 3px solid #db4017;
           -moz-box-shadow: 3px 2px 11px #2b2b2b;
           -webkit-box-shadow: 3px 2px 11px #2b2b2b;
           box-shadow: 3px 2px 11px #2b2b2b;
           overflow:hidden;
         }

As always, you can over-write this css by dropping new values into your SML template.

Basic example

{% klout_gate %}
    <!-- THIS CONTENT WILL BE REPLACED AFTER BELOW LINK IS CLICKED -->

    <p>{% klout_init_link %}What's my klout score?{% endklout_init_link %}</p>
{% endklout_gate %}

{% partial name:klout_default %}
    <p>Your klout score is {{ klout_score }}.</p>
{% endpartial %}

The klout_init_link tag will create a <a onclick="askklout">INIT LINK</a> that will initiate the klout score fetch. It does not have to be inside klout_gate but it makes sense since it's only clickable once. Once the klout score is fetched it will replace ALL the contents within the klout_gate block with contents from the partial. klout_default must be present as it represents what is shown to people with the minimum score of 0.

Using the threshold attribute

{% klout_gate thresholds: "{0:'klout_default',25:'klout_25',50:'klout_50'}" %}

Sets klout_default to render for a score 0-24, klout_25 for a score 25-49, and klout_50 for a score >50.

Notice the use of internal brackets within the threshold's attribute. This is a unique syntax within SML, though other tags that use it may be added at some point in the future. It allows the developer to pass in the equivalent of a series of if-statements in a single parameter, making the code much more compact than it would otherwise be.

Customizing the initialization link.

The klout_init_link creates an inline html link that contains

sml.tag.Klout.initKloutFrame(); return false;

If you need to you can nest this line into a larger function and call it that way instead. Keep in mind the custom script must be located either inside the klout_gate block or below it since the block calls sml.tag.Klout.initKlout with a bunch of necessary params. Without this, sml.tag.Klout.initKloutFrame will not work.

<div class="klout_init">
  {% klout_gate thresholds: "{0:'klout_default',25:'klout_25',50:'klout_50'}" %}
     <a href="#">Click here to get your score!</a>
  {% endklout_gate %}
</div>

<script>
$('.klout_init a').click(function() {
    sml.tag.Klout.initKloutFrame(); return false;
})
</script>

Combining klout with if logic

If you decide you need to use if logic in your klout_gate block, perhaps in order to combine it with fan gating or time-release code, you can do that as well

{% klout_gate %}
    {% klout_init_link %}Click here to get fabulous prizes!{% endklout_init_link %}
{% endklout_gate %}

{% partial name:"klout_default" %}
    {% capture_int score %}{{ klout_score }}{% endcapture_int %}

    {% if score > 25 %}
        Some Code
    {% else %}
        Other Code
    {%endif %}
{% endpartial %}

A fully configured example

<style>
#score_bg {
 background: url({% editable_image name:"bg_v2" src_only:'true' %}) no-repeat;
 height: 706px;
}

#download {
 display: block;
 background: url({% editable_image name:"download_v2" src_only:'true' %}) no-repeat;
 text-decoration: none;
 outline: none;
 width: 438px;
 height: 314px;
 position: relative;
 left: 30px;
 top: 65px;
}

#download:hover {
   text-decoration: none;
}

#klout_score_cont {
 font-face: Helvetica, Arial, sans-serif;
 color: #999;
 font-size: 87px;
 font-weight: bold;
 text-align: center;
 width: 119px;
 height: 119px;
 position: absolute;
 top: 50px;
 left: 37px;
}
</style>

<div id="container">
    {% klout_gate %}
        {% klout_init_link %}
            {% editable_image name:"landing_v2" %}
        {% endklout_init_link %}
    {% endklout_gate %}
</div>

{% partial name:"klout_default" %}
    <div id="score_bg">
        <a href="http://cdn.m80im.com/media/audi/audi.jpg" id="download" target="_blank">
            <span id="klout_score_cont">{{ klout_score }}</span>
        </a>
    </div>
{% endpartial %}

In this example, clicking on the editable image will replace the content of the "container" div showing the user a message with their klout score.

Complex example

Using Kout to customize a signup form (based on the form from Chapter 5 of the training manual). Users with a score over 25 will be able to enter the sweepstakes for tickets for themselves and a friend, users with a score under 25 will only be able to enter for themselves.

{% klout_gate %}
    <h2>
        {% klout_init_link class:”klout_klick” %}
            Click to enter our fabulous sweepstakes!
        {% endklout_init_link %}
    </h2>
{% endklout_gate %}

{% partial name:klout_default %}
    {% capture_int score %}{{ klout_score }}{% endcapture_int %}

    {% if score < 25 and is_page_fan %}
        <h2>Enter our fabulous sweepstakes to win a ticket to AwesomeBand’s next show!</h2>

        {% signup_form name:”sweepstakes” onsuccess:"showThankYouMessage();" rules_var:"sweeprules" %}
            <ol>
                <li><label for="">Name:</label> <input type="text" name="name"></li>
                <li><label for="">Email:</label> <input type="text" name="email"></li>
                <li><label for="">Phone Number:</label> <input type="text" name="phone_no"></li>
            </ol>

            <p>{% signup_form_submit %}</p>
        {% endsignup_form %}

        {% elsif score > 25 and is_page_fan %}
            <h2>Enter our fabulous sweepstakes to win tickets for you and a friend to AwesomeBand’s next show!</h2>

            {% signup_form name:”sweepstakes” onsuccess:"showThankYouMessage();" rules_var:"sweeprules" %}
                <ol>
                    <li><label for="">Name:</label> <input type="text" name="name"></li>
                    <li><label for="">Friend’s Name:</label> <input type="text" name="friend_name"></li>
                    <li><label for="">Email:</label> <input type="text" name="email"></li>
                    <li><label for="">Phone Number:</label> <input type="text" name="phone_no"></li>
                </ol>

                <p>{% signup_form_submit %}</p>
            {% endsignup_form %}

        {% elsif is_page_fan %}
            <h2>You must authorize Klout!</h2>

        {% else %}
            <h2>Become a fan to enter our sweepstakesl!</h2>
    {% endif %}

    <div id="thank_you_message" style="display:none">
        <h2>Thanks for entering! Check back here December 1st to see if you've won.</h2>
    </div>
{% endpartial %}

<script type="text/javascript">
var sweeprules = {
 email: {
   required: true,
   email: true
 },
 name: {
   required: true
 },
 phone_no: {
   required: true
 }
}

function showThankYouMessage() {
  sml.get('signup_div').hide();
  sml.get('thank_you_message').show();
}
</script>

In this example we are now offering a free ticket to AwesomeBand’s next concert to anyone and - as a hidden perk for people with a high enough Klout score - we’re offering a second free ticket for a friend.