Menu
homeWord

We create social buttons in PHP. Step-by-step setup of WordPress social media buttons. Placement options in templates

I noted the importance of SMO (Social Media Optimization) in website promotion. Now let's talk directly about how to do social optimization on your website, or rather how to add social buttons popular networks to the website.

First, I’ll show you how it actually should look on the site. On many blogs and news sites, at the bottom of any article you can see something like this:

These are the social buttons, thanks to which SMO is achieved, and then social activity. This article is devoted to the question of where to get the code for these social networks. buttons and how to correctly install them on your website. Let's first consider installing Google+.

1. Add a Google+ button to the site

2. Add a “Like” button from VKontakte and Facebook to the site 2.1. I like it from FaceBook

Let's start by getting the Facebook button code. To do this, visit this page: https://developers.facebook.com/docs/plugins/like-button. You should see the following picture:

At the top right you can see what the button will look like on your website. Let's look at the parameters that can be set:

1. URL to Like
This is an optional parameter. If you leave the field blank, each page will have its own individual like counter. If you enter a specific URL there, the counter will be single (likes are summed up from all pages of this site).

2. Send Button
Add or remove a button for sending messages. I recommend removing this button, because... Our goal is simply to put a “like” button, although perhaps you have completely different goals.

3.Layout Style
Button display style. Personally, I like standard best.

4. Width
The width of the button in pixels. I usually set no more than 100 pixels.

5. Verb to display
What will be displayed on the button: “I like” or “I recommend”. I usually choose the first option (the default) because it is more effective way motivate the user to like.

6.Color Scheme
Color range: either white or black.

7.Font
Just setting the font for the inscription "I like".

After setting the settings, click on the “get code” button and place it on the site. Common button code for facebook:

(function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); )(document, "script", "facebook-jssdk") );

2.2. I like from VKontakte Now let’s look at how to get the “like” button code from VKontakte. To do this, go to: next page https://vk.com/dev

. You should see the following page:

First you will need to add a new site. To do this, select the option to connect a new site from the “site/application” drop-down menu:

After adding a new site, save it. Now select the desired site from the drop-down menu. This is followed by a small number of parameters: “button option”, “height”, “button name” - this is all customizable to your taste. At the end there will be code for the button:

VK.init ((apiId: 2872188, onlyWidgets: true ));

VK.Widgets.Like ("vk_like", (type: "button") ); 3. Add a tweet button to the site As in previous cases, first go to the location where you received and configured the button. From the author: Greetings. Today, social networks have developed to such a level that people are registered on them. total

more than 3 billion people. This is potentially a very powerful audience, so today I will tell you how to add buttons

social networks to the website. Adding to a WordPress site

I'll start with the fact that the most in a simple way If you have WordPress, it's easy to install some plugin for this matter. Which? For example, I used Juiz Social Post Sharer. In general, just enter the word social in the plugin search and see what’s there. The only advantage here is that you probably won't have to configure anything.

Yandex has also developed a page on which you can customize and install buttons for yourself. On this page you can choose necessary services

(and there are about 25 of them). On the right you can choose the appearance of the block. These could be counters that will show how many times users clicked on the buttons. This, in turn, will help you track whether the material is useful to readers.

Now you need to find the file with the code that displays the articles. In wordpress, for example, it is usually called single.php or similar. So, if you need to put a block with buttons after the article, look for the_content line. This is where you can paste the code. It will help you a lot if the developer of your template made comments in the code.

You can edit site files in several ways. For example, do this directly through the engine admin panel (appearance - editor). In this case, the code is not highlighted, so it is not so convenient to navigate. Another way is via ftp. Connect to the site using an FTP client, go to wp-content – ​​themes. Here you need to find the template that is active in your this moment. We go into it and find that same single.php or look for something similar in name.

In the code file itself, find the line the_content using search (Ctrl + F). Paste this code somewhere after it.

The comments are what stands out in this screenshot above green. As you can see, the developer has clearly indicated that the text of the article itself will be displayed in this place. This is great, just paste the code right after the article and get the desired result.

Buttons from Pluso

JavaScript. Fast start

Explore JavaScript basics on practical example on creating a web application

