PDA

View Full Version : Google Plus Badge in a Widget


Natai
01-23-2012, 07:40 PM
I am trying to get a Google+ badge in a widget using the code generated here: https://developers.google.com/+/plugins/badge/config

This generates two pieces of code:
<!-- Place this tag in the <head> of your document --> <link href="https://plus.google.com/PAGEID" rel="publisher" /><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>
and
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/PAGEID" size="badge"></g:plus>
where PAGEID is the numeric string for your Google+ page.

I copied the first snippet of code to the end of the headinclude template and am trying to figure out how to get the second piece of code into a widget and have it actually work.
The only thing I've tried that even resulted in a blank widget appearing was to use a static_html widget and enter the code in static html using the Configure link for the widget.
I have also tried several versions of entering the code directly into a new template.

Assuming the first snippet belongs in the headinclude template, I just need to figure out how to configure a widget for the second piece.

I'm not really experienced with javascript and am new to editing templates as well, can someone please help me get this working?

--------------- Added 1327356745 at 1327356745 ---------------

Here's the site I'm trying to get the widget working on:
http://www.base113.com

It should be appearing between the first two widgets on the left side.

Gemma
01-23-2012, 09:36 PM
Create a new widget. Static HTML and give it a title/description.

Then configure it and place all the given code in the textbox and change the two instances of PAGEID, so it is something like this (I used Android as an example)

<link href="https://plus.google.com/104629412415657030658" rel="publisher" /><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>
<center> <g:plus href="https://plus.google.com/104629412415657030658" size="badge"></g:plus></center>

Then add the widget to your page layout.

Natai
01-23-2012, 11:44 PM
Awesome!
I'd swear that was one of the things I tried, but it's working now.
Thanks

Bjoern28
02-20-2012, 10:28 AM
Thanks. tried this too.. but it works not on FireFox.. :(