{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-install-vuukle-on-a-blogger-blog/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"e4d02ab3-8a30-57f7-a109-65994d7f2544","html":"

From the Vuukle Dashboard, choose the option to add the code to your Blogger blog. Do this by selecting the Chain links icon in the left sidebar, then clicking Install Vuukle, then customizing the look and feel of the widget and finally clicking on the button “Add to Blogger”

\n

\n \n \n \n \n

\n

In the Add Page Element screen, choose your blog from the dropdown list and click the Add Widget option

\n

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

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

\n \n \n \n \n

\n

Repeat the last 2 steps for the <b:includable id='mobile-post' var='post'> section. This is needed to make sure that Vuukle works on the Mobile version of your blog as well.

\n

\n \n \n \n \n

\n

To make the widget appear on the mobile version of your blog, search for title='Vuukle' and add the mobile='yes' attribute on that particular <b:widget> tag.

\n

\n \n \n \n \n

\n

Save the changes you have done in the template by clicking the Save template button

\n

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

Supported Shortcodes

\n

Vuukle supports shortcodes to enable or disable certain set of features. You can add these shortcodes in the HTML/JavaScript widget named Vuukle in the Layout tab of the Blogger dashboard. The shortcodes are –

\n

[vuukle-emote] – Enables “What is Your Reaction” section\n[vuukle-subscribe] – Enables the subscribe by email option under the post\n[vuukle-powerbar-bottom] – Enables Powerbar below the post content\n[vuukle-powerbar-top] – Enables Powerbar below the post title

","frontmatter":{"title":"How to Install Vuukle on a Blogger blog","date":"May 01, 2017","category":"Install Vuukle","tags":["how to","install","blogger"],"shortDescription":"Bring user engagement on your Blogger blog to the new level"}}},"pageContext":{"id":"e4d02ab3-8a30-57f7-a109-65994d7f2544"}}}