How to add a VK sharing button on your posts.

Hello,

This is not an official method of implementation. I am creating a new topic here rather than creating an official guide. It’s just something I tested now and it seems to work. It’s not perfect but it may help our community with the VK network sharing.

Before other requests come about, please note that I cannot provide a solution for the social counter. That requires quite a bit of coding skills and has to be done on a development stage. The social counter is a very complex element and new social networks cannot be added as simply as the social share buttons.

If you want to add the VK social sharing network to your post social sharing top or bottom icons like so http://screencast.com/t/ScMmNIBXmM , then here is a guide on how to do it:

1. Access this link: https://vk.com/dev/share_details

2. Copy the first part of the code that is meant to be added to the head section of the site and do just that: The file is header.php in the main folder of the theme: http://screencast.com/t/P1PrauKfj

3. The second part of the code needs to be added in your preferred location on the site. I have not tested any other positions but you can get creative with the positioning if you want to. I just added it next to the other social sharing buttons on posts.
The file you need to add it to is td_module_single.php: http://screencast.com/t/9smS813bC
I also wrapped the code in a div and added a custom class for css positioning. Here is the final code:

<div class="td-social-vk">
<script type="text/javascript">
document.write(VK.Share.button());
</script>
</div>

4. Now it will require a bit of css for better positioning so it will not interfere with the other social share buttons. Add this code in the theme panel->custom css box:

@media(min-width:1018px){
.td-social-vk{
float:right;
margin-left:10px;
margin-top:7px;
}}
@media(max-width:1018px){
.td-social-vk{
float:none;
margin-left:auto;
margin-right:auto;
display:table;
margin-top:7px;
}}

You can get creative with this method and change it to your liking. The VK link above also provides solutions if you want to change the style of the button but I have not tried this.

This will not work on the mobile theme though. If you want to add the network on the mobile theme you will need to add it to this file: http://screencast.com/t/hN6TY7vhvK

I hope this helps everyone that needs a quick VK button.

Thank you and best of luck to you all!

Hi,
No permission needed :). It was just a thought as it may help other people who need to add VK to the sharing options. Your solution only helps people further if they require anything similar.
Thanks for sharing.
Have a great weekend!

The button is created on the vk website so you can choose the style you want. Please check this link: https://vk.com/dev/share_details and see the ‘Changing Button Appearance’ section.

Thank you!

Hi,

I have tried this with the code you mention and it looks like this
– https://www.screencast.com/t/Pv9fBIIRa14
– https://www.screencast.com/t/RA3EIW62w
To change the style you need to replace the “link” style from the example with one of the available styles, provided in the official website
– https://www.screencast.com/t/GQjCiSoU2FM
– https://www.screencast.com/t/QYQhvB5I
– https://www.screencast.com/t/ACcdGXfpAWu0

Thanks