{"id":17353,"date":"2020-05-19T06:49:12","date_gmt":"2020-05-19T06:49:12","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=17353"},"modified":"2020-05-19T09:25:26","modified_gmt":"2020-05-19T09:25:26","slug":"how-to-add-floating-social-sharing-bar-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-floating-social-sharing-bar-in-amp\/","title":{"rendered":"How to add Floating Social Sharing bar in AMP"},"content":{"rendered":"\n<p><strong>Here is two way to way to add Floating Social Sharing bar in AMP<\/strong><\/p>\n\n\n\n<ol><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-floating-social-sharing-bar-in-amp\/#1-addthis-floating-share\">Addthis Floating Share<\/a><\/li><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-floating-social-sharing-bar-in-amp\/#2-sticky-social-sharing-bar\">Sticky Social Sharing bar<\/a> <\/li><\/ol>\n\n\n\n<h4> <mark style=\"background-color: yellow;\">1) Addthis Floating Share <\/mark><\/h4>\n\n\n\n<p>It is a social sharing menu that sticks on users screens as they scroll down. The floating social sharing bar will be seen the whole time a user reads your article. If you want to add Floating Social Sharing bar in AMP then follow these below steps.<\/p>\n\n\n\n<p>You will find this option in the<strong>\u00a0WordPress Admin Area<\/strong>\u00a0->\u00a0<strong>AMP option panel<\/strong>\u00a0->\u00a0<strong>Design<\/strong>\u00a0-> <strong>Social<\/strong> <strong>Sharing<\/strong> -> Enable &#8220;<strong>Smart Sorting Share Buttons <\/strong>&#8221; option -> Enable &#8221; <strong>Addthis Floating Share<\/strong> &#8221; opton.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"524\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-1024x524.png\" alt=\"\" class=\"wp-image-17354\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-1024x524.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-300x153.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-768x393.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27-100x51.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/27.png 1234w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Smart Sorting Share Buttons: <\/strong>You are using the default AddThis share buttons. To customize your share buttons, create a free account at\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.addthis.com\/register\" target=\"_blank\">AddThis.com<\/a>, then activate the Inline Share Buttons. Once your buttons are activated, replace the default Pub ID and Tool ID with your personalized IDs. For instructions, visit\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.addthis.com\/academy\/how-to-customize-your-share-buttons-on-the-amp-for-wp-plugin\" target=\"_blank\">here<\/a><\/li><li><strong>Addthis Floating Share:<\/strong> If you want to add a Floating Social Sharing bar in AMP then enable this option and then <\/li><li> Once you are finished, click on the \u2018<strong>Save Changes<\/strong>\u2019 button to store your settings. <\/li><\/ul>\n\n\n\n<h4>The Output of the Floating Social Sharing bar in AMP<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"445\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-1024x445.png\" alt=\"\" class=\"wp-image-17355\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-1024x445.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-300x130.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-768x334.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28-100x43.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/05\/28.png 1347w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4><mark style=\"background-color: yellow;\"> 2) Sticky Social Sharing bar <\/mark><\/h4>\n\n\n\n<p>First Go to<strong>&nbsp;WordPress Admin Area<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP option panel<\/strong>&nbsp;-&gt;&nbsp;<strong>Design<\/strong>&nbsp;-&gt;<strong>Single<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"396\" height=\"372\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4.png\" alt=\"\" class=\"wp-image-14416\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4.png 396w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-300x282.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-50x47.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-60x56.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/4-100x94.png 100w\" sizes=\"(max-width: 396px) 100vw, 396px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll down a little to see this option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"920\" height=\"279\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15.png\" alt=\"\" class=\"wp-image-10464\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15.png 920w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15-300x91.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15-768x233.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/5-15-100x30.png 100w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/figure>\n\n\n\n<ul><li><strong>Sticky Social Icons:<\/strong>&nbsp;Sticky Social Icons are social icons which stay sticked to the Single posts \/ Pages. If you don\u2019t want them to be sticky on single pages you can turn off them.<\/li><\/ul>\n\n\n\n<h4 id=\"mce_36\">The Output of&nbsp;<strong>Sticky Social Icons<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"496\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-1024x496.png\" alt=\"\" class=\"wp-image-10469\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-1024x496.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-768x372.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/7-8.png 1348w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Here is two way to way to add Floating Social Sharing bar in AMP Addthis Floating Share Sticky Social Sharing bar 1) Addthis Floating Share It is a social sharing menu that sticks on users screens as they scroll down. The floating social sharing bar will be seen the whole&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17353"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=17353"}],"version-history":[{"count":9,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17353\/revisions"}],"predecessor-version":[{"id":17364,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17353\/revisions\/17364"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=17353"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=17353"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=17353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}