You can choose the style of the buttons, customize their background, position and size. You can also choose icons with a built-in counter. Another advantage of Pluso buttons is their stunning appearance and the ability to integrate them into almost any design.

When everything is configured, we simply copy the code and paste it in the place where we want to see the corresponding block.

Another option is Share42

If you didn’t like the previous options, there is another way to add social networking buttons to the site. This is a share42.com service. Named so probably because at the time of its creation there were 42 buttons social services, although there are currently 43 of them.

I won’t describe the process in detail, because everything is already laid out on the website in the form step by step instructions. You cannot change the design of these icons, only the size. However, they don't look bad.

The icons you need must be selected by clicking on them with the mouse. I would especially like to note the presence of such interesting opportunities, like adding to browser favorites, RSS link and “Back to Top” button.

Next, you can choose the type of panel: horizontal or vertical? And if the second one is selected, then the number of buttons can be limited. I recommend leaving the encoding as UTF-8. You can also add an icon of the service itself to the set of buttons so that users from your page can go to it and install these buttons for themselves too.

Also if you are planning to add rss icon, then you must indicate the address of your feed, and if you want to show the number of button clicks, the last two checkboxes must be checked.

Below there are 2 buttons. The first one lets you see what the social buttons you've configured will look like. Using the second, the script is downloaded. You need to upload it via ftp to your website in root folder.

Next step indicate the path to this folder on the service page. Often it is enough to replace site.com with yours Domain name. That's it, all that remains is to insert the code, first selecting the cms on which the resource runs. You should already understand where to insert the code, I hope.

I have no doubt that there are a couple more normal services where you can make social buttons, and there are also just a lot of scripts and plugins that add them. Today I have listed for you the best, in my opinion, options.

Well, today we learned how to add buttons for social networks and services to your Internet project. Now yours useful materials can be automatically distributed on social networks by your grateful readers. And that's all for me.

JavaScript. Fast start

Learn the basics of JavaScript with a hands-on example of how to create a web application.

2014-05-16

Hello friends and dear readers of the site! Today we will analyze in detail, or blog. Where to get social buttons, how to install and configure them. You will learn all about this from this post!

Social buttons are very important and are an integral element of the site.

I already wrote on the blog about installing social networking buttons, you can read about it by going to.

In it I talked about several options for installing buttons:

2).

Using the Social Share Buttons plugin

3).

Using the service http://api.yandex.ru/share There are actually many ways to add social buttons to your site, but not all of them have a positive impact on your blog., which happens in the first option, but as for the third, I’ll say that it can be buggy and not everyone’s buttons simply work. In addition, some buttons may insert a link to themselves, which is not good for your site.

In my opinion, one of the simplest and convenient ways make social buttons on the site through the “Share42” service, in it big row popular buttons, which allows you to choose the ones you need from such an abundance. It also includes many other advantages, which I’ll tell you about now.

Social buttons on a website or blog. Share42 service

To the advantages of this service applies:

— convenience and ease of installation and configuration

— all files are hosted on your blog hosting, which ensures it stable work

— nice appearance of the buttons, made in the same style

- no unnecessary outgoing links

— the ability to position the button block both horizontally and vertically

You can read more about other benefits on the website itself.

How to add social buttons to a website. Installation and social settings. buttons

First of all, go to the service website Share42.com

1). We select the size of the buttons and, accordingly, the buttons that you want to see on your website.

We simply drag and drop them into the “Other” section in the order we want. And select the desired icon by clicking the mouse.

3). Be sure to look at what happened and what the social buttons look like. If you like everything, then download the script.

4). Now the most important step is installing the script on your website.

I advise you to copy the single.php file somewhere - just in case.

The downloaded script is uploaded to the hosting via the control panel and unpacked. Choose suitable type site, I chose WordPress. And to specify the path to the files, paste the code below into the template of your site. Only instead of site.name we write our domain.

We go into the editor, and if you want to put buttons at the end of each article, then insert this code into single.php after the line:

I personally have this line, yours may differ.

If you want to position it vertically, then insert it into header.php before the closing “/head” tag.

Now all that’s left to do is to design the appearance of the panel with buttons.

Center alignment.

