Share with friends from Yandex. Social buttons Share - write ourselves add to Share 5 more

From the author: Greetings. Today, social networks have developed to such a level that more than 3 billion people are registered in them. Potentially it is a very powerful audience, so today I will tell you how to add buttons of social networks to the site.

Adding to WordPress website

Will start with the fact that the most simple wayIf you have WordPress, it is easy to install some plugin for this business. What? For example, I used Juiz Social Post Sharer. In general, simply enter the word Social word in the search for plug-ins and look at what is there. The advantage is here only that you probably do not have to configure anything.

Yandex also developed a page where you can configure and put the buttons. On this page you can choose required services (and about 25 of them). On the right you can choose appearance Block. It can be counters that will show how many times the users have been pressed. This, in turn, will help you track whether the material is useful to readers.

Javascript. Fast start

Naturally, you do not need to use all three options, some one is better. Although I saw sites where the block was and at the beginning, and at the end of the page.

Now you need to find a file with a code that displays articles. In WordPress, for example, it is commonly called single.php or in a similar way. So, if you need to put a block with buttons after the article, looking for the line the_content. It is behind it that can be inserted. You will help you, if the developer of your template made comments in the code.

Edit Site files can be some ways. For example, to do it directly through the exchanger of the engine (appearance - editor). In this case, the code is not highlighted, so it is not so convenient to orient it. Another method - via FTP. Connect to the site using the FTP client, go to WP-CONTENT - Themes. Here you need to find the template that is active in you in this moment. We go to it and find the same single.php or we are looking for something similar by the title.

In the code file itself, find the line the_content by searching (Ctrl + F). Insert somewhere after it this code.

Comments It is that on this screenshot above is highlighted in green. As you can see, the developer clearly indicated that the text of the article itself is displayed in this place. This is great, just insert the code immediately after the article and get the desired result.

Buttons from Pluso.

Javascript. Fast start

Explore the foundations of JavaScript on practical example on creating a web application

You can choose the style of buttons, customize their background, position and size. You can also select icons with a built-in meter. And another advantage of the buttons from Pluso is their amazing appearance and the ability to embed them in almost any design.

When everything is configured, simply copy the code and insert it in the place where we want to see the corresponding block.

Another option - Share42

If the previous options did not like something, there is another way how to put the buttons of social networks to the site. This is a SHARE42.com service. Named, probably because at the time of creation there were 42 buttons of social services, although they are 43 at the moment.

I will not describe the process in detail, because everything is already decorated on the site as step by step instructions. You can not change these icons design, but only size. However, they look thumbs up.

The icons you need to choose by clicking on them with the mouse. Separately, I want to note the presence of such interesting features, as adding to your Favorite browser, link to RSS and the button "Up".

Next, you can choose the panel type: horizontal or vertical? And if the second is selected, the number of buttons can be limited. I recommend the encoding to leave UTF-8. You can also add the icon of the service itself into the set of buttons so that users from your page can switch to it and install these buttons too.

Also, if you plan to add an RSS icon, you must specify the address of your FIDDA, and if you want to show the number of clicks on the buttons, two recent ticks must be marked.

Below are 2 buttons. The first allows you to look at how the social buttons you set up will look. Using the second download script. It needs to be downloaded via FTP to your site in root folder.

The next step, specify the path to this folder on the service page. Often, it is enough to replace site.com to your domain name. Everything remains to insert the code by selecting CMS before this, which runs the resource. Where to insert the code you must understand, I hope.

I have no doubt that there is still a couple of normal services, where you can make social buttons, and there is simply a lot of scripts and plug-ins that add them. Today I listed you the best, in my opinion, options.

Well, today we learned to add buttons to social networks and services to your Internet project. Now yours useful materials Can be automatically distributed on social networks your grateful readers. And I have everything on it.

Javascript. Fast start

Explore the basics of JavaScript on a practical example of creating a web application

FriendFeed - information aggregator collected from social networks, blogs, microblogging, which works in real time. With FriendFeed, you can learn and discuss interesting materials that will find your friends on the Internet!

SurfingBird is a service that offers the most interesting content on the Internet. To do this, you need to register, specify your interests, and in turn this service It will offer interesting photos, video, notes depending on the specified interests. An interesting service, it will be necessary to get acquainted in more detail with him!

Dear readers of my blog, have any accounts in the last four services presented? I was interested in me, I will definitely register!

Personally, I chose the first option called counters. It will show the number of recommendations of the post, in other words, how many times they shared a reference to the post. After selecting the display option, you will need to copy the code that will be required to be placed on the blog.

In my case (in view of the fact that I chose the display "Counters") the code turned out to be like this:

Content - this is the text of the post.

