Social media buttons using CSS sprites (image optimization). CSS sprites using the example of installing “subscribe to updates” link buttons on a blog. Square icons of social networks

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?

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. Just paste the html code of the block into source site pages, upload the sprite, add css styles and 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 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 output of the article ends and the comments or page navigation. 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 the buttons will be displayed social networks, defined 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 complete all the difficult steps first. technical work, and only then proceed to the pleasant 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, 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.

Online resources for creating CSS sprites, for example http://spritepad.wearekiss.com/ or http://www.spritecow.com/ . However, you can easily find those that suit you. Here I will use ready-made CSS sprites. Here they are:

HTML structure

A common div container contains div containers social buttons with transition.

CSS structure for using sprites

We indicate background-position: 0 0px;. Note that I set the opacity to 0.6, a little transparency. When hovering opacity: 1;, all this happens in (0.5s) transition: opacity 0.5s;. Image position changed on hover background-position: 0 -51px;.

Using this technique you can significantly optimize images(fewer calls to the server).

P.S. If you have any questions, write!

Welcome to my blog. Today I would like to show you step by step how you can create social media buttons using html and css. Let's start from complete zero and in the end we will get the desired result. Forward!

Markup and basic styles

I simply put a hash mark in the link addresses. Of course, when used in reality, each link must have a working address to which the transition will take place.

Let's add these styles for now:

Share (
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
}
.share i (
margin-right: 15px;
color: black;
text-transform: uppercase;
}

We slightly designed the container for links (sizes, indents, background) and the inscription.

Designing icons

Social (
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
}

With the display: inline-block property, we made sure that our links were converted into block elements, but at the same time retained the ability to stand in a row. Next, we indicate the dimensions and indentation on the right so that the blocks do not fit flush against each other.

Okay, but why do we need vertical-align: middle ? This property will align the text in the container so that it is exactly centered vertically. We will also give our cells some background so that we can visually see them already at this stage. The result was a blank. It's time to finally add icons.

Final stage

All we have to do is place our own icon in each of the prepared blocks, which would identify this or that social network. net. To do this, I suggest using the most correct method - connecting a sprite image and using background positioning to put everything in its place.

In short, we need such an image. For me it's about 120 to 40.

We add the following rules to the CSS styles:

Social-vk(
background: url(icon.png);
}
.social-fb(
background: url(icon.png) -40px 0;
}
.social-tw(
background: url(icon.png) -78px 0;
}

The output is a fully designed block with icons.

Do you understand how we got this? If not, then I'll explain. Each link block has a size of 40 by 40. Accordingly, when we give it a background image of 120 by 40, the block simply cannot contain it completely, and as a result it contains as much as it can.

By default, in this case, the first 40 pixels of the width and height of the background image will be taken, but everything is fine with the height - the image completely fits into the blocks in height. Accordingly, all that remains is to specify the background position for the Facebook and Twitter icons.

By writing in the background like this: background: url(icon.png) -40px 0 , we explicitly indicate that for the social-fb block, the background image should be displayed exactly from the specified position - forty pixels in width to the left and in height without offset, because it's not needed. It's that simple, really.

What else can you do?

Maybe you would like to add some additional design to the social network block. There are several ideas. First, you can add rounded corners to all icons.

Social(
Border-radius: 5px;
}

Secondly, you can add a frame to them.

Border: 3px solid purple;

In terms of design, purple will suit us in this case, it seems to me. You can also round the corners of the link container itself.

Again, there are many design options. And, of course, you can easily change the colors. In this article I offer you this design option, but now you can easily make it your own: yellow, green, red and any other icons.

Bottom line

As you can see, even on your own you can very easily add social buttons to your site, and html and css will help us with this. At least visually, we can design our icons as needed for the design of each specific site.

This concludes today’s article-lesson. Next time we'll create something else using CSS