To make social buttons on the site in the center, use the button code tag or write before the code and after the code put a closing tag.

Adding social buttons using the Pluso service

Here is another service, here everything is as simple as shelling pears. Moreover, the service is new and everyone has not yet become tired of these buttons, which cannot be said about the previous version. And the buttons from Pluso look beautiful and fit well into the design of almost any website. And why? Because you can not only choose the style of buttons, size, shape, their location, but also the background color. You can install buttons with counters. The decoration is enviable. In general, everything is for you!

In addition, the script of these social bookmarking does not slow down page loading, and all these buttons are loaded onto the site page only after the main content.

So, go to share.pluso.ru and select the desired button style.

To the right, we select the social networks we need by dragging and dropping. Next we note the size, shape and location. If you have chosen a background, then select a color. In general, adjust it to your template.

Pay attention to the preview and see what you got.

Fill out the three fields on the right. By installing buttons on your site, you allow the use of meta tags, which helps promote your blog.

If you are satisfied with everything and like everything, we proceed to installation.

We copy the received code and paste it into the place we need. Everything is the same here - in single.php. Alignment to the center of social buttons occurs in the same way as in the previous version.

There is a minus in this service. This is an external link (service advertisement) in the form of a plus at the end of the buttons.

If you want, you can remove this red button, go to style.css and add the following code at the end:

Pluso-more (display: none !important;)

I would be grateful if you click on my social network buttons. Which way of installing social media buttons do you like?

Greetings! Recently I was in feedback They asked how to make the same social networking buttons that are installed on my website. And I decided to give the answer in the article by reviewing 6 social services. buttons for the site.

Advantages and disadvantages

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

Flaws

  • Page loading speed may be slower.
  • With a highly specialized focus of the Internet project, you may not get the desired effect.
    • Social Button Services Overview

    Let's look at the most popular services that can be used to add social networking buttons to your website.

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

    The service offers more than three hundred options for different buttons! You can very easily choose your favorite ones.

    Installation takes place literally in one click. There are conversion statistics.


  • This is probably one of the most interesting online services, with the help of which it is possible to generate a button based on 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 necessary settings, the generated script needs to be downloaded and placed on your Internet project in the required location. Mostly right after the article.


  • Yandex offers you to choose which social networks will be displayed. The user can do this by simply checking the boxes next to the buttons that will be placed on the block. You can edit their appearance.

    Next, the system will automatically generate source, which you will need to install on your blog. The main advantages of this service include the fact that the script does not place outgoing links on the created blog. It is also possible to connect Yandex.Metrica to maintain statistics.


  • This service offers users to place very beautiful and stylish social networking buttons 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 technology jquery. Connection is very simple and will not cause difficulties even for beginners. Loading is very fast.


  • This is a useful and completely free online service that offers users to place buttons in this way: in one row, arranged in the form of a drop-down menu, icons of all services in a row. After selecting display options, the service will automatically generate a special javascript code, which will need to be placed in the required place on the site.

    In addition, the service tells you how to add the created 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 only need to do three simple steps: select the location where the created widget will be located, select 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 your own bookmarks and social networks.

    • So, installing social networking buttons for a website is very simple and will not cause any difficulties even for novice Internet users. If desired, you can install either buttons for all available networks, or select only some certain networks. To do this you need to use official widgets or third-party ones online services. The most popular are the buttons installed on personal blogs, or on news or entertainment Internet projects. :)

    P.S. Thank you for your attention. Which service do you prefer? Waiting for your comments. :)

    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 required images social buttons combined into . All styles are kept to a minimum. Plus a simple html framework.

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

  • Very easy installation. It is enough to insert the html code of the block into the source code of the site page, download 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 all actions, do backup copy single.php file!

    Opening administrative panel WordPress - " 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 article and 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 of the social buttons block:

    ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter ">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg ">. 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() ( ?> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg">. Otherwise the site will stop working.

    Explanations on the code: the place where social network buttons will be displayed is determined through 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 insertion html 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 complete all the difficult steps first. technical work, and then proceed to 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; )

    Code explanation: class.share defines general form 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 sprite css, and each button has a width and height of 40px, with 2px padding between them, which allows you to accurately define 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 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.