home » Auto-Moto » Icon tell friends on VKontakte. How to make a cool "Tell a Friend" system on VKontakte to download with CSS and JQuery. Social Media Buttons Share Pluso

Icon tell friends on VKontakte. How to make a cool "Tell a Friend" system on VKontakte to download with CSS and JQuery. Social Media Buttons Share Pluso

Recently, every second (if not the first) customer in the requirements for the development of the site asks to be sure to link it with social networks. "Social" buttons on the site are the number 1 tool for attracting target audience, distribution of content and PR in general. And it's completely free!

Social networks provide codes for their buttons and widgets for placement on the site, and attach instructions for installing them in the content management system. Any CMS (operating systems) allows you to install them, the main thing is to harmoniously fit them into the design of your site.

What are the features and functions?

If your site is aimed at people who communicate with popular social. networks, for example, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, etc., and you want to cover all of them, so as not to set the buttons for each of them separately, given that they may differ in size and design, we recommend using aggregator services. These are simple and convenient tools that will allow site visitors to quickly share information with their friends, regardless of which social network they use. Below we will analyze the most popular services.

Social Media Buttons Share Pluso

How social networks can help promote your site and bring new visitors to it. But this time I would like to move from theory to practice and talk in more detail about how to place on your site buttons like "Like" popular social networks, such as: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP and Yandex ...

What are "likes" and what is the use of them?

However, in Internet slang, "likes" mean something completely different and they look like this:

If the traffic to your site is at least 20 visits per day, then you should already think about placing such buttons on your site, because:

"Likes" attract new visitors from social networks: by “like” this or that post in your blog, the user can tell about it on his page in the social network;
you can understand visitors your site: by analyzing articles or pages of the site, the number of "likes" of which significantly exceeds other pages of your site, you will understand what your visitors like best;
this is will promote the site in search engines: Search engines have long learned to interact with social networks, which is why "likes" leave their mark on SEO.

I think there are enough compliments to “likes” to understand how useful and important it is for the site. Therefore, you can safely proceed to the installation instructions.

Quick jump to instructions

"I like" from VKontakte

1. Go to the page for connecting the widget to your site.

3. Customize the widget to your liking and get the finished code:

4. The widget code must be inserted into the site page templates.

"Like" from Facebook

1. Go to the "Like" button setup page.

2. Customize the widget and click the "Get code" button:

3. In the window that opens, copy the received code and paste it into the site templates.

"Tweet" from Twitter

1. Go to.

2. Select button type:

3. Customize the look of the button:

4. Copy and paste the resulting code into templates:

"Class!" from Odnoklassniki

It's even easier to get the "Class!" together with the "Like" button from the social. network "MoiMir". This is exactly what will be discussed later.

2 in 1: "Like" from MoiMir + "Class" from Odnoklassniki

1. Go to the "Like" and "Class!" Widgets settings page. ...

2. Customize the widget to your liking:

3. Copy and paste the resulting code into site templates:

"+1" from Google+

1. Go to "+1" button setup page.

2. Customize the look of the button:

3. Copy the resulting code and paste into templates:

All in one: for lazy people!

If you are too lazy to configure all social networks separately, you can use ready-made solutions and scripts that provide the ability to place a universal button with sharing (the "tell friends" function) in all popular social networks. Please note that there is no strong link to the site, and such buttons are designed more for convenience than for SEO effect.

Get button codes and paste them on the site.

Where to insert the received codes?

In order to place "like" buttons on the site, first you must decide on which pages of your site it is more profitable and best to place them. There are the following options for placing buttons on the site:

home page;
all pages of the site;
page with recording / material.

No need to reinvent the wheel and place buttons in forum posts, contact pages, and so on: they won't like buttons. After you have decided where you will insert the buttons, enter the control panel of your site at your-site.ucoz.ru / admin and go to:

page editor -\u003e site pages management -\u003e edit site home page (if you want to place the button codes only on the main page of the site);
design management → module (optional) → page of material and comments to it (if you want to place "like" buttons for each material);
design management → global block "Top of the site" (if you want to place the code on all pages of the site).

