{"id":10057,"date":"2019-05-20T06:13:23","date_gmt":"2019-05-20T06:13:23","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=10057"},"modified":"2019-10-01T13:29:54","modified_gmt":"2019-10-01T13:29:54","slug":"social-sharing-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/social-sharing-in-amp\/","title":{"rendered":"How to add Social Sharing Icons in AMP"},"content":{"rendered":"\n<p><strong>Follow this below steps: <\/strong><\/p>\n\n\n\n<p>First Go to<strong> WordPress Admin Area<\/strong> -> <strong>AMP option panel<\/strong> -> <strong>Design<\/strong> -><strong>Social<\/strong>S<strong>haring<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3.png\" alt=\"\" class=\"wp-image-14414\" width=\"391\" height=\"481\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3.png 395w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3-244x300.png 244w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3-41x50.png 41w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3-49x60.png 49w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/3-81x100.png 81w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll down a little to see this option.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"570\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-570x1024.png\" alt=\"\" class=\"wp-image-10062\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-570x1024.png 570w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-167x300.png 167w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-768x1379.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-28x50.png 28w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-33x60.png 33w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12-56x100.png 56w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-12.png 986w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><strong>Position: <\/strong>Position: By using this option you can set the position of your social share icons. we have 3 types of positions that are in the single sidebar, above the content, and below the content.<\/li><li><strong>Social Share links to AMP: <\/strong>Once you enable this option social share links will be shared in AMP.<\/li><li>Here is the list of social share icon which we currently support &#8211; <strong>Facebook Like Button,  Facebook, Twitter, GooglePlus, Email, Pinterest, LinkedIn, WhatsApp, Line, VKontakte, Odnoklassniki, Reddit, Tumblr, Telegram, Digg, StumbleUpon, Wechat, Viber, Hatena Bookmarks, Pocket, Yummly, MeWe.<\/strong><\/li><\/ul>\n\n\n\n<h4>The Output of Single Sidebar(left side)<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"489\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-1024x489.png\" alt=\"\" class=\"wp-image-10456\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-1024x489.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-300x143.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-768x367.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/1-21.png 1300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"mce_29\">The Output of Above the content <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"492\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-1024x492.png\" alt=\"\" class=\"wp-image-10457\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-1024x492.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-768x369.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/2-21.png 1291w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"mce_29\">The Output of below the content <\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"498\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-1024x498.png\" alt=\"\" class=\"wp-image-10459\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-1024x498.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-768x374.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15-100x49.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/05\/3-15.png 1268w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3>How to add Sticky Social Icons in AMP<\/h3>\n\n\n\n<p> First Go to<strong> WordPress Admin Area<\/strong> -> <strong>AMP option panel<\/strong> -> <strong>Design<\/strong> -><strong>Single<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><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>\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> 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 <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\n\n\n<p><\/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>Follow this below steps: First Go to WordPress Admin Area -> AMP option panel -> Design ->SocialSharing Scroll down a little to see this option. Position: Position: By using this option you can set the position of your social share icons. we have 3 types of positions that are in&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10057"}],"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=10057"}],"version-history":[{"count":32,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10057\/revisions"}],"predecessor-version":[{"id":14418,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/10057\/revisions\/14418"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=10057"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=10057"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=10057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}