{"componentChunkName":"component---src-templates-blog-post-js","path":"/powerbar-widget/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"e31462c7-fbc4-5dcb-9c7e-c2a890157bb1","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 461px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 14.583333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsSAAALEgHS3X78AAAA6UlEQVQI1xXOT0vCYACAcb9TH6Njh4gOItGlLh3qGOGh6N6hJI/ZwEhsQYX9E4I6NLA/bLKJ4oa1TSuK17leXe+TPh/gx5NinPKaYNwhGyadd5/vr0/6CsTFDeztUw9iRr+SkeuSRAP6rxYylhj+kHgCOCZqJ89f2CXFR4DKLsPMFJ2FaU4rV5zpJXaPHlid20bfyJOuDqnq98RrK7TWN2nMZjgp3DJ/LSm1BHZuEXMpDVE0BpMEVTmG3BY/5QKPtSccu07T7aFdWjwL0NrQ9UIG2iGi9kKvWOatHXJgSzyhcIxzAt+avPIP34TMXes7f6UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Emotes Widget\"\n        title=\"Emotes Widget\"\n        src=\"/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png\"\n        srcset=\"/static/a7b59078e3c7a0c92e42827315ff04aa/8ff5a/powerbar-widget.png 240w,\n/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png 461w\"\n        sizes=\"(max-width: 461px) 100vw, 461px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<h2>HOW TO ENABLE</h2>\n<br>\n<h3>Enable Vuukle PowerBar widget using WordPress plugin:</h3>\n<p>In your WordPress Admin panel, go into Settings > Vuukle and choose On for Show Share Bar</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5fe8d95eccbda49e9f5aa79759567765/73b94/powerbar-widget-img-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 63.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACn0lEQVQ4y42Ty08TYRTF+x+4dKMmPvAJRsSCYIwYN/4F7kyMcaVWqxBd4AZWrojG+Fi5IEYSo1Io1YqRRDQKahRCQEFIhUJph3aeLcy0hZ93BlASxbg4ueebO/d859474zt05Bh7Kw5y8tQZ6q82EKy7wrkLlwSXOR+sIxCsJ3BReCDIOcFZyZ0NXPKidw4sRa9G3vPt2ednw+bthCPPcBybVErBNE3hDsVikcWFBRaAvMAWslAoCCu6BEcYi0UKi5LLy9m28ZWW+9m4ZQdt7R3ouk4ikfCipmmomQxaNkvh+yBEH5If7mV8YpJ37wd5MzaD87GLgW8JkoM9zMdHUU0L3z5/DZu27aKjM0IhnycjIq6gC1XNkExmiIW6mbh+h+Hmx3zuGuJzLE3/hII91MfImAhOjTOnp9EMA19l9WG27SzlaagDQx7Ep6ZQxZ3LFUVhZjrBdHKW161faA228fb+W/LFOeYtE33eYS5nYWVz6IaJISZ81Qf8lGwt4UlbSFpUmZ6SljVdkobnNp1Oi7guc3VhoAs0yWtSbMjFK924YrrrcHtlLet3VdD+/AVzdo6MpWLaJmbWxLIscrmcB9exVyjR48txNdy8b9PpJtadaODu7XY+hft4cfMlr250Mzk0iVN0ZHMOtmzP3fwvN8vFqy9Yga/qUC1l5VWEwxHiI3FCTSHCjWFiAzF0S0eZTf9R+DehVYJHPcHOSFSGa5FMp8iYKoYMXVFmvcW4osrsEl+a6T8cVsufsrvCT+RlFHPeJJmIo6VS2CLuDt1djLt1VVU9ri1/AWsK1lYcp2pPLS2ND/jQ0ktXdz/R4R/0jE6TzGhYMru/DX/Nlsv2VrK/pIY7Z+4RvdbJ/UcfaO4b49abr8SSabLmbzf/s5SfxtVwQA6wLvsAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable PowerBar in WordPress\"\n        title=\"Enable PowerBar in WordPress\"\n        src=\"/static/5fe8d95eccbda49e9f5aa79759567765/d9199/powerbar-widget-img-2.png\"\n        srcset=\"/static/5fe8d95eccbda49e9f5aa79759567765/8ff5a/powerbar-widget-img-2.png 240w,\n/static/5fe8d95eccbda49e9f5aa79759567765/e85cb/powerbar-widget-img-2.png 480w,\n/static/5fe8d95eccbda49e9f5aa79759567765/d9199/powerbar-widget-img-2.png 960w,\n/static/5fe8d95eccbda49e9f5aa79759567765/73b94/powerbar-widget-img-2.png 1004w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<Br>\n<br>\n<h3>For Blogger:</h3>\n<p>In your Blogger dashboard, go into Layout tab, edit the Vuukle HTML/JavaScript widget and insert the shortcode <code class=\"language-text\">[vuukle-powerbar]</code>. Then click the Save button.</p>\n<br>\n<br>\n<h3>For JavaScript:</h3>\n<p>In your website’s HTML, insert the following code where you want the PowerBar widget to display</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token operator\">&lt;</span>div <span class=\"token keyword\">class</span><span class=\"token operator\">=</span><span class=\"token string\">\"vuukle-powerbar\"</span><span class=\"token operator\">></span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span>div <span class=\"token keyword\">class</span><span class=\"token operator\">=</span><span class=\"token string\">\"vuukle-powerbar-vertical\"</span><span class=\"token operator\">></span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>div<span class=\"token operator\">></span> <span class=\"token operator\">-</span> Use <span class=\"token keyword\">this</span> div <span class=\"token keyword\">for</span> vertical mode</code></pre></div>\n<hr>\n<br>\n<br>\n<h2>HOW TO CUSTOMIZE</h2>\n<br>\n<h3>JS variables:</h3>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\">powerbar: { enabled: false, //Enables PowerBar widget on the page defaultEmote: 2, //Setting shown emote by default verticalPosition: '400px', //\nSpace from top for veritcal powerbar</code></pre></div>\n<br>\n<br>\n<h3>WordPress Settings</h3>\n<p>Wordpress Powerbar Settings:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 777px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/926c58d41401531bc80bf1ac60ae2e99/108f8/powerbar-widget-img-3.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 42.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABkElEQVQoz4WSTY/TMBRF8+9Zs0SwGwkhIVgAm2HRLhBiQNDFlBnowIxomrSJExLHThrnqwe7nVYFVWJx9WxL7/r4PntpmpKmv5FSUhTFth5k96rrURtQw4a6aWlNxaAzsNW0HaqHrq1p6xqVSzzf9wmC8GB4rLXWcP6CzaMH8PwJ86tLPl1MOX815uzG8P1iBG/PePcl4PPXCYwe45VlidPexBmnSUJsJQvF8HFM//op/fgNKl4yu1vx4WfG2K9YzC5hMmI6i7ie/6LLfDwhBHEck2X5wTCxMQhr6GpmGtK2JzUtmSzQWtGuNX2lqGqDbHpMXVJXFVKv8cIwxF8scFkeCEVMIiJEvLJrQbQMt1otl0RxQmazyl3GuYXIM/L93spbBAFRFKFsXjvDgpulZDrP+bGyQ3GDUepI99H8k/deXpLsnucIc3tjbg2fTTQP3ze8nBoqvbvkr+lL1yxPDtK7uv7G7e0djlSIZEuhLW1jDMMw0PX99uxU80lCR+fIXNM+Q2dYlhp9/8zjP/o/wz8+1aPDe/A4lAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"WP PowerBar\"\n        title=\"WP PowerBar\"\n        src=\"/static/926c58d41401531bc80bf1ac60ae2e99/108f8/powerbar-widget-img-3.png\"\n        srcset=\"/static/926c58d41401531bc80bf1ac60ae2e99/8ff5a/powerbar-widget-img-3.png 240w,\n/static/926c58d41401531bc80bf1ac60ae2e99/e85cb/powerbar-widget-img-3.png 480w,\n/static/926c58d41401531bc80bf1ac60ae2e99/108f8/powerbar-widget-img-3.png 777w\"\n        sizes=\"(max-width: 777px) 100vw, 777px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<h3>Change PowerBar widget type using WordPress plugin:</h3>\n<p>In your WordPress Admin panel, go into Settings > Vuukle, click on the Share Bar Type settings and choose Vertical.</p>\n<p><Br><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/21cdd/powerbar-widget-img-4.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 54.58333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB7klEQVQoz42SzWsTURTF518RQUGEQiyxYNJialOqi24UVHDr2n/FjSuR2jZpa7tTd25UaiGggkpCzUfbNNPpJPP13kySNiT8fDN0QiqN+OBw7n2XOXPveVe7cTPFTGael6+WWFpeZXk1T379Dbn8uopzUT4WKzlWFG9sbrG2scnbd+/RJhJTzMzO47ou3W6XwWBAfML4f9Dv9yP0ej20RDJFJnuXWm0P48jAcRx830cIgW3bCg5OxLaq2VH9X9AmJ5Nk78yhG0d4gYf0Je12G//kFM8PCHyBCH+g4AmJ53mKxVhoE4tPST9+RunrLqWPJZp6i3anw2m9htQPaRgWrnmMY+hIy8STEleJuurjIeJcsTaVWWDhwSN+fy9TWCugVxoIqfz8to1V/MHPA4dmdRejVkXYZtSle0GX8Z2Wmp5l8d599ir7iI7yzRNUDy1aflvFanwpkMoCGQTDkd0xYnboYSJ5i4fpJ+y83sFUo5mWoNg4ofylzOcXn9CrhvJP4qgtiEf7WzS8F8qKZquFdunKNdKZOfbrdYxjM3op17Wxmhb6ga5y91wXo2JD/8JaLHj56nWmM1mMRh2naRJIDytck1DYc0dEzvsWdxrXxahg+naW3HaR5x9+sVWo4KtiuIcxLvTtjEUodsbhdH8AUzUC33Qc1SkAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"WP PowerBar\"\n        title=\"WP PowerBar\"\n        src=\"/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/d9199/powerbar-widget-img-4.png\"\n        srcset=\"/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/8ff5a/powerbar-widget-img-4.png 240w,\n/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/e85cb/powerbar-widget-img-4.png 480w,\n/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/d9199/powerbar-widget-img-4.png 960w,\n/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/07a9c/powerbar-widget-img-4.png 1440w,\n/static/1757e2dcd8f7b1ac4c0b58a0cf50295b/21cdd/powerbar-widget-img-4.png 1680w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<p>Put CSS styles for Share Bar Styles (only for vertical type) to place the PowerBar as you like</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fd70876b798769dbb3d24a2a4f6c7355/21cdd/powerbar-widget-img-5.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 54.58333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB20lEQVQoz42SXWsTQRSG97dUihcKhVhiwdiPxKY1iIJ3grf+AX+QlDZpG+qdH3eCN15YBJWmGsx2s8YkuzuzOzO7qwRi1teZcVa2asCFl7MznHnmPWeOdeVqBWvVLTza2UWzdYDd5j5aB2009w/lf0uv52qvhT0Z20ePcdg+wpOnz2AtlVawVtsC5xyTyQQ/sgz5l81myOQ6y2YFZX9pJvOUptMprFK5gmq9gX6/D8/zwBhDmqYQ3yaIRIxYMDAhwKUixhFFkYxsrqzl5TLqtU0MhyMNE/JgnCT4/uEteK+LrktA3TMQx0ZCRhBJquE8jv8pa+nOA6zefwgvCDRMiYQUae8UkevADWSiP0bo+9qtUAdVnoy/ZdZq31qpNnDz7j24jovACxCSEIzKskQC8TVFGgvtSkjX+WFehBnll1iV9Rq2G7fx+sUxOsensN/bGHS/wH7TAx0RXT43PcxL/RPKiw5L5Wu4sX0L/ngMwRkS6SiUjafSqT+UZeaAQpm8ELkBqYsJpbAWFi/h+sYmOp8cdOzPGPgUXD4Ok2PEBT/Xn3MlFvtngFQBL1y8jNVqHS9PzvD8nYNXHwfSKf8FNa8+F6hAJiY5cMEAfTWDUag39awZ/Y/DHBoQgp9fcAR2IUjIngAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"WP PowerBar\"\n        title=\"WP PowerBar\"\n        src=\"/static/fd70876b798769dbb3d24a2a4f6c7355/d9199/powerbar-widget-img-5.png\"\n        srcset=\"/static/fd70876b798769dbb3d24a2a4f6c7355/8ff5a/powerbar-widget-img-5.png 240w,\n/static/fd70876b798769dbb3d24a2a4f6c7355/e85cb/powerbar-widget-img-5.png 480w,\n/static/fd70876b798769dbb3d24a2a4f6c7355/d9199/powerbar-widget-img-5.png 960w,\n/static/fd70876b798769dbb3d24a2a4f6c7355/07a9c/powerbar-widget-img-5.png 1440w,\n/static/fd70876b798769dbb3d24a2a4f6c7355/21cdd/powerbar-widget-img-5.png 1680w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>","frontmatter":{"title":"PowerBar widget and everything you need to know about it","date":"August 23, 2017","category":"Vuukle Widgets","tags":["widgets","powerbar","wordpress","javascript","blogger"],"shortDescription":"Simple steps to enable PowerBar widget in your article with WordPress, javascript or blogger"}}},"pageContext":{"id":"e31462c7-fbc4-5dcb-9c7e-c2a890157bb1"}}}