Paste the received button codes into one of these templates and save your changes. Let's look at this point with a specific example - the placement of the "It's interesting!" next to the entry on our official uCoz blog.

Greetings, dear blog readers. By popular demand from our readers, today we are going to make a cool "Share with friends" system on VKontakte to download a file using jQuery and CSS.

Friends, I want to say that this system will many times increase the number of links to your resource, well, depending on what you offer to download and what your traffic is.

I would also like to say that this system is very similar to the cool "" system, which in turn increases the number of links on Twitter. In this case, almost everything is the same, just a little edited by me. And in the end everything just worked out great :-)

Now let's move on to the system itself.

System "Tell Friends" in Kontakte to download the file

How it works?

You see, it's not so difficult. :-)

How to do it?

First, I drew a simple page template with a button. You can see it in an example, as well as use it on your site, it is available in the source. The user will be transferred to this page so that he could do the cherished operations of downloading the file there.

Then I laid out this template and this is what I got:

As you can see, it is not a big and not complicated page at all.

The main thing at the beginning between tags and add the following scripts:

jquery.min.js - this is a JQuery library, if you already have it you don't need to reinstall it

jquery.vkAction.js - this script calls the vKontakte window.

script.js - but this script activates the "Download" button.

Now let's add a bit of CSS in order to decorate our page a little.

CSS

Friends, all the pictures that are indicated in the styles can be found in the sources in the img folder.