But if you simply arrange the proposed code, then the following display will be:

Yashare-AUTO-INIT (
Margin: 10px auto;
TEXT-ALIGN: CENTER;
}

Where yashare-auto-init is a class that was added with the code. Margin: 10px auto - indent horizontal and vertical, respectively, and Text-Align: Center is the location of the object in the center.

The development of the blog is gaining momentum, the appearance is changing and improved, the blog is gradually filled with interesting content, I advise you to subscribe to the blog to keep abreast of all changes and blog updates.

Before delving into coding, let's look at and pay attention to the resources that we already provide global web. By the way, we will consider the two most popular.

Another service worthy of our attention -, is the same simple constructor, only more buttons with services and networks are much larger, some of which, confess, I saw for the first time. The main difference from Yandex.Technologies - we get a fully generated script that will be worked out not cloudy, but directly on our server.

It would seem that if there is such wonderful solutions to anyone and in the head will not be "to invent a bicycle" again? But no, written by someone the script is good smoothly so as far as we are too lazy to bother above it. Of course, it will work regularly and perform its functions, but is a universal solution written for the total mass of sites, i.e. It does not take into account our personal little needs and conventions.

First: the design of the buttons is actually iron. Yes, it is recognizable and provided by the social networks themselves, but only our needs does not correspond to. Well, the area of \u200b\u200bthe edge is rounded, and the design of our site requires that the button is square, what to do? - Take sprite and redraw! Who tried, he knows - the case is ungrateful: the replacement of one button is fraught with five-six samples "correctly" to place it on spray. And this is just a replacement of one / several buttons, and if the site in the Gothic style and all the buttons are needed dark?

Secondly: in the reliability of Yandex, it is not necessary to doubt, but the buttons, unlike the meter counter, for some reason it is loaded hard, and it does not rarely resemble them from the main content of the page. This is especially noticeable with a good high-speed connection when the page flies actually instantly, and you have several blocks with buttons.

Thirdly: For the test, generate the script on Share24 - it is big. Is everything from the lines provided that we need so much? - I do not think.

Now let's turn to the writing script itself, it will share for three parts: HTML, CSS and, in fact, the code itself written in JavaScript. Additionally, I will be used to convenience the jQuery library.

Connect all the necessary files:

Now add the script to the Share.js file, it will look like this image:

