Skip to main content

HTML Based Accessories, For Individual Posts

Blog owners are constantly asking how to add post specific accessories, from third party services.
How do I add a Like button, for my posts?
Adding many post accessories requires adding XML code, to the post template.

Adding code to the post template is scary - and it can cause problems, when incorrectly done. The easiest way to add a per post accessory is to add an HTML gadget that references the post by the URL, as displayed for the page.

The problem with an HTML gadget is that it simply references the page displayed. If your posts are read from the main page, or an archive page - and somebody uses a Like accessory, what happens?

A Like button, used from an HTML gadget with the main page displayed, applies to the blog - since it's the main page that's displayed.

If you want your readers to Like your individual posts, they need to use the Like button with the post page displayed. You need three tweaks, for this to work best.
  1. Use Jump Break on the posts.
  2. Tweak the Like gadget, so it only displays in a post page.
  3. Add a second Like gadget, in the sidebar, to apply to the blog.

Use Jump Break on the posts.
With Stats displays and main page content, you get the most accurate post pageview counts when your readers read each individual post. Similarly, encouraging your readers to Like your individual posts will be more successful when the Like is used from the post page.

A Jump Break, added to each post, will encourage the reader to click to the post page, where the Like gadget will be visible, immediately beneath the post. Clicking on the button in the gadget, the Like is applied to the post.

Tweak the Like gadget, so it only displays in a post page.
If you want reliable individual post Likes, you want a Like gadget that is only visible from the post page. You can add a CSS tweak, using the Template Designer "Add CSS" wizard.

Add a second Like gadget, in the sidebar, to apply to the blog.
You can have Likes that apply to a main page - but what happens when a non home, index page is displayed? Have you ever looked at the non home URL, for a secondary main page segment?

Add a second Like gadget, in the sidebar, to pick up the home page of the blog, instead of the current page. Then, tweak that gadget, so it only displays on an index page - again, using CSS.

And, you're done.
When all of this is done, you'll have two Like gadgets - one that applies to the blog, the other to the individual posts. And your readers will read each post from the post pages. And you'll do all of this, without tweaking the post template.


Popular posts from this blog

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Where's The Dashboard?

We see this confusion, a couple times a week, in Blogger Help Forum: How Do I? . Where is the dashboard? In the Classic Blogger GUI, the display which contained the "Blog List" (at the top), and the "Reading List" (at the bottom) was labeled "Dashboard". Many people also called the "Settings" / "Template" screens for the various blogs, linked from the Blog List, the dashboard. The New Blogger GUI has no page with the label - and no links "To The Dashboard". The Navbar (another unlabeled feature) has two links - "Design" and "New Post" - which lead to different dashboard sections, when you are appropriately logged in to Blogger . And, the "B" logo at the far left of the navbar will, similarly, take you to the Blog List / Reading List.