Do-it-yourself social buttons without third-party services. Own social buttons Services share on social networks

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 on his website. After all, now some people cannot imagine their lives without social networks, why deprive them of their ability 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 codes for the cleanest social network sharing buttons for your website.

It's no secret that almost all social button services leak information about your users wherever needed. Oh my God! Can't be! I just found out about this! - Congratulations! They need to use you somehow, for their work and efforts. They made 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 and some unique features, but I have no desire to present them separately. I've compiled a short list below.

List of the most popular social button services 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 install asynchronous loading of these scripts and optimize their work, but this is more than a couple of steps 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 do not like external links, and therefore, for the most paranoid webmasters, I have collected ready-made codes based on the goodshare.ru script, for which I 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:

Great display on any device (Yes, they are adaptive to any screen size)

Clean code - fast and secure site (only the script, CSS and Font are loaded, which are only on your server)

All share technologies of mobile messengers in one script (all kinds of Telegrams)

SEO friendly - no links

Does not contain pictures

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 of the Jquery code) the button script must 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.

Social networks are an excellent tool for promoting your website on the Internet. Through social networks, you can set up enormous traffic to your resource completely free of charge using a common approach - social network buttons. Social networking buttons on a website can significantly improve not only traffic, but also relationships with search engines, and accordingly again increase visitor traffic.

In this article I have collected all the possible ways to connect social networking buttons for a website, if you don’t find the one you need, then write in the comments, I’ll be sure to add it. What methods will be discussed:

First, a short excursion into the topic of what these same social network buttons for a website are and why they are needed.
An excellent video from the Pluso service will help you easily select, configure and implement buttons on absolutely any website:

At the moment, social networks play a huge role in the life of the average person. Almost every second person has at least one profile on social networks. For this reason, using the opportunities to promote websites on social networks is so relevant; this is a huge world of users and buyers.

I think since you are reading this article, then you know the approximate or exact purpose of the sharing buttons on the site, which means that we can move on to the main part of the article, namely adding icons.

Yandex social media buttons

The popular Russian-language search engine provides an excellent opportunity for social networking buttons on a website from Yandex. Everything here is painfully simple:

Now a few pictures for a better understanding, let’s choose which sites we will use:

We select the appearance, buttons with or without a counter, small or large, and copy the code to embed on the site:

Everything is extremely simple, it’s even easier than using plugins, well, at least it seems so to me.

I will not review all possible services, their essence is the same:

Choose social networks.

Change your appearance.

Copy the code.

Paste it on your website.

Now the list of services:

• http://share.pluso.ru/
• http://share42.com/ru
• https://uptolike.com/
• http://social-likes.js.org/ru/

The settings are almost identical, you can choose ones that are more understandable for you or wider functionality. Example of the first service:

I won’t describe it for a long time, there’s no need, everything is intuitive.

How to Install Social Media Buttons on a WordPress Website

Typically, link buttons are located under articles or on side side bars. To place social networking buttons on your website, we will need to install and configure the required plugin, or embed the code directly into the template. Let's look at plugins first, and then manually adding buttons. You can read how to install plugins.

For this case, we chose two convenient plugins, which are called Social Share Buttons and Jetpack.

The first more advanced plugin for adding social media buttons to your WordPress site is Jetpack.

This plugin was created and maintained by WordPress developers, which is why it is trusted more than others.

Then we click “Customize” and we are transferred to the social network settings menu.

In this block we select the buttons we need for social networks.

To select the ones we need, we just need to drag the social network buttons from the top field to the bottom, below we will see a visual display of the icons.

In the next menu we configure the button style and where they appear on our site.

After we have configured what we need, click “Save Changes” and our social networking buttons will appear under our posts on the site.

Installing social media buttons on a WordPress site. Social Share Buttons Settings.

So, let's not beat around the bush, but let's move straight to installing social networking buttons. We go to the settings and adding plugins menu. Through a search we find our proposed Social Share Buttons for WordPress.

Having installed and activated the plugin for adding social network icons, go to the new menu that appears from the console of our WordPress - Share Buttons.

As you can see, our menu is divided into three submenus, let’s look at and analyze each of them separately:

Main settings for displaying social media buttons on a WordPress site.

What can we configure here?

• We can upload the logo of our site, which will give our buttons some visual connection to our resource.
• A call text or something like that can be placed above the buttons.
• Automatic generation of meta data that will be linked to the published article on the social network.
• Positioning of social media buttons, left right center in relation to the article.
• Vertical button positions, bottom or top.

And the checkboxes for choosing where your buttons are displayed, from the “Home” position the checkbox has been removed because we don’t need buttons under each article announcement on the main page, you can also exclude articles on which button icons will not be displayed.

Share settings, choice of button style for social networks.

We choose the style we like and sort our icons at our discretion.

We set up with which social networks. networks you want to interact with and where to promote your product accordingly.

Setting padding between icons.

In this cycle of setting up buttons for interacting with social networks on a WordPress website, you need to deal with each button separately, if you are interested and need to figure out what’s what.

Once all the settings have been made, we can verify their usefulness and functionality on your WordPress site.

Which plugin to use is up to you, but I recommend Jetpack, it is updated frequently and is faster in operation.

Adding each social media button individually

Twitter also provides extensive settings for buttons. Link, screenshot below:

Not many people use it, but the button from mail ru can also be useful.

Looks like Odnoklassniki, why would that be 😆 .

Adding icons to profiles and groups on social networks on the site

Now I will show a small example of how you can add icons to social network profiles on a website. This method is suitable not only for WordPress, but also for any other site.

So what do we need:

• Decide on the future location of the icons;
• minimal knowledge of html and CSS, no matter how you look at it, but I won’t be able to predict all the options that you may need.
• ready-made pictures-icons of social networks, downloaded from the Internet. You can find a lot of them using the search.
• access to template files.

First of all, I’ll show you a small code for 2 social networks, VK and G+, as well as the FeedBurner feed icon. By analogy, you can add as many icons as you like.