Links in Stories began to appear quite a long time ago, but only official accounts could use them. In May, it became possible to add links in advertising with placement in History, but these were all paid mechanisms. Today, people started sending me screenshots of how Instagram has gradually started allowing regular users to add active links to websites in their Stories.
How to add a link to your Instagram Story?This feature is not available to all Instagram accounts! Today links in Stories are only available:
Moreover, the link may not appear immediately after you have received 10,000 subscribers. Boosting bots up to 10k subscribers does not always work. Plus, it’s difficult to trick bots so that they don’t unsubscribe today, and if the number of account subscribers drops to 9,999 or less, the ability to attach a link will disappear.
To follow an active link from History, the user must “Swipe up”. Since people are not yet accustomed to such opportunities, I would recommend additionally focusing attention on the link with various links and calls to action. Well, you are grown-up guys, you understand what I’m talking about, who am I teaching here anyway.
I already wrote about the appearance of active links in Direct, but I did not post the information on the blog. Like any other update, it is only available to a select and random portion of users.
The latest updates make Instagram even more interesting for ecommerce and small businesses, the battle for subscribers will become even hotter. I only hope that Instagram will actively combat link spam in Direct.
I noted the importance of SMO (Social Media Optimization) in website promotion. Now let’s talk directly about how to do social optimization on your website, or rather, how to add social buttons popular networks to the site.
First, I’ll show you how it actually should look on the site. On many blogs and news sites, at the bottom of any article you can see something like this:
These are the social buttons, thanks to which SMO is achieved, and then social activity. This article is devoted to the question of where to get the code for these social networks. buttons and how to correctly install them on your website. Let's first consider installing Google+.
1. Add a Google+ button to the site
Let's start by getting the Facebook button code. To do this, visit this page: https://developers.facebook.com/docs/plugins/like-button. You should see the following picture:
At the top right you can see what the button will look like on your website. Let's look at the parameters that can be set:
1. URL to Like
This is an optional parameter. If you leave the field blank, each page will have its own individual like counter. If you enter a specific URL there, the counter will be single (likes are summed up from all pages of this site).
2. Send Button
Add or remove a button for sending messages. I recommend removing this button, because... Our goal is simply to put a “like” button, although perhaps you have completely different goals.
3.Layout Style
Button display style. Personally, I like standard best.
4. Width
The width of the button in pixels. I usually set no more than 100 pixels.
5.Verb to display
What will be displayed on the button: “I like” or “I recommend”. I usually choose the first option (the default) because it is more effective way motivate the user to like.
6.Color Scheme
Color range: either white or black.
7.Font
Just setting the font for the inscription "I like".
After setting the settings, click on the “get code” button and place it on the site. Common button code for facebook:
(function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); )(document, "script", "facebook-jssdk") ); 2.2. I like from VKontakteNow let’s look at how to get the “like” button code from VKontakte. To do this, go to the following page: https://vk.com/dev. You should see the following page:
First you will need to add a new site. To do this, select the option to connect a new site from the “site/application” drop-down menu:
After adding a new site, save it. Now select the desired site from the drop-down menu. This is followed by a small number of parameters: “button option”, “height”, “button name” - this is all customizable to your taste. At the end there will be code for the button:
VK.init ((apiId: 2872188, onlyWidgets: true )); VK.Widgets.Like ("vk_like", (type: "button") ); 3. Add a tweet button to the siteAs in previous cases, first go to the location where you received and configured the button.
From the author: Greetings. Today social media have developed to such a level that a total of more than 3 billion people are registered in them. This is potentially a very powerful audience, so today I will tell you how to add social media buttons to your website.
Adding to a WordPress siteI'll start with the fact that the most in a simple way If you have WordPress, it's easy to install some plugin for this matter. Which? For example, I used Juiz Social Post Sharer. In general, just enter the word social in the plugin search and see what’s there. The only advantage here is that you probably won't have to configure anything.
Yandex has also developed a page on which you can customize and install buttons for yourself. On this page you can choose necessary services(and there are about 25 of them). On the right you can select appearance block. These could be counters that will show how many times users clicked on the buttons. This, in turn, will help you track whether the material is useful to readers.
JavaScript. Quick start
Naturally, you don’t need to use all three options; one is better. Although I have seen sites where the block was both at the beginning and at the end of the page.
Now you need to find the file with the code that displays the articles. In wordpress, for example, it is usually called single.php or similar. So, if you need to put a block with buttons after the article, look for the line the_content. This is where you can paste the code. It will help you a lot if the developer of your template made comments in the code.
You can edit site files in several ways. For example, do this directly through the engine admin panel (appearance - editor). In this case, the code is not highlighted, so it is not so convenient to navigate. Another way is via ftp. Connect to the site using an FTP client, go to wp-content – themes. Here you need to find the template that is active in your at the moment. We go into it and find that same single.php or look for something similar in name.
In the code file itself, find the line the_content using search (Ctrl + F). Paste this code somewhere after it.
The comments are what stands out in this screenshot above green. As you can see, the developer has clearly indicated that the text of the article itself will be displayed in this place. This is great, just paste the code right after the article and get the desired result.
Buttons from Pluso
JavaScript. Quick start
Learn the basics of JavaScript with a hands-on example of how to create a web application.
You can choose the style of the buttons, customize their background, position and size. You can also choose icons with a built-in counter. Another advantage of Pluso buttons is their stunning appearance and the ability to integrate them into almost any design.
When everything is configured, we simply copy the code and paste it in the place where we want to see the corresponding block.
Another option is Share42If you didn’t like the previous options, there is another way to add social networking buttons to the site. This is a share42.com service. Named so probably because at the time of its creation there were 42 buttons social services, although there are currently 43 of them.
I won’t describe the process in detail, because everything is already laid out on the website in the form step by step instructions. You cannot change the design of these icons, only the size. However, they don't look bad.
The icons you need must be selected by clicking on them with the mouse. I would especially like to note the presence of such interesting opportunities, like adding to browser favorites, a link to RSS and a “Back to Top” button.
Next, you can choose the type of panel: horizontal or vertical? And if the second one is selected, then the number of buttons can be limited. I recommend leaving the encoding as UTF-8. You can also add an icon of the service itself to the set of buttons so that users from your page can go to it and install these buttons for themselves too.
Also, if you plan to add an rss icon, then you must indicate the address of your feed, and if you want to show the number of button clicks, the last two checkboxes must be checked.
Below there are 2 buttons. The first one lets you see what the social buttons you've configured will look like. Using the second, the script is downloaded. You need to upload it via ftp to your website in the root folder.
The next step is to specify the path to this folder on the service page. Often it is enough to replace site.com with yours domain name. That's it, all that remains is to insert the code, first selecting the cms on which the resource runs. You should already understand where to insert the code, I hope.
I have no doubt that there are a couple more normal services where you can make social buttons, and there are also just a ton of scripts and plugins that add them. Today I have listed for you the best, in my opinion, options.
Well, today we learned how to add buttons for social networks and services to your Internet project. Now your useful materials can be automatically distributed on social networks by your grateful readers. And that's all for me.
JavaScript. Quick start
Learn the basics of JavaScript with a hands-on example of how to create a web application.
Hello, dear readers of the blog site. As you probably already guessed from the title, we will talk about the so-called social buttons, which can very seriously help attract articles to your website, with a successful combination of circumstances and high quality the article itself, a large number of visitors from social networks and services.
Social signals are also taken into account search engines when ranking your site. A large number of shares to high-quality accounts on Twitter, Google+, Facebook (it is possible that VKontakte and other networks are also taken into account) can allow you to rise a certain number of steps higher and, perhaps, enter the Top and stay there if behavioral factors do not let you down.
In general, there are a lot of services that provide scripts (buttons) for sharing content on social networks on the Internet, but not all of them should be trusted (they can easily use you or in some other way for bad reasons). And they are capable of simply “hanging a site” if their code is not very well placed and the computing capabilities of their servers are not very powerful. Although there are decent options that are free from these shortcomings, and I have listed them at the end of this publication.
It is also possible to display on the buttons the number of shares to a particular social network. Moreover, all posts are taken into account, and not just those made using this block (data is loaded via API). True, not all social networks are supported (only facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), but most of the main ones. It's sad that Twitter was recently removed from this list because... it stopped providing this data via the API.
For example, here you can shorten titles for sharing on Twitter, because there is a limit on their length (read how to do this below), configure whether or not to display sharing counters, set menu opening directions with additional buttons social networks and much more. In general, dig around and take a look.
In general, in comparison with native sharing buttons, which offer to install social networks on the site (read about this below), the Yandex block wins in loading speed, compactness and ease of installation and configuration. For example, in the past my official Twitter button often did not load due to problems with their server, so the script made in Java did not load for a long time left menu my blog. It is possible that this problem has now been solved, but many scripts will always be worse than one in terms of optimizing site loading speed.
I think Yandex is unlikely to have problems with accessibility, since it is a well-earning commercial organization that is quite sensitive to its image. In addition, if you have, then you can track the statistics of clicks on these buttons, which can be useful.
In addition to the block with icons regular size you can make a block with counters, and Yandex also suggests adding a drop-down menu with additional social networks, which will be hidden under a spoiler located after displaying the required number of buttons for the main social networks (such as VKontakte, MoiMir, ):
If you want to add counters to the buttons in this block (with a drop-down menu), then simply insert another attribute into its code on the site (between the Div tags): data-counter="“ and that’s it. As I said, it couldn’t be simpler. You can use counters will also be added to the small buttons, which are discussed below:
Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
You can also replace all the icons with their smaller button thumbnails, which I personally found useful when inserting a block at the top of all articles on this blog:
In the first part, the opening and closing SCRIPT tags contain the path to the script, which will be loaded from the Yandex server, and the second part contains the insertion code itself, which will need to be placed in the place in your template where this block will be displayed.
How to insert social buttons from Yandex on a websiteTherefore, I insert the script calling code along with the Div block in the place where social media buttons need to be displayed. Well, so that its loading does not affect the loading speed of the main page, I, following the advice given in the Yandex documentation, added the async="async" attribute to it, thereby initiating its asynchronous loading of the script:
The problem may arise in finding among the many files of the engine of your site the one that is responsible for the formation of the very bottom part HTML code with the closing tag /BODY or the one that forms the Head. And also find a place in the theme files where you need to insert a piece of code in the Div tags (to place the buttons themselves).
In principle, both in WordPress and in Joomla, this is done in one of the files of the theme used. Because This blog runs on WordPress, so I’ll speak for it.
If you work with WordPress, then to insert the script calling code you will need to open the file footer.php for editing (you will find the closing Body tag or header.php (you will find the Head tags there) from the folder:
/wp-content/themes/name of the folder_with_theme_used/footer.php
Now all that remains is to insert the second part of the code into the right place in your website template or directly into the article social buttons Yandex, which is responsible for the location of the block with buttons on the site pages:
By the way, I’ll make a reservation once again: if you want to remove any button from this block, you don’t have to go to the constructor on the Yandex website again. You can simply remove its entry from this list (along with the comma coming after it, for example, “vkontakte,”). Well, you understand...
Well, you can also change the positioning of buttons inside the block using CSS.
Li.ya-share2__item (background:none!important;padding:0 7px 0 7px!important;)
Because I use adaptive under mobile devices layout, then for devices with low screen resolution I added a similar line, where I set slightly smaller indents, but these are details:
Li.ya-share2__item (padding:0 3px 0 3px!important;)
In general, something like this in the aspect that concerns my blog on WordPress. In Joomla, to insert this block, it will probably be easiest to use the Custom Html Code module, placing it in the template position somewhere immediately below the article text.
Official social media buttonsMany social networks themselves provide everyone with the opportunity to download the button code, and often you can even customize its appearance and functionality. For example, you can configure and receive the script code for sharing a post in .
As you can see, there are quite a lot of settings, and in addition to the appearance of the VKontakte button, you can also customize the display of a counter showing the number of shares.
You will be able to get a Facebook button. It is very flexibly customized to suit your needs, and do not be confused by the English inscriptions on it, because when you place its code on your website, the inscriptions will automatically be translated into Russian.
It is better not to insert anything into the URL field, then the page on which this code is located will be shared.
It will look something like this:
It will look something like this:
And, of course, I can’t help but mention the official Twitter button, which appeared relatively recently. Its constructor is located. Naturally, it provides the ability to count the number of retweets and you will have the opportunity to set its appearance:
I then slightly modernized the resulting code according to the principle described above, so that my long titles would be cut off and would not create additional problems for users when sharing.
Other options for getting social media buttons for your websiteAs I already said, there are a lot of all kinds of online services where you can take a script for social network buttons for free and put it on your website. They all pursue different goals: “from the heart” (as in the case of the Dimoxa service), to collect data necessary for the operation of other services (as in the case of ApTuLike) or for profit (viruses and other illegal fraud with the traffic you have on your site) . There are also simply paid solutions, for example, like the plugin mentioned below.
It's hard to say what to choose from this variety. I’ll say a few words about what I had a chance to try myself, and what I’ve already written about before.
In general, look, compare and choose for yourself.
Good luck to you! See you soon on the pages of the blog site
You might be interested
We create buttons for adding to social networks and bookmarks for a WordPress blog (without plugins and scripts) Likely - stand-alone social buttons for the site 
Buttons for mobile sites from Uptolike + the ability to share links in messengers UpToLike - a social button constructor for your site with extended functionality 
Uptolike Share Buttons - Free Plugin for Adding Social Media Buttons to WordPress 
uSocial - review of a new social buttons service for your website 
Attracting traffic from visitors to your website using SMO methods (forums, social networks, Subscribe groups) How to add to your website a block with buttons leading to your pages or groups on social networks, as well as to an RSS feed 
Google+1 and I like from Vkontakte and Facebook - how to add like buttons to your website
Before delving into coding, let's take a look around and pay attention to the resources that the global web already provides us with. By the way, there are a lot of them, but we will look at the two most popular ones.
Another service worthy of our attention is the same simple constructor, only there are many more buttons with services and networks, some of which, I must admit, I saw for the first time. The main difference from Yandex.Technologies is that we receive a fully generated script that will be processed not in the cloud, but directly on our server.
It would seem that with such wonderful solutions, no one would even think of “reinventing the wheel”? But no, a script written by someone is only as good as we are too lazy to bother with it. Of course, it will work properly and perform its functions, but it is a universal solution written for the general mass of sites, i.e. it does not take into account our personal little needs and conventions.
Firstly: the design of the buttons is practically iron. Yes, it is recognizable and provided by social networks themselves, but it just doesn’t meet our needs. Well, the button has rounded edges, and the design of our site requires the button to be square, what should we do? – Take the sprite and redraw it! Anyone who has tried it knows that it is a thankless task: replacing one button is fraught with five or six attempts to “correctly” place it on the sprite. And this is only replacing one/several buttons, but what if the site is in a Gothic style and all the buttons need to be dark?
Secondly: there is no doubt about the reliability of Yandex, but the buttons, unlike the metric counter, for some reason are difficult to load, and often there is a visible lag from the main content of the page. This is especially noticeable with a good high-speed connection, when the page crashes almost instantly, and you have several blocks with buttons.
Thirdly: for the test, generate a script on share24 - it is large. Are all of the provided lines of code really necessary for us? - Don't think.
Now let's move on to writing the script itself; it will be divided into three parts: HTML, CSS and, in fact, the code itself, written in JavaScript. Additionally, I will use the jQuery library for convenience.
We include all the necessary files:
Now we add the script to the share.js file, it will look like this:
Var share = ( twitter: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIComponent(data.text); url += "&url=" + encodeURIComponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIComponent(data.url); share.popup(url); return false; ), vk: function($this)( var data = share.data($this); if(data)( var url = "http://vkontakte.ru/ share.php?"; url += "url=" + encodeURIComponent(data.url); url += "&title=" + encodeURIComponent(data.title); url +="&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 a wrapper with the share class, followed by a div with the data-share-data attribute, which was mentioned above. The line is formed from four parameters with their own values.
- url – the address we are sharing;
- img – image, if it is not needed, specify an empty line;
- title – page title;
- text – the description we need.
Inside the div are the buttons themselves with an onclick event attached to them. When clicked, one of the methods described above will be called.
All that remains is to give the buttons a human look 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( background-image: url(share.png); margin-left: 7px; border-radius: 3px; height: 24px; width: 24px; float: left; cursor: pointer; .share .twitter( background-color: #00aced; background-position: 0 -61px; ) ) .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 the CSS button, the result will look like:
This completes the writing of the script, in the example I used only three social networks, if you need to connect others, it will not be difficult. To do this, you will need to add a new method to the share object, not forgetting to also add additional HTML and CSS. Links for reposting on social networks can be obtained in two ways:
- Use the social network API, which does not always help;
- Pick it up from a similar service using firebug or another web developer tool.
