Adding Google+ to a Business Catalyst Site

How to work with the Google +1 button and the Business Catalyst blog module, but you'll be able to use the button on any pages or web apps.

Thursday, July 21, 2011 - Posted by Brian Lowry to Technical How-tos

Video Transcript

In this video, I'm going to be covering how to work with the Google +1 button and Business Catalyst. We'll be working with the blog module, but you'll be able to use the button on any pages or web apps that you've built.

So, what is the Google +1 button? Right now, we're looking at a BC Gurus search on Google. If I were to click this little +1 button right here, that tells Google that I think this is a quality and relevant site and that I'd want to share it with my friends. Basically, I'm recommending this site to other people who are searching for something similar. The more +1s that a site gets, the better Google is going to think that site is, and the better it's going to do in search results.

What we're going to do is add the Google +1 button to our website, which is a better place for people to recommend our content. Really, if someone just found us on Google, they don't know if our content is worth recommending yet. But if someone comes to your website and they read your blog and they get to the bottom of one of your blog articles, you want to think of this area as a call to action area, and you want to give them the opportunity to share your content and subscribe.

So I created this div area and made it stand out so it can attract a little bit of attention. I also created it to show that you probably want to expand on this. You want to add at least, probably, a Like button and a tweet button here with the Google +1 button. Maybe an email subscribe box and your RSS feed. You want to give them a few options at the end of your articles so that if they like your content, you can grab them right then and get them to share it and to subscribe to it, if that's what they want.

To configure your button code, you're going to go Google.com/webmasters/+1/button. Here you can configure how you want your button to look. You've got a little preview over here; so right now, we're on small. There's medium, standard, and tall. Probably the best thing to do here is choose something that matches the design of your other share buttons. If you already have Facebook buttons or Twitter buttons or something like that on the site, obviously you want to get something that matches and looks good together.

You can set your language. Then under advanced options, we can choose to turn off the count. This tall version is the only one you can't turn the count off on. We can designate a specific URL that this +1 would apply to. By default, it applies to the current page.

I'm going to show you an example being your blog list page. If you put a +1 button next to each blog post title, you wouldn't want it to +1 the current page. You want it to +1 that article. So we'll work with that also.

Then you get your code down here. The first one is the code that has to go on every page, and it goes just before the close body tag. For working with the blog module, I put it at the end of the overall blog template. For other pages, it might work to put it into your default site-wide template.

Then you get the code that you place wherever you want the button to show up. If you're working inside your Business Catalyst Admin Area, the place you want to get to is blog layouts. You can get there by going to Admin, More Customization Options, and just clicking the Blog Layouts option.

The files we're going to work with is this overall blog layout and the blog post details layout. Then in a little bit, we're also going to work with this blog posts list layout. I'm going to switch over to Dreamweaver, because it's easier for you to look at the code, but I'll tell you each time which of these files we're working with.

Here, we're looking at the overall blog layout. You can see down at the bottom I included the first piece of code Google gives you on that button configuration page. All it is, is calling in their API JavaScript file. You want to include that after the end of the blog container and just before the body tag.

Now we're looking at the post detail template. Right here, you can see the Google +1 button code. It's just that little snippet right there. It is the style of tall, the tall style in the configuration. I put that inside two div, one div class share and one div class button. Div class share would hold all of my share buttons, and I would div class button around each different button. So if I was using a Facebook Like button or a tweet button, then I would also put that div class button around those. That'll let me apply CSS styles to all of them. I just inserted all of that right after this tag, blog post body.

If we look at the CSS real quick, we can see my div class share. I just set it to a margin of 20 pixels, top and bottom, padding 10 pixels. I gave it a background and a border color just to make it look pretty good. Then I have the dot share dot buttons set up, with no styles yet because I only have one button. If we were to add Facebook buttons or Twitter buttons or LinkedIn buttons, anything like that, then this here would come in handy as a way to style all those.

All that gives me this block of code right here. If anyone +1s this, it's going to show Google that this specific article was +1.

Next, we're going to look at our blog list. I've added these little +1 buttons next to the title of each article. For these, they work a little different. If someone +1s this, it +1s this specific article right here, not the page I'm on right now. Then same thing with this one, it's going to +1 this blog post right here.

Now we're looking at our post list template. To make that work, I inserted the Google +1 button right within the H2 tag. Here I'll give it a little space. The way you set the URL is just like if you were setting a link. You use the HREF tag. To make this work in Business Catalyst, you're going to need use your domain, slash, and then this tag item URL, underscore, nolink tag right here. This is going to tell the button that this link is the one that you're +1ing. This tag is going to refer to the URL of the specific post.

That's really all there is to it to get it to work in your post list. The only other thing is this size parameter right here. Small is what tells it to display that small button that we were looking at right here.

Hopefully that helps you get started with Google +1, and let us know if you have any questions in the comments below. Also, go ahead and post a comment if there's a specific tutorial that would help you out or one that you would like to see us do in the future. Thanks for watching.

comments powered by Disqus