Using VKontakte (ВКонтакте) Share Button for Blogger

VK — VKontakte — ВКонтакте, is the largest social network in Russia (second place for the most visited website after Yandex), and the second largest in the entire Europe after Facebook. It looks like the "previous" Facebook, but with crazy awesome efficient page load speed. Don't believe me? Try it out.

Founded by Pavel Durov, it was launched (BETA) in 2006. And until 2012, VK had more than 200 millions registered users. And it's still growing.

I'm gonna show you using the VK share button on Blogger. But, before you make your articles share-able for social network that mainly doesn't use English, you have to provide a translator plugin at your blog. There are Google Translate, Bing Translate, and other providers, or probably your own customized API from any of those providers.

Synchronous VK Button

Go to VK Share Button (link below this post).
Copy the JavaScript resource and rendering method. Or just use link, provide the url, then create your own button. If you're using the predefined JavaScript button, which is the easiest implementation, you will have more customization parameters.
Place (paste) it on your blog.

Using Default JavaScript Button

This is the resource

We can place it in the head section, or just above the JavaScript button element.

<!--synchronous resource load-->
<script src="https://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script>

This is the button element rendering method:

<script>
    <!--
        document.write(VK.Share.button());
    -->
</script>

We can also omit the comment delimiter, like so:

<script>
    document.write(VK.Share.button());
</script>

The comment delimiter is a method for "olden" browsers. For modern browsers, that isn't needed.

The default button looks like this:

Placement on Blogger HTML Editor

This is the entire code for the default VK share button

<!--synchronous resource load-->
<script src="https://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script>

<!--button rendering-->
<script>
    document.write(VK.Share.button());
</script>

To place it below the post's content, look for <div class='post-footer'>, and paste the code before that.
To place it after the post's title, look for:
<div class='post-header-line-1'/> </div>
and paste the code after the closing </div>.

To implement the additional layout parameters, change the element rendering method to this:

<script>
    document.write( VK.Share.button( false, {type:"the_button_or_link_type", text:"the_text_for_the_button"} ) );
</script>

Then alter the value of type and text for that.

Something like this, I'm using type:'round_nocount' and text:'share':

Asynchronous VK Button Example

This method is good for creating seamless loading of your page. You can observe the CSS, HTML element, and how the JavaScript library is loaded and then the final rendering.

<!--styling for button holder-->
<style>
    .my_VK_button_outer {
        text-align: center;
    }
    .my_VK_button_outer > .my_VK_button_inner {
        display: inline-block;
    }
</style>

<!--the button will be injected here. Element with id="my_VK_button"-->
<div class="my_VK_button_outer">
    <span class="my_VK_button_inner" id="my_VK_button"></span>
</div>

<!--resource load event handler-->
<script>
    function show_VK_button() {
        if (window.VK) {
            document.getElementById("my_VK_button").innerHTML = VK.Share.button();
        }
    }
</script>
<!--asynchronous resource load-->
<script async="async" src="https://vkontakte.ru/js/api/share.js?9" charset="windows-1251"  onload="show_VK_button()"></script>

Link

More parameters of VKontakte share button at VKontakte

Monkey Raptor

Monkey Raptor

Friday, August 23, 2013

Using VKontakte (ВКонтакте) Share Button for Blogger

No comments

Post a Comment