A script of beautiful social media buttons. Own social buttons. Uploading button images to the server

02.07.2020

In this quick tutorial, we'll create simple and custom social sharing buttons.

The option I proposed is devoid of these shortcomings - all files will be on your server (that is, they will fall along with the site), without loading anything from the outside, and besides, it is very well customized. In addition, we will have a small plus - usually the big three (VKontakte, Facebook and Twitter) are part of the social buttons. In our case, Mail.Ru, Odnoklassniki and Telegram are present in the clip, so that no one leaves our site undisclosed.

The only significant disadvantage: number of clicks on buttons count will not be... We go beyond simplicity and flexibility.

For the first time, the question about my own social media buttons came to me at a time when social sharing was very necessary for the page on the site, but all the resources did not fit the design. And not me alone - the very idea of \u200b\u200bcustom buttons is far from new. The most interesting solution, in my opinion, was found by me on Habré and after a short search led to GitHub... I took as a basis the logic of such sharing buttons and creatively modified them.

The solution is as simple as a felt boot - links are made for social networks, within which parameters they understand are transmitted. Since this uses the tag , then you can wrap almost anything in it - the scope for customization (for which all this is being done) is huge.

But this script has one drawback - a script that handled browser behavior when one of the buttons was clicked. Here is a part of it, in which you yourself can easily see two problems:

