Own social buttons. Pluso - social media buttons

Review of domestic designers and scripts of social network buttons for websites, as well as foreign analogues. Brief, clear and visual.

Designers of social network buttons for a website

2. An easy way to get links to the site - QIP.RU
Place a button on the site and give visitors the opportunity to add their favorite site materials to bookmarks, blogs and social networks. Three steps: where to place the button (website, Blogger or WordPress), style of the buttons (ready-made options) and get the button.

3. Buttons for adding content to social networks - Pluso
Place buttons and give visitors the opportunity to share their favorite pages on social networks, as well as print, send email and add bookmarks.

4. Social activity service - UpToLike
Custom social media buttons with the ability to set color, shape, size and special effects. Additional features are the PicShare image sharing widget, the “Quote” function and the customized Following function.

5. One button! — for all bookmarking and social networking services
Select a view button. Where the button will be installed: website, Blogger or WordPress. Add a button.

Scripts for social networking buttons for a website

1. Beautiful social buttons for the site - goodshare.js
Display buttons on almost any device. Clean code. Brief documentation. SEO friendly.

2. Script for social bookmarking and networking buttons - Share42
Select the size and mark the icons of the services you want to use on the site. Select the options you want. See how it will look and/or download the finished script. Install the script on a WordPress, Drupal, etc. website.

3. Beautiful “like” buttons for social networks using jQuery - Social Likes
Script for “like” buttons with counters in the same style for social networks: Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ and Pinterest.

Foreign analogues of social networking buttons for a website

1. Share Buttons - AddThis
Sharing buttons will help you increase your site’s audience by attracting visitors from other resources and social networks through distributed content.

4. Social Sharing - Po.st
Get more benefits from sharing on social networks. The service will make it easier for visitors to share on social networks, which will increase organic traffic to the site.

5. Share Buttons for Any Website - AddToAny
Get the code for social media buttons for any website. Select the type and style of buttons, specify your email and other options, or choose one of the platforms: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad or FeedFlare. Get the button code.

at 8:00

Edit message

6 comments

Hello, dear readers of the blog site. You can, of course, use a plugin for this task, but It's not that hard to do it yourself, and there will be fewer of them, especially since I already have a lot of them working (see the article at the link provided). I took the social network icons from, which I already wrote about in some detail (I hope that Dimox will not object to this).

And I also considered it appropriate to send an email.

We create a sprite from buttons and insert the Html code into the site

After you have created all the necessary groups and pages on social networks, and therefore received all the necessary links, you can be puzzled by adding buttons to the site. You can, of course, in accordance with my post about, select a suitable icon for each social network and, if necessary, reduce its size to the required size in and.

But this is not the best option. Why? Well, because to load each social network image, a separate request will be made to your server. If you have a dozen icons, that means ten requests, which in any case will create additional load on the server and . Such wastefulness does not suit us, especially since it has been happening for a long time.

I decided not to reinvent the wheel (create a sprite), but used the one created by the Share42 constructor (a link to a description of working with it is given just above). In it you can select those social networks whose icons you will need, and along with the code you will receive a CSS sprite, i.e. physically one graphic file on which all the social network icons you need and subscriptions to the RSS feed (and Email, if required) will be placed.

I chose four main networks and a couple of icons for subscribing to news with an icon size of 24 by 24, so my sprite looks like this (though it’s still stuck in there, but it doesn’t matter):

Now we have all the ingredients - links to groups or social network pages and icons for displaying them on the site. All that remains is to prepare it all correctly, i.e. make up. My blog runs on WordPress, so I will paste the code with the buttons into one of the . In my case it is called sidebar.php. HTML code this turns out to be extremely simple:

Well, and the most interesting thing. With our help, we determine which area of our sprite will be displayed at this specific location as a background (in our case, this background is placed under the hyperlink). It takes a very long time to explain how this happens, so read the article linked to the link and everything will become clear (it also provides illustrative examples). If you’re lazy, then just experiment with the numbers, which, as you may have noticed, are divisible by 24 for a reason.

Yes, upload the sprite file via FTP to your website and indicate the path to it () in the background. That's it. If it doesn’t work out, read more carefully the materials on the links above, well, and if nothing works out at all, then describe your situation in the comments (in detail - to insert the code, remember to enclose it in PHP tags with square brackets).

