Adding a Google Plus Widget to your sidebar

[cmscritic]

I know the bulk of you are coders and likely can figure this out on your own but for those who are not, I thought I'd throw this solution in here just in case someone else has a need for it.

I created a simple widget-google-plus.php file for those who want to add a Google Plus widget to their sidebar (or elsewhere) in Processwire. To use, simply upload the attached widget, changing the profile URL to yours and add the CSS / tweak as needed.

I've no clue how to build a module so I am doing this as a tutorial.

First the logic:

If you are anything like me, you crave customization. I hated the fact that Google wouldn't let me remove the border from around their google plus badge so I decided to create a solution of my own.

Here's how it looks straight from Google:

To get rid of this obnoxious border, I created a new widget (attached) with this code:

<div id="googleplus_widget">
<span>
<div class="g-plus" data-width="275" data-height="69" data-theme="light" data-href="https://plus.google.com/your-profile-id-goes-here"></div>
<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>
</span>
</div>

As you can see, it's wrapped in divs which I then styled with the following CSS:

#googleplus_widget{
width: 280px;
height: 50px;
}
#googleplus_widget span{
width: 200px;
height: 50px;
float: left;
overflow: hidden;
background: #fff;
}
#googleplus_widget span div{
margin: -1px 0 0 -1px !important;
position: relative;
}

To use, simply modify the attached widget-google-plus.php with your google plus profile URL, upload to your ProcessWire installations /site/templates directory and go to Setup and then Templates within the back end of your install.

The new widget php file should show up under the "Templates found in /site/templates/*.php" , check it off, click add template and then add it to your sidebar if you choose to do so. That's it.

Hope that helps someone. I know it's a minor contribution but at the very least, this is recorded for me to reference later when / if I forget

BTW. If there's an easy way to make this into a module, I'd love to be able to do so even if just for myself and future newbs.

widget-google-plus.php

[renobird]

Hey Mike,

Great post, I think there are a lot of non-coders using Processwire, so it's nice to have a mix of tutorials.

Glad to see you are getting along well with PW already.

[ryan]

This is great, thanks for posting this.

[HappyToDev]

Hello cmscritic,

You have said:

The new widget php file should show up under the "Templates found in /site/templates/*.php" , check it off, click add template and then add it to your sidebar if you choose to do so. That's it.

But as a rookie in PW, I have some difficult with "add it to your sidebar".

I have installed your template with your instructions, but when I go to my home admin page:

I don't see it in my sidebar widget.
Can you explain to me what is the good procedure to do this please ?

Thanks for your help.

Best Regards

[ryan]

This is specific to the PW blog profile -- after adding the new template for the widget, you'd go to Pages > Tools > Widgets > new. Add a new page in there called Google Plus, using the new template you just added. 

[HappyToDev]

Thank's Ryan it works now !