How To Add Google +1 Button To Catalyst Theme

The latest and hottest social app by Google to roll out today is the Google +1 button. Now if you ask me whether this button will do any good, the answer I can give you is “I do not know!”, but since it is from big Daddy, even of it does no good, it certainly will do no harm.

Thus, yours truly wasted no time in sticking the Google +1 button in my blog here.

Increase Google Crawl To Your Site With Google +1

In Google Webmaster Central +1 FAQ, it is stated clearly that:

Once you add the button, Google may crawl or recrawl the page, and store the page title and other content, in response to a +1 button impression or click.

I think that is justification enough for me to add the button.

How To Add The Google +1 Button To The Catalyst Theme

You first have to grab the codes Google.

After customizing the style of the button, the codes will be generated for you. Copy the first section under the comments Place this tag in your head or just before your close body tag

It is recommended that you place that snippet before your close body tag </body>, In a normal WordPress Theme, that would mean your footer php file. Open that file and right before that close body tag, paste in that line of codes.

For the Catalyst Theme, go to Core Options – Scripts – Footer Scripts. Simply paste in the same codes.

After you have done that, you will want to insert that button somewhere in your post. Copy the second piece of codes given under the commensts Place this tag where you want the +1 button to render

For a normal WordPress Theme, open the singles php file. Look for the line <?php the_content>. If you want the button appearing before your post, paste the Google +1 button codes before this line. If you want it appearing after your post, paste it below that line.

For the Catalyst Theme, go to Advanced Options – Custom Hook Boxes. Add a new box, hook it to catalyst_hook_after_post_content if you want it appearing below the post like what you see here. Use the “if single” conditional tags if you want it appearing only in the single post page.

< ?php if ( is_single() ) { ?>
<g:plusone size="tall" callback="plusone_vote"></g:plusone>
 < ?php } ?>

CSS Styling the Google +1 Button

After placing in the button, in most cases, it will not be placed according to your liking. You will now have to use CSS to style the placement.

For the Catalyst Theme, go to Advanced Options – Custom CSS and use this ___plusone_0 to declare your value. For my blog here, it looks something like this.

#___plusone_0 {display:inline; float:right; margin-right: 70px; margin-top:-65px;}

Not that I will be having high hopes that anyone will be clicking on the button, but let’s just see if the Google +1 Button does any good for my traffic just by sitting there.
advertisements