Good luck to you! See you soon on the pages of the blog site

What is the advantage of own social buttons over services and plugins?

Of course, an indisputable factor is the loading speed of the site. So, for example, the PLUSO service, which I use on the blog, in the best case scenario adds 633 milliseconds to the load.

And in this block only the necessary images of social buttons are used, combined into . All styles are kept to a minimum. Plus a simple html framework.

The method I propose does not contain any external links. No, there are links, but they will all be like internal links. You can always use them if you wish. And then they will not be visible at all.

Very easy installation. It is enough to insert the html code of the block into the source code of the site page, upload the sprite, add css styles and the installation is complete. You just need to correct the path to the file with the button images.
This point is neither a plus nor a minus in the direction of your own block of social buttons. The trick is that its own block does not have a button press counter. And this can be considered a minus. But, on the other hand, it is possible to put on each button and you will know exactly how many times your visitors clicked on the buttons and shared your articles on social networks.
Statistics collected by services on your site will no longer be transferred to third parties.

Inserting a block of social buttons into the source code

We will consider the classic option, when the buttons are located after the article.

This can be done either by opening the file responsible for outputting articles (single.php) and adding a block of social buttons to the source code. Alternatively, this can be done through the theme's function file (functions.php).

I will show both options, and you choose the one that suits you.

Inserting a block into single.php source code

Warning: Before starting any actions, make a backup copy of the single.php file!

Open the WordPress admin panel - "Appearance" — "Editor" — "Single entry (single.php)".

In the source code, look for the place where the article output ends and the comments or page navigation begin. It is in this place that you will need to insert the html code for the block of social buttons.

Look carefully at the screenshot, focus on the codes responsible for displaying the articleand comments. And paste the code below.

Of course, there will be some differences in your templates, but I’m sure you’ll figure it out, there’s nothing complicated about it. And besides, you have a backup copy, there is nothing to be afraid of.

And here is the html code for the block of social buttons:

Explanations on the code: This is one DIV block with a class .share that contains links to social networks. The link opens in a separate pop-up window, this function onClick=window.open is responsible for this. Substituting a link to an article is done with this code. Each link has its own class, through which the button image is assigned.

This completes the insertion through the source code. And then you need to connect css styles.

Inserting a block into single.php source code via theme functions

Warning: before starting work, make a backup copy of your functions.php file!

In order to use this option, you need to open the functions.php file and add this code at the very end:

