We are on social networks buttons. Inserting a block of social buttons into the source code
If you are afraid that you are being watched on the Internet, turn off your computer.
Every webmaster, sooner or later, thinks about installing social buttons to your website. After all, now without social networks Some people have no idea about their lives, why deprive them of the opportunity to share your articles? But over time, many social button services lose their minds and do what they want with their codes, stuffing in everything that is not needed. It is for this paranoid idea that in this article you will find the codes of the most clean buttons sharing social networks for your website.It's no secret that almost all social button services leak information about your users wherever they need it. Oh God! Can't be! I just found out about this! - Congratulations! They need to use you somehow, for their work and efforts. They did good services, with great functionality, convenience and “quality”. All you have to do is choose what you need and put the code where you need it. That's all. And what is the benefit for them to do such maneuvers on the Internet for free? Right. No. So from time to time, every such office gets caught up in dumping data into some DMP.
I will not describe each of these services; they all have good functionality, some unique chips, but I have no desire to present them separately. I've compiled a short list below.
List of the most popular services social buttons for the site- share.pluso.ru
- uptolike.ru
- tech.yandex.ru/share
- share42.com
- sharethis.com
- pip.qip.ru
- www.addtoany.com
- www.po.st
- www.addthis.com
- sharebuttons.com
If you don’t have enough time, or you’re too lazy to do more than a couple of movements of the hands and phalanges of the fingers, then you can safely use these services. They are great for websites as well as visitors. But no one guarantees 100% security of user data, 100% operation of their DNS and loading of your sites. Those. If there is a failure on the social buttons servers, then your sites will load slower than usual. Yes, this happens rarely, but it does happen. Of course you can put asynchronous loading these scripts, optimize their work, but this is more than a couple of movements that I wrote about for the lazy.
Of course, there are social media codes on the Internet that are placed inside your website and do not leak information anywhere, but many of them contain external links to these same social networks. Webmasters don't like it external links and therefore, for the most paranoid webmasters, I have collected ready codes based on the goodshare.ru script, for which we actually thank them.
An example of installing this code is not for those who do not know the basics of HTML or CSS, but if you have the hands and a little time, you will succeed if you follow the instructions strictly. And so we went:
They look like this:
Six social networks are configured according to the standard: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus,Twitter. There are more than 30 of them in the script settings, but all of this can be installed separately if desired. The advantages of these buttons, as stated by the authors, with which I completely agree:
What does the script itself do, and why was this script needed in general? The script for these buttons contains all the APIs of all social networks, and the script makes any place on the site an active sharing block.
For example, you can place it on empty DIV blocks, or Span, or images, or empty links, and almost any element of the site can be turned into these buttons. In my example, I used a script for empty Divs.
Regarding the pictures: they are not here. The icons you see are taken from the font, they are just a symbol and nothing more.
You can download the archive of buttons at .Installing these buttons is very easy. There are only four files in the archive: Font, CSS, JS, and TXT.
1). You need to upload the font to any folder on your server; you can put it in the same place as your JS or CSS.
2). Then upload the JS to your server, and display it on your site using code anywhere, but I recommend at the very bottom of the page:
This script consists of two parts, the first is Jquery, the second is the button code itself. If you already have Jquery enabled on your site, then you can remove the first part of the code and thereby reduce the file size.
IMPORTANT: (for those who removed part Jquery code) the button script should be loaded after the Jquery script.
3). After installing the JS and font, you should add CSS to your site. Simply copy the entire contents of the soc.css file into one of your CSS plugins on the site.
IMPORTANT: In line 82 of the soc.css file, change the URL to your Font location!
4). After all this, copy the HTML code from the HTML.TXT file to your site where you want to see these wonderful buttons.
The structure of the script has the ability to install social network sharing counters, but you can read more in detail in their documentation on the website.
And you can check the operation of the script just below these lines, because it is the one installed on my blog.
Thank you for your attention, if you have any questions about installation, write comments.
I was with you, lazy Staurus.
Here the phrase “Who wants to buy software with an 8% discount on the promotion?” written by the user himself, and below is how the link to the site looks on the social network. Not very beautiful, right?
then the link on the social network will look like this:
Here “Today is the birthday of allsoft.ru - 8 years :)” is the text written by the user, the rest is information from meta tags. You can read more about these meta tags at Facebook page developers.facebook.com/docs/share, other social networks also understand them quite well.
How does this mechanism generally work:
1. When the user clicks the button, the widget transmits a link to the page to the social network server.
2. Social server The network itself accesses this link and reads information about the page - title, description, picture.
3. Social server network caches page information on its side and displays it on social network pages
How to send different descriptions for one page.
For example, when creating a promotional page on allsoft.ru with a humorous test, it was necessary to transmit different descriptions to social networks for the different number of points scored by the user in the test. Since the description of the page is received by the social network by clicking on the link, then for different descriptions Need different links. Additionally, Twitter only allows 140 characters, so it needs a separate, shorter description.
New Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( title: "Test result: The Dragon is almost your strong point! You can’t teach Dragonology yet, but on the right way!" ) ) ));
1. Here ya_share_normal is the id of the element on the page (), in which the block with social buttons will appear, link is the link, plus in serviceSpecific for Twitter we indicate the title, which differs from what is in the og:title meta tag.
Thus, for the task “3 different test results plus a common link to a page outside the test” we will have 4 tags:
and 4 blocks of JavaScript code as above.
How to change the title and description cached by the social network.
1. For Facebook there is the most best way: go to their debugger
Greetings! I sometimes wonder why there are social media buttons at the end of every post? What's the point? Maybe in fact there is no benefit to them, and their importance is exaggerated?
I once already wrote about placing buttons on blog pages. But didn't mention the benefits of this action, only emphasized that by saving the page in social bookmarks, the chances of speeding up indexing increase significantly.
Why are buttons needed?- The first one has already been mentioned - indexing search engines does not keep you waiting;
- Secondly, even if you save links on social networks, there will definitely be people who are curious. They’ll look and say, yeah, there’s something interesting here, they’ll follow the link and maybe become interested. In this way, you can find a small amount of traffic, and if the visitor also saves the link, but in his profile, then the traffic can increase noticeably. Subsequently, a visitor who drops in out of curiosity can develop into a potential regular reader, for example, by subscribing to RSS feed. Who knows, maybe in the future he will become a worthy partner, or vice versa;
- Thirdly, you, like most people, are probably struggling to get backlinks. And it is desirable that external sites link not only to home page, as often happens, but also on internal ones - search engines love this. And social network buttons provide us with this opportunity!
Another thing is that not all links from such sites are indexed. In Yandex, for example, if you return to social bookmarks, there are filters on some services. However, quite recently it began to index the largest social network of the Runet “VKontakte” - who knows, maybe in the future...
I have already drawn my conclusions and believe that social network buttons are needed on a blog, although with one BUT: they can only bring significant benefits at the stage of the blog’s formation. Promoted blogs are unlikely to need this. What do you think?
Here is a list of services that you can choose at your discretion by checking the box:
In the same window on the right, the generated code is displayed, depending on the previous choice, which will need to be inserted on the blog pages. For example, at the end of each post.
Yandex relatively recently began providing webmasters with this opportunity in the form of main buttons social services, but they can already be seen quite large quantities blogs. This once again speaks to the popularity of social networks.
From the author: Greetings. Today, social networks 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 select the services you need (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_content line. 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
Explore JavaScript basics on practical example on creating 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. It was named so probably because at the time of its creation there were 42 social service buttons, although at the moment there are 43.
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, RSS link and “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 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 there are a couple more normal services, where you can make social buttons, and there are 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 yours 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 to create a web application.
Hi all! Today we'll talk about the five most interesting services where you can quickly and easily choose the appearance of social buttons for your website and receive the corresponding code.
Check the boxes necessary points and choose the appearance of the block. The code is generated automatically.
Google +1Google +1 allows users to vote for your portal page and tell their friends about it on social media. Google network+. The more votes it gets, the better Google will treat it, so try to choose a larger size for it and place it in a visible place.
Customize the size and appearance of the button, select the Russian language. Advanced settings are unlikely to be useful to you. As you can see, getting social buttons from Yandex and Google is very easy and quick. Literally two mouse clicks and you're done!
AddThis.com suggests placing an orange Share button(or orange +) containing huge amount all kinds of social networks, bookmarks and services. The most popular social networks can be removed from the general list and placed separately next to Share. In addition, the service offers analytics and statistics on reader activity. To access it, you must register on addthis.com.
If you did everything correctly and the folder with the script is actually loaded into the root directory, then its address will be http://your_site.ru/share42/. Specify it in paragraph 3 of the “Installing the script on the site” section.
In the fourth step you are asked to select your site if you are using it. Depending on the item checked, the code below will change slightly.
Now you need to paste the code from step No. 5 onto your website. For horizontal block Social buttons are simple - wherever you insert them, they will appear there. With a floating vertical it is somewhat more complicated.
The last line of code should indicate the distance in pixels from the beginning of the page (150 in the example) and from the top of the visible area (20 in the example) to the floating panel.
If you don’t know where exactly to insert the code, the “scientific poke” method will always come to the rescue - sooner or later you will succeed, and the panel will appear in the right place.
The last thing to do is copy the styles from step #6 into your site's styles file - with a .css extension. Most often this file is called style.css.
And now the highlight of the program - social buttons with counters, which I use in present moment on your blog! They look simply gorgeous! Available in two sizes - small and large. By the way, people click on icons with counters much more willingly. I even noticed this myself.
For information on how to install them on your blog, see the “Important Information” section:
The first code is responsible for the functionality of the buttons; we insert it before the closing head tag, which in WordPress themes is located in the header.php template.
| < script src= "//yandex.st/share/cnt.share.js" > |
The second code is responsible for displaying them. We paste it into the place in the source code of the page where the icons should appear.
| < div class = "yashare-auto-init" data- yashareLink= "" data- yashareTitle= "" data- yashareDescription= "" data- yashareImage= "" data- yashareQuickServices= "yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data- yashareTheme= "counter" data- yashareType= "small" > |
Pay attention to the data-yashareType="small" attribute. Here you set the size of the icons: small - small, big - large. Everything ingenious is simple.
How to add social button code to a websiteWe've sorted out the script from Share42, now let's look at how best to add code for social buttons from other services to an Internet resource.
The button code consists of two parts:
1. A script enclosed between tags that look something like this:
And the code responsible for displaying social buttons can be inserted anywhere on the site.
That's all, thanks for your attention. Take care of yourself!