VAR Share \u003d (Twitter: Function ($ this) (VAR Data \u003d Share.data ($ this); if (Data) (var url \u003d "http://twitter.com/share?"; URL + \u003d "Text \u003d "+ Encodeuricomponent (data.text); url + \u003d" & url \u003d "+ encodeuricomponent (data.url); url + \u003d" & hashtags \u003d "+" "; URL + \u003d" & CountURL \u003d "+ Encodeuricomponent (data.url); Share.popup (URL);); Return false;), VK: Function ($ this) (VAR Data \u003d Share.data ($ this); if (Data) (var url \u003d "http://vkontakte.ru/ Share.php? "; URL + \u003d" URL \u003d "+ Encodeuricomponent (data.url); url + \u003d" & title \u003d "(! Lang: + Encodeuricomponent (Data.title); url + \u003d"&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Add markup to the page:

The structure is quite simple, namely the wrapper with the Share class, follows the DIV with the attribute of the Data-Share-Data, which was mentioned above. The string is formed from four parameters with its values.

• uRL - address which we share;
• img - picture, if it is not needed specifying an empty string;
• title - page title;
• text - the description you need.

Inside the div is the buttons yourself with an onClick event on them. Click will be called one of the methods described above.

It remains only to give the Human View buttons and add CSS:

Share (Background-Color: #ececec; Display: inline-block; padding: 7px 5px;) .Share div: After (Content: "; Display: Block; Clear: Both; Height: 0;) .Share div: first -Child (Margin-left: 0;) .Share .twitter, .Share .vk, .Share .Facebook (Share.png); Margin-Left: 7px; Border-Radius: 3px; Height: 24px; width: 24px; float: left; cursor: pointer;) .Share .twitter (Background-Color: # 00Ced; Background-position: 0 -61px;) .Share .twitter: Hover (Background-color: # 008abe; ) .Share .vk (background-color: # 48729e; Background-position: 0 -32px;) .Share .vk: Hover (Background-color: # 3A5B7E;) .Share .Facebook (background-color: # 3c5a98; background -Position: 0 0;) .Share .Facebook: Hover (Background-Color: # 30487a;)

As a result, after adding CSS buttons to get a type:

On this writing of the script, in the example, I used only three social networks, if you need to connect others, it will not be much difficulty. To do this, add a new method to the Share object, not forgetting to register also additionally HTML and CSS. Links for which the repost occurs in the social network can be obtained in two ways:

• Take advantage of the social network API, which does not always help;
• To identify from a similar service using the Firebug or another tool for the web developer.

In contact with

It's not so much in expanding the list of what can be transmitted to anyone. Currently, it covers almost all types of data interested in the average owner iPhone. or iPad. That is, except email, pictures, videos and music, you can transmit navigation coordinates, contact lists and addresses, references to thematic resources and specific files In the "clouds", short multimedia notes created by means of messengers and a lot more. It is correct to formulate the thought so - when it appears new serviceusing your data format, then it has to highlight a place in the system, but so far everything is balanced.

However, Apple understand that the world of iOS applications will certainly develop and therefore the occurrence of such non-standard beginners is the question of time. Probably, Kupertino decided to get rid of additional loads and instruct the authors of the applications themselves to work on the implementation of the functions of the "Sharing". A stiff requirement to conclude an agreement with Apple remained in the past, the APIs were taken open - dare, enthusiasts - innovators. It is potentially a promising direction of work for the creators of socially oriented programs, but also responsibility for the result is also their concern.

Exception is made only for own products of the company, such as Mail, Messages, General access To photo. - They will always remain active. However, as it is now about Bette, this and other innovations can still change by September.

The Stories tool in Instagram appeared relatively recently, but already managed to conquer recognition as among bloggers and among. Storiz are located on top, above the main ribbon, so they are viewed more often. Published link in Instagram history allows you to send a user to a website or another page in social network. Thanks to this you can collect additional traffic To the site or in your blog, and also - allocate the story against the background of others.

2 ways add a link in history Instagram

After a certain number of subscribers (more than 10K)

The function of adding a reference to Stories used to be available verified or "elected" - random - business accounts. Today, all business accounts whose subscribers exceed 10,000 people can add on the social network.

To add a link, follow a simple algorithm:

1. Click on the add icon new story - It is located at the top, on the left side of the screen, next to the published user stories.
2. Add a photo or video from the gallery, or take a snapshot or short video using the camera.
3. Click on the Links icon in the upper right corner. You will open the field for editing or adding a link.

Remember that many users do not know how to move on the link in published history. Push them to the target action - add the call in a photo or video. Skip on the link to learn something interesting. For example, write "Spend up to learn more" or "Click" More "to go to the store site."

When setting up advertising

Adding a link when setting up advertising is a more time-consuming, but also more efficient process. To configure advertising, you must first go to the configit of the Instagram business account on Facebook, and click on "Create Advertising". Either immediately go to Facebook advertising manager.

IN personal Cabinet Click "Create an Ad" and follow a simple action algorithm.

Select the purpose of advertising. For references in stories, 6 goals are available, including "traffic", "installing an application", "conversion". Select the appropriate target depending on the format of the business account and the promotable link.

Select the purpose of the campaign.Here you can choose clicks or viewing. That is, you will pay either per click on the link, or for visiting the page when the user will rain its downloads.

Set up account. If you have not created an advertisement on Facebook before, you will be offered to specify the time zone, country and currency of the advertising office.

Adjust the audience. Choose a place where Link leads - on the site, application or messenger. Then specify the desired parameters target audience: Gender, age, interests and others.

Choose advertising space. By default, the ad will show on three sites. If you only need instagram stories, click on "Edit Placements" and leave a tick on "Instagram", "Stories".

Install the budget and select Bar Strategy. You can set the daily budget limit or amount to the entire campaign, and the system itself will uniformly distribute it. Then select Bar Strategy - by default, the system selects the lowest price. If you want, you can configure it manually, for this, click on the "Install the limit". What it lower is the less chance that the ad will show.

Choose advertising format. You can select one image or one video. From the point of view of marketing it is better to use video - despite the fact that advertising has a time limit of 15 seconds, it allows you to better convey the idea to users and add a more prominent appeal to action.

After filling the necessary fields, you will see a preview. On this page, you can download images or rollers to declare, add a call to action, add and change the URL. After saving, your ad will begin to show CA for the selected parameters and the established budget.

And you can send a link to Direct

Direct in Instagram looks like a system of personal messages in others social networks. If you send one or a few users to some post, they will see it only - it will not be published in the tape.

Today, the function of adding a link to messages in Instagram is available to absolutely everything. To add a link, just to go to the directory, select a chat with the user who want to send it, and enter the link manually or insert a pre-copied URL. The link will be active, and the advanced snippet with a title picture and the page description will be sent automatically.

Let's summarize: how to publish a link to instagram

• Add to history - Available to those who have more than 10,000 subscribers.
• Add to advertising Stories - Available to everyone, but requires cash costs.
• Send to direct.