* (margin: 0; padding: 0;) body (margin-top: -50px; width: 100%; height: 100%; color: # 555; background: url (img / body.jpg) repeat 100% 0; font-family: "Ubuntu", sans-serif; font-size: 0.85em; line-height: 135%;) ul (list-style: none;) a (color: # 538e28; text-decoration: none;) a: hover (color: # 69b432) #wrapper (position: relative; border: 0px solid # d6d6d6; width: 1004px; height: 787px; background: url (img / bodycont.jpg) 50px 0px no-repeat; margin: 0 auto;) #copy (position: absolute; left: 330px; bottom: 0px; border: 0px solid # d6d6d6; font-size: 11px; color: #bbb;) #text (position: absolute; left: 0px; top: 150px; border: 0px solid # d6d6d6; width: 1004px; height: 157px; background: url (img / text.png) no-repeat; margin: 0 auto;) #vk (position: absolute; left: 370px; top: 300px; border: 0px solid # d6d6d6; width: 262px; height: 262px; opacity: 0.5; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; - webkit-transition: all 0.2s 0.01s ease-in; ) #vk: hover (opacity: 1.0;) # str1 (background: url (img / str1.png) no-repeat; position: absolute; left: 140px; top: 290px; border: 0px solid # d6d6d6; width: 262px ; height: 262px;) # str2 (background: url (img / str2.png) no-repeat; position: absolute; right: 100px; top: 450px; border: 0px solid # d6d6d6; width: 262px; height: 262px; ) .downloadButton (position: absolute; left: 373px; top: 580px; width: 253px; height: 98px; overflow: hidden; background: url ("img / dbuthov.png") no-repeat; cursor: default;). downloadButton.active (background: url ("img / dbut.png") no-repeat; width: 253px; height: 98px; cursor: pointer; -moz-transition: all 0.2s 0.01s ease-in; -o-transition : all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in;) .downloadButton.active: hover (opacity: 0.9;)

I hope you understand everything here. To begin with, I made a block with a size of 1004 by 787 pixels, in which I then placed all the objects that you see with absolute positioning. These are vKontakte and download buttons, as well as arrows and the inscriptions themselves.

If you don't understand something, ask in the comments.

Now let's go directly to the scripts.

Js

(function ($) (var win \u003d null; $ .fn.tweetAction \u003d function (options, callback) (// Default options for popup: options \u003d $ .extend ((url: window.location.href), options) ; return this.click (function (e) (if (win) (e.preventDefault (); return;) var width \u003d 550, height \u003d 350, top \u003d (window.screen.height - height) / 2, left \u003d (window.screen.width - width) / 2; var config \u003d ["scrollbars \u003d yes", "resizable \u003d yes", "toolbar \u003d no", "location \u003d yes", "width \u003d" + width, "height \u003d "+ height," left \u003d "+ left," top \u003d "+ top] .join (", "); // Pop-up window from API vKontakte: win \u003d window.open (" http://vkontakte.ru/share .php? "+ $. param (options)," TweetWindow ", config); (function checkWindow () (try (// need to put this code in a try / catch: if (! win || win.closed) (throw "Closed!";) else (setTimeout (checkWindow, 100);)) catch (e) (win \u003d null; callback ();))) (); e.preventDefault ();)););) ) (jQuery);

As you can see, here I have changed only this link http://twitter.com/intent/tweet? to this one http://vkontakte.ru/share.php ?. In other words, the link from Twitter was replaced with a VK link. Everything, there were no more changes.

Now let's see how I got the following script.

script.js

$ (document) .ready (function () (// Using our tweetAction plugin. For a complete list with supported // parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent $ (" #tweetLink "). tweetAction ((title:" How to make a "Tell your friends" system on VKontakte to download using JQuery and CSS ", url:" http: // site / ", description:" Here you can download a cool system "Tell friends "" in VKontakte to download, and also learn how it works "), function () (// When the window is closed: $ (". downloadButton ") .addClass (" active ") .attr (" href "," Direct link to file ");));));

Important

You need to edit this script for your site.

In field title: you need to enter the name of the post, which should be displayed in the contact.

In field description: you need to provide a description of the post.

That's all friends. I would like to thank the tutorialzine.com website for the idea and for the scripts. Well, now see you soon. :-)

Reading time: 5 minutes

Integrated email and social media marketing campaigns reach more audiences and increase ROI (return on investment). Learn how to use Mailigen's integrated marketing platform to reach customers via email and social media.

Why add Share to Friends social media buttons to email?

According to the 2014 research on marketing strategies in 2014 by digital asset management company WebDAM, there are three good reasons:

In 2013, 43% of sellers found buyers through LinkedIn

How to add social media buttons "Tell Friends" to an email message

Step 1

When you are in the fourth stage of creating an email campaign, drag the social sharing block to the place where you want to install these buttons.

Step 2

After that, a new window will open in which you can make all the necessary settings.

If you choose "Mailing list archive", the mailing recipient will be able to share the contents of the entire letter on social networks. The newsletter header will be used as introductory text.

If you choose "Other link", you can enter a link to any material that you want to share. For example, it might be a new article on your blog.

Then type the text that will be located next to the buttons, select the size of the buttons and the distance between them.

Facebook

Let's sum up

Hello to all readers of the site website

In this article I will tell you how to add buttons like "Like", "Class", "Tell Friends", etc. to your site.

I will also give you a hint on how to set comments on any page on your site.

There are several ways to install the aforementioned buttons on your site. Let's take a look at each of them:

Go to the site of the resource from which you want to have a button. Next, find the section for developers, and already there, following the instructions, generate the html code to be inserted into the site.
Take advantage of the wonderful service from Yandex and generate a special like panel.

Let's take a look at each service.

In contact with

Attention, you must be registered to install the button! The link to the section is located at the very bottom of the social. networks.

Now you have full freedom for a flight of fantasy. You can install any service you wish for yourself. I selected the "Like" button.

After clicking on the section of your choice, you will have a setup wizard.

Now a little about the setup wizard. Each developer has their own apiId. Be sure to check its presence in the window with the generated code.
Also, do not forget to include your website address at the top of the form.

All! Now it remains to shove half of the script into the head of our page, and the other half into the body, where you want your button to be.

You can check how it works on my website. At the top of the page.

Classmates and My World

And right here we customize the appearance of the button. And then copy the code. This code is not divided into two parts, you need to immediately insert it in the place where you want the button to be.

Try in action.

We go to visit Yandex :)

It is still easier here than we are in the methods that we considered earlier.
We just select the necessary services, display them and insert the resulting code into the site.