How to remove from contact and tell your friends. Social Media: I like to tell my friends! Why add “Tell Friends” social media buttons to your email?

IN Lately Every second (if not the first) customer, in the requirements for website development, asks to be sure to link it with social networks. “Social” buttons on a website are the number 1 tool for attracting the target audience, distributing 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 provide instructions for installing them in the site management system. Any CMS allows you to install them ( OS), the main thing is to fit them harmoniously into the design of your website.

What are the features and functions?

If your site is aimed at people who communicate on popular social networks. networks, for example, Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest, etc., and you want to cover them all, then in order not to install 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 what social network they use. Below we will look at the most popular services.

Buttons social networks Share Pluso

Hello to all site readers

In this article I will tell you how to add “Like”, “Class”, “Tell Friends”, etc. buttons to your website.

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

There are several ways to install the above buttons on your website. Let's look at each of them:

Go to the website of the resource from which you want to have a button. Next, find the section for developers, and there, following the instructions, generate html code for insertion into the site.

Use the wonderful service from Yandex and generate a special like panel.

Let's look at each service.

In contact with

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

Now you have complete freedom for flights of fancy. You can install any service you want. I selected the "Like" button.

After clicking on the section you selected, you will see a setup wizard.

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

All! Now all that remains is to put half of the script in the head of our page, and the other half in the body, where you want your button to be.

Here you can check how it works on my website. Top of the page.

Odnoklassniki and My World

And we set it up right here appearance buttons. And then we copy the code. This code is not divided into two parts; it must be immediately inserted into the place where you want the button to be.

Try it in action.

Let's visit Yandex :)

Everything here is even simpler than in the methods we looked at earlier.
Just choose necessary services, display them and paste the resulting code onto the site.

That's all? So simple?

Write in the comments if anything is unclear.

You might be interested:

	Hello dear reader, in this article we will look at: what is css how to connect styles to your page how to use css basic css "properties"	Every day (or maybe not every day) you turn on your computer, open your browser and actively use the Internet. Have you ever wondered how this network works? No? Then, let the author of the site explain how things are.

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 clients via email and social media.

Why add “Tell Friends” social media buttons to your email?

According to a 2014 study on marketing strategies in 2014 by digital asset management company WebDAM, there are three good reasons for this:

• In 2013, 43% of salespeople found buyers through LinkedIn

How to add “Tell Friends” social media buttons to an email message Step 1

When are you at stage four? creating an email mailings, drag the block for sharing on social networks to the place where you want to install these buttons.

Step 2

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

• If you select “Email archive”, the recipient of the mailing will be able to share the contents of the entire letter on social networks. The newsletter title will be used as introductory text.

• If you select "Other Link", you can enter a link to any content you want to share. For example, this could be a new article on your blog.

• Then enter 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 it up

About how social networks can help promote a website 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 “Like” buttons on your website from 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 think about placing such buttons on your site, because:

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

I think the compliments on “likes” are enough 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 page for connecting the widget to your site.

3. Customize the widget’s appearance to your taste and get the ready-made code:

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

"Like" from Facebook

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

2. Configure 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 button appearance:

4. Copy and paste the resulting code into the templates:

"Class!" from Odnoklassniki

And it’s even easier to get the “Class!” button. along with the “Like” button from social media. "MyMir" network. This is exactly what we will talk about next.

2 in 1: “Like” from MoyMir + “Class” from Odnoklassniki

1. Go to the page for setting up the “Like” and “Cool!” widgets. .

2. Customize the widget to your taste:

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

"+1" from Google+

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

2. Customize the button appearance:

3. Copy the received code and paste it into templates:

All in one: for lazy people!

If you are too lazy to set up all social networks separately, you can use ready-made solutions and scripts that provide the opportunity to place a universal button with sharing (the “tell friends” function) on all popular social networks. Please note that there is no strong connection to the site here, and such buttons are created more for convenience than for SEO effect.

Get button codes and paste them into your website.

Where to insert the received codes?

In order to place “like” buttons on your website, first you must decide on which pages of your website are the most profitable and best to place them on. There are the following options for placing buttons on the site:

• home page;
• all pages of the site;
• post/material page.

There is no need to reinvent the wheel and place buttons in forum posts, on contact information pages, and so on: such buttons will not be liked. Once you have decided where you will insert the buttons, log into the control panel of your site at your-site.ucoz.ru/admin and go to:

• page editor → manage site pages → edit the main page of the site(if you want to place button codes only on home page 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 part 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 using a specific example - placing the "This is interesting!" button. next to the entry in our official blog uCoz.

Greetings, dear blog readers. Due to numerous requests from readers, today we will do cool system“Share with friends” on VKontakte to download the file using JQuery and CSS.

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

I would also like to say that this system 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 worked out just fine :-)

Well, now let's move on to the system itself.

The “Tell Friends” system on VKontakte to download the file How does it work?

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

How to do it?

To begin with, I drew a simple template for a page with a button. You can see it in the example, and also use it on your website, it is available in source code. On this page will transfer the user so that he can perform the cherished operations of downloading the file.

Then I made up this template and this is what I got:

As you can see, the page is not at all large or complicated.

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

jquery.min.js is the JQuery library, if you already have it you don’t need to re-install it

jquery.vkAction.js - this script opens a VKontakte window.

script.js - but this script activates the “Download” button.

Now let's add a little CSS styles, in order to decorate our page a little.

CSS

Friends, all the pictures that are indicated in the styles can be found in the source code 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 that everything here is clear to you. To begin with, I made a block measuring 1004 by 787 pixels, in which I then placed all the objects that you see with absolute positioning. These are the VKontakte and download buttons, as well as the arrows and the inscriptions themselves.

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

Now let's move on directly to the scripts.

JS

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Standard parameters for the pop-up window: options = $.extend(( url:window.location.href ), options) ; return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550, height = 350, top = (window.screen.height - height)/2, left = (window.screen.width - width)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width,"height= "+height,"left="+left, "top="+top ].join(","); // Pop-up window from the VKontakte API: win = 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 = null; callback(); ) ))(); e.preventDefault(); )); ); ) )(jQuery);

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

Now let's see what my next script turned out to be.

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 Friends" system on VKontakte to download using JQuery and CSS", url: "http://site/", description: "Here you can download the cool "Tell" system friends"" on VKontakte to download, and also find out how it works" ),function())( // When the window closes: $(".downloadButton") .addClass("active") .attr("href","Direct link to file"); )); ));

Important

You need to edit this script for your site.

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

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

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