Install Vuukle on Blogger

Blogger requires template-level edits since you can’t run a plugin there. The Vuukle dashboard generates a Blogger-ready HTML/JavaScript widget for you — you just need to drop it in the right place in your template.

Step 1: Add the Vuukle widget from the dashboard

1. Sign in to the Vuukle dashboard.

2. In the left sidebar, click the Chain links icon and choose Install Vuukle.

3. Customize the widget look & feel (optional), then click Add to Blogger.

4. Blogger will open. Pick your blog and click Add Widget.

5. In Blogger, switch to the Layout tab. Make sure the Vuukle HTML/JavaScript gadget sits directly under Blog Posts, or in the Footer region. Click Save Arrangement.

Step 2: Edit your Blogger template

Back up first

Go to Theme → Backup / Restore → Download full template before editing. Template edits are easy to break and harder to undo.

1. Open Theme → Edit HTML.

2. Find <b:includable id='post' var='post'> (Ctrl/Cmd-F). Just after that line, add:

   <b:if cond='data:blog.pageType == "item"'>
     <meta expr:content="data:post.title" name="vuukle_title" />
     <meta expr:content="data:post.id" name="vuukle_id" />
   </b:if>

3. Find the closing </b:includable> for the id='post' block. Just before it, add:

   <b:if cond='data:blog.pageType == "item"'>
     <div id="vuukle-comments" />
   </b:if>

4. Repeat steps 2 and 3 for the id='mobile-post' includable. This makes Vuukle work on the mobile version of your blog.

5. Find title='Vuukle' and add mobile='yes' to that <b:widget> tag so the widget shows on mobile devices.

6. Click Save template.

Step 3: Enable the mobile template

In Theme → Mobile settings (gear icon): choose Yes. Show mobile template on mobile devices, then under Choose mobile template pick Custom, then Save.

Show comment count on the blog index

In a default Blogger template, find:

<span class="post-comment-link">
  <b:include data="post" name="comment_count_picker" />
</span>

Replace it with:

<b:if cond='data:blog.pageType == "index"'>
  <span class="vuukle-comment-count-container">
    <a class="vuukle-comment-count" expr:href='data:post.url + "#vuukle-comments"' expr:data-id="data:post.id"></a>
  </span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <a class="comment" expr:href='data:post.url + "#vuukle-comments"' expr:data-vuukle="data:post.id">Comments</a>
</b:if>

Supported shortcodes

You can drop these into the Vuukle HTML/JavaScript widget in the Layout tab to enable extra widgets:

Shortcode	Enables
[vuukle-emote]	”What is your reaction?” reactions widget
[vuukle-subscribe]	Newsletter subscribe box
[vuukle-powerbar-bottom]	Social share bar below the post
[vuukle-powerbar-top]	Social share bar below the post title

Related

• Customize emote images
• Comments widget reference
• Show comment count anywhere