Jump to content

Adding a Google Plus Widget to your sidebar


cmscritic
 Share

Recommended Posts

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:

Google+-Badge-Google+-Platform-—-Google-Developers-Mozilla-Firefox_2012-10-23_16-35-15.jpg

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

  • Like 7
Link to comment
Share on other sites

  • 1 year later...

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:


post-1890-0-76106000-1383323616_thumb.pn

post-1890-0-38962100-1383323631_thumb.pn

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...