In case you hadn't seen the news, the Buzz team announced the release of a set of buttons to make it easier for your readers to share your content with their friends via Google Buzz. You can go to buzz.google.com/stuff to generate your own button, but when I did that, the button that showed on my site used the URL of the page for all instances of the button - which doesn't work when multiple posts show up on the page (like the homepage). Turns out, there's just a little bit of work needed to seamlessly integrate this into your Blogger template.
Navigate to 'Edit HTML' in your Layout: Click "Layout" then "edit HTML", then click "expand widget templates" to view the full layout for your blog.
Find the post-header-line-1 div in your Layout: In your browser, click ctrl-f to find the following line: <div class="post-header-line-1">:
<div style="border: 0px !important; margin-top: -42px; text-align: right;">
<a class="google-buzz-button" data-button-style="normal-count" expr:data-url="data:post.url" href="http://www.google.com/buzz/post" title="Post on Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script></div>
What this does is pass the Blogger variable "data:post.url" to the Buzz button which is the permalink of the post, so that even on pages where multiple posts appear, the button will be connected to the post, not the entire page. For appearances sake, I enclosed this all in a div that has the text aligned around it; you can alter the presentation of the button by adjusting the CSS variables. Here's how it looks like on the blog:
Each time one of your reader clicks the button, the counter goes up by one, and your posts are shared through to that reader's Buzz stream (and out to their followers). Pretty slick!
Thanks to Bloggerstop.net for the original idea, now that there's an official Buzz implementation, it was easy to incorporate the Buzz URLs into Bloggerstop's approach to get the exact end result I wanted.
I think your "following text" went from html to widget. :)
ReplyDeleteYep, fixed the rendering issues. Forgot that there was a trick to getting the post editor to do the right thing when displaying HTML instead of rendering it. :)
ReplyDeleteHi Rick,
ReplyDeleteThanks for this. What happens if the person turned off their Buzz account? They might think the post is going to be added to their Reader like some of the other Buzz buttons I've seen around.
@Ileane
This is a Buzz integration, not a Reader Share --> Buzz hack. So if the user isn't a Buzz user, they'd have to set up a Buzz account to use it.
ReplyDeleteThis is so cool. Thanks for the tip, Rick! The counter button overpowers my little blog, so I replaced data-button-style="normal-count" with data-button-style="normal-button".
ReplyDeleteAwesome! Thanks a ton Rick! This works and looks good.
ReplyDeleteI have one more question...How do we get the initial content snapshot and image thumbnail or small image on the buzz share so that it looks similar to facebook share?
Hi! With the combination of your advice and GXG's, I managed to add this to my blog. I did notice that with some long post titles it hide the end of the title so I played around with it until I got it right, that is, under my post title.
ReplyDeleteMany, many thanks - Peter
Thanks for mentioning my article on your blog, Rick! It would be great if some kind of integration with Google Analytics tags would be included in a future Blogger widget for Buzz ;)
ReplyDelete