/* Inserting social buttons */ add_action("comments_template","soc_button"); function soc_button() ( ?> And be careful after inserting the code you should not have spaces or other characters. Or just closing the php code?>. Otherwise the site will stop working.

Explanations on the code: The place where social network buttons will be displayed is determined via the API key comments_template. This key determines the place before the comments. The social button code itself is enclosed in php opening and closing return tags. In the code I marked them in red. This is the whole trick of inserting html code into php, through the theme functions.

This completes the method; let’s move on to uploading images to the site.

Uploading button images to the server

For example, I prepared several sprites with images of social buttons. You can download them.

The sprite I'm using as an example is only 3.97 kb and contains only the necessary buttons. And since this is a sprite, then there is only one request to the database, and not for each button separately.

Download images or prepare your own and upload them to your website. I think there shouldn't be any problems with this. Next, a link to this sprite will be needed to design the buttons using css styles.

Connecting CSS styles

This step can, of course, be completed first, but I prefer to do all the complex technical work first, and only then start the nice little things with css styles.

So, open the style.css file, which is responsible for the design of your site. And insert these styles:

Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") no-repeat scroll -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png ") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png ") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test..png ") no-repeat scroll -546px 0px transparent ) .share a.digg ( background: url("http://test..png ") no-repeat scroll -588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") no-repeat scroll -630px 0px transparent; )

Explanations on the code: class.share defines the general appearance of the block, the size of each button, padding and sets a single background. And then each link has its own class and each such link is assigned the type of button through the background property. The buttons are made as a CSS sprite, and each button has a width and height of 40px, and a margin of 2px between them, which allows you to accurately determine the image for each button. That is, the first button is indicated as 0, and the second as 42, and so on. In the code, these values are indicated in orange. The link to the sprite is also highlighted in orange; you change it to the path to your sprite.

This completes the entire process of creating your own block of social buttons. You can safely proceed to checking.

I also have a video tutorial in which the whole process is shown clearly, and the operation of the buttons themselves is shown. Watch and implement on your websites and blogs.

That's it now. I coped with the task. I wish you all good luck and see you in new articles and video tutorials.

Good day, dear users of the site - website, in today's article I want to tell you about the wonderful service Share.Pluso.ru. This resource offers beautiful and functional social network buttons for your website.

Main advantages of the service Pluso - a very large number of social network buttons, quick setup and installation, beautiful design, extensive statistics, button code is loaded asynchronously.

Advantages and features of the service

There are many services, plugins (Socbuttons - a social networking plugin for Joomla) and other methods for adding social networking buttons to a website, what is different about the Pluso service and what are its advantages?

Huge selection of button design variations - more than 300 options
All you need to do to install buttons on your website is go to Pluso, select a button design and copy the code, no registration required
If you decide to register for the service, you will be able to view detailed statistics on the use of installed buttons.
The Pluso service offers a large number of social networks, as well as a print and bookmark button.

Customizing the appearance of social network buttons from the Pluso service

First of all, we go to the service designer - https://share.pluso.ru/, after which we proceed to setting up the button design.

1. Select the style of buttons and the number of social networks displayed. The selection is made by simply dragging and dropping between the “Selected networks” and “Available for selection” fields, and you can also change the order of the buttons.

2. In the “Preview” window you can clearly see what our buttons will look like. On the right there are additional settings:

Icon size - large, medium, small
Shape - square or round
Button layout - in one or two lines
Horizontal or vertical buttons
With or without counter (meaning common counter for buttons)
With or without background

3. After customizing the appearance of the buttons, copy the code and paste it on your website.

How to install social media buttons from Share.Pluso.ru on the Joomla website

There are several ways to paste the copied button code from Share Pluso onto the Joomla website:

Using the HTML code module
Using “Components” - “Banners”
Directly into the page code

Using the example, we will use the first method: in the admin panel, go to “Site” -> “General Settings” -> “Default Editor” - select “Editor without editor” - click “save and close”. Next, go to “Extension” -> “Module Manager” -> “Create” -> “HTML Code”. Paste the copied code into the “Text” field, set the title and position (other settings as desired), set “Published” and save. After saving, you can select another “Editor”.

Note: Another advantage of Pluso social media buttons is that they can be customized. This action will not lead to an improvement in the performance of your site, but still, some resources need non-zero button performance in order to increase their credibility in the eyes of the user.

How to increase the counter: it’s simple - after pressing any button, you or another user can cancel further actions, and the counter will increase. Although in the statistics on the Pluso website - the number of people who “shared the page” - will be correct.

Pluso - how to remove the plus icon

After we have selected the buttons necessary to display on our website, a “plus” icon is automatically added to them; when you hover or click on it, a window will appear with absolutely all available social network buttons:

If you need to hide this icon, then you need to add the following code to your style sheet (css):

Pluso - more ( display : none ! important ; )

This code blocks the display of the icon on the display of site users.

Statistics on buttons from the Pluso service

As I mentioned earlier, to obtain extended statistics on social network buttons, you need to register on the service http://share.pluso.ru.

Statistics are collected and displayed based on 4 criteria:

Activity - social activity of users on those pages on which the code with buttons from Pluso is located. Here you can view the number of actions shared by the page (real number of users), the percentage of users shared from the total number of users and other indicators.
Popular Services - A graph of the most popular services and other buttons among your users.
Popular pages - pages with the highest counter
Social Traffic - Social traffic pie chart.

A popular module for displaying VKontakte groups for your Joomla website.

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 more trusted 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 and drop social media buttons from the top field to the bottom, below we will see a visual display of icons.

In the next menu we configure button style And places of their withdrawal on our website.

After we have configured what we need, click “Save changes” and our social media buttons will appear under our posts on the website.

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

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

Installed and activated 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 website.

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 a published article on a 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 is 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