Own social buttons. Social network buttons Script of beautiful social network buttons

Doesn't bite? And they have already spent a lot of money on feeding visitors. And the buttons social networks installed for the site? It's clear! All the symptoms of the disease are obvious – the site is asocial. We will treat.

Why does a website need social media buttons?

The presence of social buttons on website pages is not only a mandatory attribute, or a fashion accessory. First of all, social buttons help the resource owner save money on website promotion. In this case, promotion occurs with the help of visitors. And the owner can only fill his site with quality content and wait for the influx of new users:

But these buttons are needed not only by website owners. Their placement is also important for the social networks themselves. Each of these buttons is a link leading to a social portal. And thanks to this exchange of links, a high level of user activity within the social networks themselves is maintained. This is why popular social networks provide sites with ready-made codes for their buttons.

What is a regular social button?

For example, let's take the script for the VKontakte social button. Her code:

This part of the code must be placed in the so-called “header” of the site page. This code specifies the address of the script that should be executed when the social button is clicked. Here is the second part of the code, which is responsible for displaying the button image:

The second piece of code needs to be placed in the part of the page where the button will be displayed:

The appearance of the button can be easily adjusted. To do this you need to go to a special section technical support on a social networking site. Here you can set the style of the button, according to which its code will be generated.

Easy Accommodation Options

There are specialized services that allow you to place buttons for all popular social networks on your website at once. This is much easier than inserting scripts for each of them separately. Let's look at the most popular of these services:

The location of the social buttons bar can be selected on several templates. In the free version of the account, a sliding sidebar. There is also free version plugin for WordPress. After registering on the service website, you are given access to statistics on clicks on social buttons.

• Share42 - clear and simple interface with the ability to fine-tune appearance social button panels. In this case, the setup process is accompanied step by step instructions with a description of the actions that need to be carried out. Therefore, the service is suitable even for inexperienced webmasters:

Another plus of this service is the generation of a social button panel script with support for several popular CMS.

Social Buttons and WordPress

Many plugins for group installation of social buttons have been created for popular CMSs. Let's look at an example of installing a plugin Social Share Buttons for WordPress.

The positive aspects of this extension are a completely Russian-language interface, ease of setup and “tailored” for popular Runet social networks:

Procedure for installing the social buttons plugin for WordPress.

1) Go to the administrative panel of the site. On the left, select the “Plugins” tab, “Add new”.
2) On the page " Install plugins"In the search field, enter the name of the extension and click on the "Search plugins" button:

3) Find the name in the search results required extension. Then click on the “Install” link:

4) After downloading the archive and installation, activate the plugin by clicking the appropriate link:

5) After activating it, a new section “Share Buttons" will appear in the left tool console:

The plugin settings consist of several points:

A few more proven plugins for WordPress:

• Fixed Social buttons – this plugin allows you to add a floating social panel to your site, which can be “stuck” on the top, bottom or side;
• Html Social share buttons – this plugin includes social buttons created exclusively with using css and html.

Social Buttons and Joomla

Many plugins have also been created for this engine to work with social buttons. Let's look at the extension installation process using SocButtons as an example. Features of this plugin:

• Supports all the most popular engine versions;
• Easy to set up;
• Appearance characteristics are set for each button separately;
• Lightweight installation package.

Procedure:

1) Go to the administrative part of the site on Joomla and select the icon “ Extension Manager».
2) Here we determine the source for downloading the extension:

3) After installing the extension, go to “ Plugin Manager"and just activate installed extension. To do this, click on the green icon at the top of the page:

4) To configure, click on the extension name in the list. In this plugin, display settings are set for each social button separately:

A few more proven extensions for Joomla:

• Social Bookmarking – this plugin exists in several versions. Each allows you to place the social panel in a specific position ( horizontally, vertically, or even make it floating);
• JL Like – this plugin does not load additional external scripts and allows you to keep statistics of votes from social networks.

Script or plugin?

Installing the plugin is the easiest and fastest option. Most often, after installing it, the entire site works properly. But everything can collapse immediately after updating the engine version to a newer one.

Due to mismatches between the engine and plugin versions, problems may arise in the operation of the site. Most often they are associated with incorrect display of any design elements. In our case, these are social network buttons. Then the understanding comes that sometimes it is better to use a naked script instead of a specialized plugin.

IN new version In a PHP engine, the structure of methods and functions changes very rarely. Therefore, the script easily “transfers” the process of such an update.

The code for social buttons can be obtained from one of the specialized services. Their overview is presented above. For example, let's take the Share42 service. It supports creating social buttons for popular engines. Procedure.

Hello, dear friends. Today's article will be devoted to creating a block of social buttons without services and plugins. This block will also include buttons that allow site visitors to print the page, send an article link to email and bookmark your article. Such buttons can be found on almost every website today. Only now they are implemented using services or plugins. And I'll show you how to do it yourself.

Services that I used on client sites and on my blog - and . These services make it quite easy to implement the task.

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

1. 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.

1. The method I propose does not contain any external link. 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.

1. 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.
2. 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.
3. 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 all actions, do backup copy 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. that's the trick html inserts code in php, through theme functions.

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

Uploading button images to the server

As an 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, indents 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, including the operation of the buttons themselves. 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.

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), button style ( ready-made options) and get a 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. site.

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 alone 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 got 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, do not forget to enclose it in PHP tags with square brackets).

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

You might be interested

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 your site’s performance, 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 receive 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 sharing from total number 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.