Put the buttons of social networks in WordPress template without plug-ins and services - Profit Hunter

We make it easy to load the site using our own code instead of plug-ins! The fewer they are, the easier and faster our template will load, and this is a direct way to improve the behavior of visitors to the site. In this post, we will learn how to make a vertical block of social buttons that scrolls along with the article. With it, the reader will be able to share a link to the post and save to his page, no matter how much text he read.

It happens that we do not have time to study the material to the end, and to return to it later, we save it somewhere (in bookmarks or social networks, for example). So, it often happens that the button block is far at the end of a long article, and it is not visible to the reader at the moment, because the person has not yet read the material. We will, with the help of a special code, make it so that the block is in sight all the time and scrolls along with the article.

Put the buttons of social networks in WordPress template without plug-ins and services - Profit Hunter

The code of social "buttons-stuck"

Let's sort the code of the social button for Facebook. The rest can be done by analogy.

. ! - SocialButtons -.
. span style = "display: scroll; position: fixed; bottom: 280px; left: 50px;".
. noindex. . a target = "blank" rel = "nofollow" href = "http: // www. facebook. com / sharer. php? u =.? php the_permalink ();?.". . img src = "http: // site. en / f. png" width = "50" height = "50" title = "Share on Facebook" alt = "Post to Facebook". . / a. . / noindex. . / span.
. ! - SocialButtons -.

Signature . ! - SocialButtons -. allows you to visually determine where in the page code is our block of buttons. So far, we have placed only one button in the block, but then the code will be much larger.
In the tag. span. c attributes are styles. We will register them for each button. Record display: scroll; position: fixed means that the button will "stick" to the screen and will not hide with the already read text in the scrolling process of the page.

Indicators bottom and left determine the position of the button relative to the bottom and left edges of the screen. In our case, it will be to the left of the post. If you need to place it on the right, simply replace “left” with “right”. As you have already noticed, the values ​​of these indicators are set in pixels, and you can change them as you like, until you find the most optimal position in your template. Note that in the above example, the indent of the button from the bottom of the screen is 280 pixels.

But if we want to put another one under this button, then from 280 we need to subtract 50 or slightly more (50 is the height of the button). It turns out that the next bottom button will no longer have 280, but a maximum of 230 (if more, then the pictures will bump against each other). Thus, this value should change with each new button.
With the tag. noindex. and the attribute rel = ”nofollow” we close the links that are hidden in the buttons from being indexed by search engines.

In the tag. a. attribute target = ”blank” is responsible for opening the window with the offer to share in a new tab. This is important because the user may still want to return to the page of the site that he read.
The href = attribute fits directly into the link code, which will be responsible for displaying the social network dialog box when the button is clicked. For each of them, this code will be different. Record . ? php the_permalink (); ? (not only needed for the feedburner subscription button) allows you to display a link to our material and its name in the social network page that opens, for example:

Put the buttons of social networks in WordPress template without plug-ins and services - Profit Hunter

In the tag. img. the path to the picture-button you want to put is specified, as well as its parameters (length, width, title, alt attribute).

Thus, we get the general scheme of compiling the code of the social network button:

. span style = "display: scroll; position: fixed; bottom: {value}; left: {value};".
. noindex. . a target = "blank" rel = "nofollow" href = "{link to social network} =.? php the_permalink ();?.". . img src = "{link to the button image}" width = "{value}" height = "{value}" title = "{Share, tell on ...}" alt = "{Share, tell on ...}". . / a. . / noindex. . / span.

As for the meaning of links for different social networks, they should be like this:

  • For Facebook: onclick = ” window. open ('https: // plusone. google. com / _ / + 1 / confirm? hl = ru. url = http: // www. facebook. com / sharer. php? u =.? php the_permalink ();? . ”
  • For Twitter: http: // twitter. Com / intent / tweet? Text = RT @ Your login on Twitter .? Php the_permalink (); ?.
  • To subscribe to the blog feed: http: // feeds. Feedburner.com/ Name of your feed
  • For mail. Ru: http: // connect. mail. en / share? share_url =.? php the_permalink ();?.
  • For Vkontakte: https: // vk.com / share. php? url =. ? php the_permalink (); ?
  • For Yandex bookmarks: http: // zakladki. yandex. com / newlink. xml? url =. ? php the_permalink ()? . name =. ? php the_title (); ? . descr =. ? php the_excerpt (); ?
  • For Odnoklassniki: http: // www. odnoklassniki. ru / dk? st. cmd = addShare. st. s = 1. st. _surl =. ? php the_permalink (); ? . title =. ? php the_title (); ?

Where to put the social network buttons in the WordPress template

As a rule, the block is placed on pages with separate posts, news. You can put it on static pages. You should not put extra external links on sections or the main one, although you can try and look at the effect. Only tests and experiments can show the real situation.

A single file is responsible for a separate publication. php, located in the folder with your theme. In it you will need to place the code you created. Where to put it - your business, all the same, the buttons will stand on the place that you specified in the bottom and left attributes. It is desirable, of course, to put this code at the end, somewhere after the output of the footer. It is necessary that the social network buttons are displayed later than the main content, if the user has a slow Internet. The first material should always be loaded with user-friendly material, and only then - the share button and so on.

Why is it better to embed your button code on the site?

As we said above, plugins are the easiest way to make a button block. However, we value the site loading speed, and try to minimize the number of plugins. So, if you take two sites, then all other things being equal, their quality, one will stand out above the other. And why? Because one download is faster than the other.

Another way is third-party services. Putting them very easily and quickly, however, these services sometimes "hang", and the site displays something incomprehensible instead of buttons.

In addition, in the services and plug-ins there may be extra links to developers who are not needed by us.
Thus, your code is the best way out. The main thing - to make it clean, neat, without unnecessary debris and errors.

Do you like articles? Subscribe to the newsletter!


Related Articles