We continue to socialize our sites. Readers often find it convenient to receive blog updates directly to their favorite social network. Let's give them this opportunity. To do this, you need to register on these same social networks. You can create a profile for the administration or author of the site, or you can create a public page for a company or project. In the future, you will need to regularly publish news and site updates to your profile news feeds so that your subscribers can get acquainted with them. By the way, this is convenient to do using the ones we installed earlier. We will design links to social profiles using the CSS sprite technique or CSS sprites.

What are CSS sprites and sprites in general?

Sprites- a set of small pictures that are combined into one. This is done in order not to download 10-20 small, lightweight images from the server to the user’s computer, but to send them in one stream, combining them into one file. Sprites in web design came from the gaming industry, where they were used to create animated 2D graphics, such as shooting monsters, etc.

In website design, a technique is also used in which various icons are combined into one file, for example like this:

As you can see in this example, not only social network icons were collected into one file, but also other design elements, such as arrows, “like” buttons, etc. But combining absolutely all the graphics that are used on the site into one sprite is not entirely correct. It is better to divide elements into groups and load only those necessary on a certain type of page.

In this picture I tried to schematically show the principle of operation of CSS sprites. If the block is larger than the background image, it is placed in the upper left corner by default if no-repeat is specified in the css styles. But we can change the position of the background image relative to the upper left corner of the block. This is especially useful if the block, for example, is equal in size to a separate icon. We have seven icons, each sized 32x32. They are located horizontally, so we don’t need to change the position of the background vertically. We set the position of the background image -32 px, we get an icon in the block, -64 px - a Facebook icon, etc.

How to make link buttons to profiles on social networks?

After registering in the relevant communities and in, I received links to profiles, the address of my RSS feed and a link to a subscription form to receive updates by mail. I then combined them into the following code and pasted it into a text widget in the WordPress admin panel:

The link anchor in this code uses the tag : . This is the block in which the required icon is displayed. The background image offset is set in the style file style.css via property background-position:

/* Buttons to subscribe to updates*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( cursor: pointer; color: #1E90FF; text-decoration: none; font-size: 100%; ) .spmenu span ( display: inline-block; width: 32px; height: 32px; background: url("images/icons.png" ) no-repeat; ) .spmenu span.sprite_gplus (background-position: 0px 0px;) .spmenu span.sprite_twitter (background-position: -32px 0px;) .spmenu span.sprite_fbook (background-position: -64px 0px;) .spmenu span.sprite_rss (background-position: -96px 0px;) .spmenu span.sprite_email (background-position: -128px 0px;)

Thus for each element inside the class " spmenu» is set background image icons.png, which is a set of icons. Please note that is an inline element according to the HTML specification, so in order to give it strict dimensions (width and height), we must change the way it is displayed to block in CSS properties(line: display: inline-block;). The block dimensions of 32x32 exactly correspond to the format of our icons.

Often instead use tags , , etc., I think this approach is wrong. Why change the styles of standard tags if there is a universal . A tag generally creates an extra request to the server, and we are using sprites to try to reduce the number of these requests.

Where can I get icons for the sprite?

Draw it yourself.

Search in the search engine among the pictures.

There are special collections of icons on the Internet that are often given away for free.

Many social networks and services display official logos and icons on their websites that can be used in their applications.

To create a sprite file for social network icons automatically, you can use the service. Select the icons in the desired order, save the archive with the script, unpack it and see the picture icons.png- finished sprite file.

In addition to displaying icons, sprites are useful when developing an animated menu, when when you hover over its item, it either darkens or lights up. Then two sets of buttons are stored in the sprite file and, based on the “mouse over” event, the position of the background image is dynamically changed using JS.

The menu of buttons with links to channels for receiving updates, which was promised at the beginning of the note, has been done, and this is where I end the article. Subscribe to updates, the fun is just beginning.

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 it's 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 are lazy, then just experiment with the numbers, which, as you may have noticed, are not divisible by 24 for nothing.
Yes, upload the sprite file via FTP to your website and indicate the path to it () in the background. That's all. 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
You might be interested