cmscritic Posted October 23, 2012 Share Posted October 23, 2012 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 7 Link to comment Share on other sites More sharing options...
renobird Posted October 24, 2012 Share Posted October 24, 2012 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. Link to comment Share on other sites More sharing options...
ryan Posted October 24, 2012 Share Posted October 24, 2012 This is great, thanks for posting this. Link to comment Share on other sites More sharing options...
HappyToDev Posted November 1, 2013 Share Posted November 1, 2013 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 Link to comment Share on other sites More sharing options...
ryan Posted November 3, 2013 Share Posted November 3, 2013 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. 2 Link to comment Share on other sites More sharing options...
HappyToDev Posted November 4, 2013 Share Posted November 4, 2013 Thank's Ryan it works now ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now