Where and how to add Google +1 code?

Home » Forums » Website Design and Development » Where and how to add Google +1 code?


Registered User
438 posts

Gosh this is frustrating. My site is at http://ColoradoProcessServers.net done by a professional last summer in Wordpress with css and all. ( yeah he used tables but I cant afford to have it redesigned at this time )

I want to add the Google +1 code below and have tried several places but it always screws up the site. I put what they call the "render call" in the header, which is fine, right? But just that tiny top section with the small button, will throw everything out of whack, if I put it anywhere above the fold in the first page there. Like I tried adding it after the email address and it threw the whole section out to the right of its container area. Any ideas on why and how to get it to work, please?

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" annotation="inline"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script> Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Advisor
1,298 posts

Taking a look, give me a few moments. :P "An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Advisor
1,298 posts

Yes, you place the scirpt into the header area. I would suggest placing it right before the </head> tag.

The way it is setup under tables would take a lot to fit it under the E-Mail...

However, if you are ok with putting it below the "Attorneys, Legal Assistants and other process serving companies from all across the America love our service!" Paragraph then you may use this code.

Attorneys, Legal Assistants and other process serving companies from all across the America love our service!</h4>
<br/> </td>
<td><g:plusone size="small" annotation="inline"></g:plusone></td>


I hope this helps. :P

"An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Advisor
1,298 posts

And may I suggest that you do not use the same "professional" you used to create this site... Find another service. Because if I were you, I would have "FLIP"ed on him... And yes, the pun was intended. :P:lol: "An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Registered User
438 posts

SirAGE wrote:
Yes, you place the scirpt into the header area. I would suggest placing it right before the </head> tag.

The way it is setup under tables would take a lot to fit it under the E-Mail...

However, if you are ok with putting it below the "Attorneys, Legal Assistants and other process serving companies from all across the America love our service!" Paragraph then you may use this code.

Attorneys, Legal Assistants and other process serving companies from all across the America love our service!</h4>
<br/> </td>
<td><g:plusone size="small" annotation="inline"></g:plusone></td>


I hope this helps. :P



Thanks but it sticks out the right side. Did I do it wrong? Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Registered User
438 posts

SirAGE wrote:
And may I suggest that you do not use the same "professional" you used to create this site... Find another service. Because if I were you, I would have "FLIP"ed on him... And yes, the pun was intended. :P:lol:


We could barely afford a designer, so it wasn't a matter of paying a few thousand for the design, but a few hundred. <sigh> Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Registered User
438 posts

It not only sticks out the right side, but W3C says it doesn't validate now, apparently because Google doesn't define their code in the stylesheet? Melissa Brookstone
Author of the new book, "The Planetary Bill of Rights Project"
at Amazon.com http://tinyurl.com/45wbn6v
Using VSD at:
http://www.PlanetaryBillOfRights.org/


Senior Advisor
1,426 posts

Here is what I use on my pages, and it does validate in W3C. The reason the normal code does not valiate is because it is HTML5 compliant.

In your </head> tag add this:-

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{ parsetags: 'explicit' }

</script>


Where you want your button add this:-


<div id="plusone-div"></div>
<p><script type="text/javascript">

gapi.plusone.render
(
'plusone-div',
{
"size": "standard",
"count": "true"
}
);

</script></p>


You can try the code in your table td tags.

I have mine outside my main page as a static button using css. Jim
---------------------------
http://www.freebits.co.uk/


Senior Advisor
1,222 posts
Online Now

Melissa Brookstone wrote:
Thanks but it sticks out the right side. Did I do it wrong?


You need to replace this code:
Attorneys, Legal Assistants and other process serving companies from all across the America love our service!</h4>
<br/> </td>
<td><g:plusone size="small" annotation="inline"></g:plusone></td>

...with this:

Attorneys, Legal Assistants and other process serving companies from all across the America love our service!</h4>
<g:plusone size="small" annotation="inline"></g:plusone></td>


In the above, I've only considered the positioning, using your original code for the 'Google PlusOne'. This may need to be modified as per Jim's suggestions for validation... Per
www.mingas.com


Advisor
1,298 posts

Melissa,

I can not see the Google + button while I am editing it. So, I can not see where it renders on the page. But I did see it on your site and I forgot to add the <br />

This is the correct code.

Attorneys, Legal Assistants and other process serving companies from all across the America love our service!</h4>
<br/> </td> <br />
<td><g:plusone size="small" annotation="inline"></g:plusone></td>

Add that <br /> and it should move down to the correct spot. :P "An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.