I like Weebly’s social integration with Facebook and Twitter but it is missing Google’s +1 integration. To add Google+ to my Weebly blog, I just add two javascript includes to my website footer (header won’t work because we require Prototype.js first).

I can add scripts in my Settings > Search Engine Optimization (SEO) e.g, see the picture. If you’d like to replicate this on your Weebly blog, you can probably do the same as I’ve done below.

As a side note, I am assuming Weebly uses similar identifiers for all it’s web sites when it renders the ${content} section of blogs, so if that is true then hopefully my scripts should work for your Weebly blog too.

I started by looking at the Google Plus builder and I noticed this <g:plusone> tag you can add anywhere on your website. However, I didn’t want to have to manually add this to every single blog post, so I decided to do some scripting.

To add google +1 to your weebly site just do this:

<!-- Google+ library -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- Google+ Weebly integration -->
<script type="text/javascript" src="http://keltdockins.com/media/google-weebly/weebly.google.plus.js"></script>

Weebly uses Prototype to abstract the horror of javascript, so it was obvious to me that I should just piggy back off this library. Prototype is very similar to jQuery, so I had very little problem with it and within a couple minutes I had Google +1 working on my Weebly site. However, all the +1’s linked to the same content. Not to fear, using Google’s +1 API I found it was very simple to specify the url you want to +1.

Also as a minor annoyance, it seems that Prototype and jQuery do not play well together. My post Nostaliga with CSS that included jQuery broke the Prototype.js script for Weebly. Why? Because they hate each other! That … and somewhere jQuery uses a global $ selector to call $(...)._each() function which instigates Prototype; however, Prototype has no such _each function which causes the library to error. I ended up spending a few minutes re-writing the sprite script to Prototype.js. I know… I know… whatever… lol.

Lesson to be learned: don’t use jQuery on your Weebly website and expect everything to work.

post by Kelt Dockins on 04/03/2012