In this tutorial we will learn
how to put the Google+ +1 button in WordPress step by step
. After adding the social buttons to
Vozidea.com
I had to investigate to put them in the right way. I know there are many plugins but I prefer not to use a plugin that overloads WordPress for something as simple as placing social buttons.
Controversy about the +1 of social networks and their effects on SEO.
Within these +1 buttons there is some controversy, on the one hand there are those that say that if it affects the positioning in Google and on the other hand those that do not. Personally, I believe that the effect on positioning, if it has one, is minimal because I
have not seen anyone position their articles to date based on +1 on Google+ and Facebook Likes
.
On the other hand, those who affirm that if it has a considerable impact on positioning, I have never seen conclusive evidence that accompanies this statement. In addition to this statement usually include the "Likes" of Facebook and the times it was shared on Facebook and I doubt that Google makes use of competitive data to position. Another aspect that leads me to think this is that if we see the
social networks associated with Google
, Facebook does not appear in the list.
To end this issue, from my point of view, despite what many SEO experts say, getting more G + for our website is not a factor that directly affects today's positioning, perhaps in the future Change things.
After reading the above,
we must not downplay social networks
, since currently +1 and Likes are useful to reach more public (as a promotion on social networks) and get traffic.
Tutorial to put Google+ button +1 step by step
The first thing to be clear about is that
the Google+ social button is composed of one part in HTML code and another part in Javascript code
.
The easiest way to create the button is from the developer page provided by Google itself:
https://developers.google.com/+/web/+1button/?hl=en
Size setting
As we can see in the previous image, the button is available in four sizes, so we choose the one that best suits our needs.
Annotation settings.
When
inserting the Google+ +1 button
we have three types of annotation:
-
Integrated (inline)
: shows the images of the user profiles that have connected to the web and + 1'd. It also shows the total number of +1 on the page.
-
Help box (bubble)
: consists of showing a bubble with the number of users who have + 1'd.
-
None (none)
: does not show any +1 counter, only shows the button without additional data.
Language settings
Here we select the language of the web page in which we want to integrate the Google +1 button.
Advanced Options.
Here
we must select the Asynchronous option
. It is advisable to use the asynchronous option because this way we do not block the load of the rest of the elements and
therefore improve the loading time
. The rest of the advanced options leave the default values "‹"‹but then we will clarify the theme of the URL +1 (that is, the URL that receives the +1).
Target URL of +1.
When
adding the Google+ +1 button
, we have to define which URL will receive the +1. This can be done in two ways:
-
Specifying the target URL in the button code.
-
Omitting the target URL in the button code so that in this way it takes as the target URL the one defined in the
rel="canonical"
tag. This HTML tag defines the canonical URL that we talked about in our
on-page SEO guide for beginners
in section 4.11.
This section of the target URL is especially important especially when it comes to including more than one Google+ button. For example in Vozidea there are two Google+ buttons on each page:
-
+1 button in the sidebar
: it is to give +1 to the main URL
http://www.vozidea.com
. In this button I manually specify the target URL with the attribute
data-href="http://www.vozidea.com"
.
-
+1 button at the end of the article
: it is to give +1 to the URL of the article. In this button I do not specify any target URL so the canonical URL is taken as the target URL.
By placing the code the button on our WordPress theme.
The code consists of two parts, the Javascript code and the HTML code.
Javascript code can be placed anywhere on the page
. I usually add it in the
footer.php
file or in the sidebar widget itself.
Despite having two Google+ buttons, it is only necessary to include the Javascript code only once.
The HTML code will have to be placed where we want the button to be displayed
, generally it must be added to the
single.php
and
page.php
files and in very specific cases also in the
attachment.php
file.
Optimizations when putting Google Plus button in WordPress
There is a slightly more advanced part that I do not deal with in this article, but I will name it in case someone wants to investigate on their own. There is a way to include the +1 button so that the Javascript code is loaded when the user does some action, such as when you scroll or when you pass the mouse over the social button. For this case there is a pretty good plugin called
WPSocialite
although it can also be done manually, but that is no longer the subject of this guide.