Vkontakte: function (purl, ptitle, pimg, text) (url \u003d "http://vkontakte.ru/share.php?"; Url + \u003d "url \u003d" + encodeURIComponent (purl); url + \u003d "& title \u003d" (! LANG: + encodeURIComponent (ptitle); url + \u003d"&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

The first problem is small and many might say to me, “Hey, dude wrote this in 2012! Just change the line and that's it. ” And I agree with you that you can just changevkontakte.ru to vk.com and just close the question.

Second, a new block must be written for each service. Which is also not very problematic to do, just copy-paste and remove / add the necessary parameters.

But what does this script do in the end? It just creates a popup window that passes the listed parameters. These are the lines:

Popup: function (url) (window.open (url, "", "toolbar \u003d 0, status \u003d 0, width \u003d 626, height \u003d 436");)

It is precisely the work of this script that I slightly modified. But more on that below. Let's look at the buttons themselves and how they work.

First, we need to have several variables for the sharing buttons:

$ Title - Title (title) of the page
$ Description - Page description
$ ImageUrl - path to the page image
$ Link - direct link to the page

I named them conventionally so that it was clearly clear how many of them are needed and what they are. How they will be taken on your site - manually or automatically - depends only on the application on which it will be executed. For example, in a WordPress CMS it will look like this:

$ Title - this is
$ Description —
$ ImageUrl —
$ Link —

Now, in the place we need, we insert the following code, where we substitute the required values \u200b\u200b(if necessary) in place of the variables:

In contact with Facebook Mail.Ru Classmates Twitter Telegram

Done. The code is already working and can be used - when you click on the link, a new tab of the social network opens. Now let's make it so that it does not produce tabs, but opens a small window on top of the browser. Let's add the following code below:

What happens - the script monitors all clicks on with rel \u003d "nofollow" attribute. You can put any one, but this one also tells the robots that you don't need to follow these links - we do a combo in one move. When pressed, it opens a window with a size of 626 by 436 pixels (parameters width \u003d 626, height \u003d 436), which can be changed to your liking.

That's all! You can see the result of the work at the end of this article.

Of course, this script has a significant drawback - it cannot count the number of clicks. But as an easy, fast and easily customizable solution, it is simply irreplaceable. Into tag you can stuff anything - text, pictures, svg graphics - nothing else limits you (except for imagination, of course).

Review of domestic constructors and scripts of social media buttons for websites, as well as foreign analogues. Briefly, understandably and clearly.

Social media button designers for website

2. An easy way to get links to the site - QIP.RU
Place the 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 mark up the button (site, Blogger or WordPress), style the buttons (out-of-the-box options) and get the button.

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

4. Service of social activity - UpToLike
Customized social media buttons with the ability to set color, shape, size and special effects. Additional features are the PicShare picture sharing widget, the Quote function and the customized Following function.

5. One button! - for all services of bookmarks and social networks
Select the kind button. Where the button will be installed: website, Blogger or WordPress. Add a button.

Social media button scripts for the site

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

2. Script buttons for social bookmarks and networks - 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 a ready-made script. Install the script on your WordPress site, Drupal, etc.

3. Beautiful social media like buttons using jQuery - Social Likes
A script of "like" buttons with counters in the same style for social networks: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ and Pinterest.

Foreign analogues of social media 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 the distributed content.

4. Social Sharing - Po.st
Get more value from social media sharing. The service will facilitate the process of sharing in social networks for visitors, which will increase the organic traffic of the site.

5. Share Buttons for Any Website - AddToAny
Get social media buttons code for any website. Choose the button type and style, specify 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

Change message

6 comments

Recently, every second (if not the first) customer in the requirements for the development of the site asks to be sure to link it with social networks. "Social" buttons on the site are the number 1 tool for attracting target audience, distribution of content and PR in general. And it's completely free!

Social networks provide codes for their buttons and widgets for placement on the site, and attach instructions for installing them in the content management system. Any CMS (operating systems) allows you to install them, the main thing is to harmoniously fit them into the design of your site.

What are the features and functions?

If your site is aimed at people who communicate with popular social. networks, for example, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, etc., and you want to cover all of them, so as not to install the buttons for each of them separately, given that they may differ in size and design, we recommend using aggregator services. These are simple and convenient tools that will allow site visitors to quickly share information with their friends, regardless of which social network they use. Below we will analyze the most popular services.

Social Media Buttons Share Pluso

"Why is she needed?" - you ask. Probably, I'm trying to keep up with the times - we are lagging behind the bourgeoisie, and their website promotion is somewhat different from our current reality.

If you look at the blogs in the burzhunet, then almost all of them have various floating panels that allow you to add an article announcement to the most popular social networks and bookmarks. It is now quite difficult for the bourgeois to advance by buying links and the importance of social signals has begun to grow incredibly.

The panel allows you to increase the number of sharing articles, and therefore influence on. Well, since something similar awaits us, it would be right to get ahead of the events a little.

Why do you need a Share42 panel, its advantages

I wanted to have a panel with buttons for these four social networks, which are most relevant for the Russian Internet. It is possible that social signals in our country they are not yet as omnipotent as in the bourgeoisie because they are simply not yet sufficient to carry out a relevant selection.

But it is better now to start collecting them and be fully armed, when a global Armageddian comes to Runet for in our perverted understanding - a significant decrease in influence and tougher punishment for link manipulation.

In general, entering different queries on and Google, while searching for a suitable version of the panel, I came across the Dimox.name website, but when I saw a beautiful panel there, I did not consider it necessary to look for a description of its installation on its resource.

I just know that he does such things himself (without plug-ins), but today I really didn't want to delve into the nuances and settings. I wanted to take a few pieces of code and get an excellent, from an aesthetic point of view, and working version floating social media buttons.

Then I stumbled upon the Share42 service and, seeing the same social media buttons on it, was a little surprised - Dimox uses stamping. It's kind of like a skilled shoemaker will go to consumer goods. However, after digging a little on the net, I came across where he writes about the launch of a free service for self-selection, configuration and getting the finished script code for social buttons.

Tired of asking for help in creating buttons for the site, he opened a separate project, which, in my opinion, is now the best of all offers on the market. Let me just list those prosthat caught my eye:

Now about the cons:

You need to have at least a basic understanding of and. I don’t think that you will immediately rush to read my publications, but I still hope for your intention to do so in the future (after all, I tried, I wrote, and the appearance of these articles only caused a rapid outflow of subscribers - it's sad).

You will also need to imagine at least approximately how the one used by you is arranged. For example, you don't have to dig into the code - you can use it (though I haven't tried it for this script).

If the disadvantages are not significant for you (or you are ready to stomp on the spot in search of the truth), and the advantages are significant, then you are welcome to read this article further. What is called - do not switch. I will walk you through a very simple setup and view of the created social media button bar on Share42, as well as setting it up on. Don't blame me, but it is on this engine that my blog works.

Setting up Share42 and installing the script on the site

I threw this folder into the directory with WordPress plugins, so in the fourth step of the wizard, I had to specify this exact path:

And also I had to put a tick in front of WordPress, because this is the engine that my blog uses. Everything, with the Share settings, is done, it remains only to insert the Html and CSS code suggested in the fifth and sixth steps of the wizard. Actually, this is where serious problems usually arise for untrained users.

Note that the content of this code changes instantly when you make changes to your settings (Ajax is obviously great and terrible). Therefore, when choosing a vertical floating bar, you will have to insert two pieces of CSS code instead of one (when choosing a horizontal bar). But these are all the details, albeit very impressive and pleasant (glory to Dimoks).

Let's talk about the simple first - inserting CSS code... Copy a rule snippet or two and find the cascading style sheet file your template or skin uses.

In WordPress it is usually called Style.css and lives in the folder with the theme you are using (/ wp-content / themes / theme name). In Joomla, you need to look for the style file in the folder with the template you are currently using (/ templates / template name)

You just open this file for editing, for example, and add to the very end the fragments of the style code that you copied (we will paste the Html code elsewhere). Save the changes and do not forget, by going to Filezila, to apply these changes, agreeing to the pop-up offer.

Well, now it's time to deal with three lines Html script code Share42... The author advises to insert them before or after the articles. In WordPress, this is not easy, but very simple. Open the single.php file for editing from the folder with your theme (remember, it lives at / wp-content / themes / the name of the WordPress theme).

You can paste the code right after the articles. To do this, find the line with the the_content function and insert the suggested fragment right after it, for example, like this:

Well, I also decided to use the floating panel on the main one. In WordPress, index.php is responsible for it, all from the same folder with the current theme. Find a suitable spot in it and paste in the code (maybe trial and error).

Share42 floating panel positioning

I used a vertical floating Share42 panel, so in the Html code there are two numbers at the end of the third line - in my case it's 298 (the default was 150) and 20. What do they mean? The first sets the initial padding from the top edge of the panel to the top edge of the web page (gray dotted line below).

It would be logical to choose this figure so that the socket would be aligned according to some landmark. For example, for me this is the beginning of the article area.

The second number sets the indent from the top edge of the floating panel taken from Share42.com to the top edge of the viewport when the user starts scrolling the page. I would not make this indent too large, because at the top of the panel is not so eyesore as it would be in the middle of the viewing area.

There is one more figure that can affect the position in relation to the area with your article. But you can already find it in the CSS code that you copied to your stylesheet. By default, this figure is equal to - 70 px (set on the left) and the meaning of this value is shown in the previous screenshot with a red dotted line. I left the default, but you are free to experiment.

In Joomla, to insert Html code, you can use the module I have already mentioned above with arbitrary Html code, which you can place at the bottom or top of the article.

Yes, if the Share42 panel for some reason did not appear for you, then you can try to refresh the page in the browser (there is such a button in the toolbar of your browser) and then the updated CSS styles will be applied, which the browser could simply have taken from its cache and therefore ignore the changes you made.

Yes, if you want add to this panel, then do not use the advice of the author in this regard. That's it, I'm finished.

Do not forget to go to the service website and on the tab "Thank the author" donate a small penny, because the designer and the panel itself turned out to be just wonderful. Good luck on the green.

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

Advantages and disadvantages

However, it should be noted that in some cases the placement of the buttons may have slight disadvantages. Let's consider why it is necessary to place social media buttons on the created blog, and also consider the main positive and negative aspects of placing such icons.

disadvantages

Page loading speed may decrease.
With a highly specialized focus of the Internet project, you may not get the desired effect.

Overview of social media button services

Let's take a look at the most popular services that you can use to add social media buttons to your website.

This is a completely free service that works as follows. It automatically generates a special script with which it is possible for visitors to an Internet project to publish links to social networks. The service looks like buttons. Installation is very simple and convenient, and the placed buttons look nice on the page.

The service offers over three hundred options for different buttons! You can very simply choose the ones you like most.

Installation takes place literally in one click. There is a statistics of transitions.

This is probably one of the most interesting online services, with which it is possible to generate a button by several parameters: size and appearance. In addition, you can choose how the panel with buttons will be located (horizontally or vertically). You can also specify the encoding. After selecting all the necessary settings, the generated script must be downloaded and placed on your Internet project in the required place. Mostly right after the article.
Yandex offers to independently choose which social networks will be displayed. The user can do this by simply placing checkboxes in front of the buttons that will be placed on the block. You can edit their appearance.

Next, the system will automatically generate the source code, which will need to be installed on your blog. The main advantages of this service include the fact that the script does not put outgoing links on the created blog. It is also possible to connect Yandex.Metrica to keep statistics.
This service invites users to place very beautiful and stylish buttons of social networks on their website. The form created by the service uses css and javascript. The generated form will fit perfectly into the design of any internet project. Like buttons are made using modern jquery technology. The connection is very simple and will not cause any difficulties even for beginners. The download is very fast.
This is a useful and completely free online service that offers users to place buttons in such a way: in one row, arrangement in the form of a drop-down menu, icons of all services in a row. After choosing the display options, the service will automatically generate a special javascript code that will need to be placed in the required place on the site.

In addition, the service tells how to add the generated code to templates.
When using this service, you can very quickly and easily add the necessary buttons to your website or blog. To do this, you need to follow only three simple steps: choose the place where the created widget will be located, choose the style of the buttons and get the code. By placing such buttons on the created blog, visitors will be able to add interesting materials to their own bookmarks and social networks.

So, the installation of social media buttons for the site is very simple and will not cause any difficulties even for novice Internet users. Optionally, you can set either the buttons of all available networks, or select only some specific networks. To do this, you need to use official widgets or third-party online services. The most popular buttons are installed on personal blogs, or on news or entertainment Internet projects. :)

P.S. Thanks for attention. What service do you prefer? Waiting for your comments. :)