{"id":15134,"date":"2019-11-30T06:53:03","date_gmt":"2019-11-30T06:53:03","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=15134"},"modified":"2019-11-30T06:54:04","modified_gmt":"2019-11-30T06:54:04","slug":"how-to-remove-the-social-icon-from-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-remove-the-social-icon-from-amp\/","title":{"rendered":"How to remove the Social Icon from AMP"},"content":{"rendered":"\n<p>In this tutorial, we will show you how to remove the Social Icon from AMP for this follow the below steps.<\/p>\n\n\n\n<p>If you are using any social share plugin for your website and if that plugin is not compatible with our AMP plugin then you will see some ugly design of that social share plugin in AMP like the below screenshot and if you need to remove it then you need to add the custom CSS in AMP. <\/p>\n\n\n\n<p><strong>Social Icon will appear like this in AMP<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"418\" height=\"446\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06.png\" alt=\"\" class=\"wp-image-15135\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06.png 418w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06-281x300.png 281w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06-47x50.png 47w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06-56x60.png 56w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Screenshot-by-Lightshot-2019-11-30-11-48-06-94x100.png 94w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/figure><\/div>\n\n\n\n<p><strong>You can add this CSS to remove it<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.amp-comment-button {\n    display: none;\n}\n<\/pre>\n\n\n\n<p> <br>You need to add this code in the <strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP<\/strong>  option panel-&gt; <strong>Design<\/strong> -&gt; <strong>Global<\/strong> -&gt; In <strong>Custom CSS<\/strong> add this code like below the screenshot. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"477\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-1024x477.png\" alt=\"\" class=\"wp-image-14845\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-1024x477.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-768x358.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/22.png 1305w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li>If you want to display social icon in AMP we have option to display for this follow below steps<\/li><li>You will find this option in the <strong>WordPress Admin Area<\/strong>\u00a0->\u00a0<strong>AMP option panel<\/strong>\u00a0->\u00a0<strong>Design<\/strong>\u00a0-><span style=\"background-color: rgb(232, 234, 235);\"><b>Social Sharing <\/b><\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-1024x517.png\" alt=\"\" class=\"wp-image-15139\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-1024x517.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-300x152.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-768x388.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59-100x51.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/11\/Desktop-2019-11-30-11-56-59.png 1227w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li>Here is the list of social share icon which we currently support \u2013 <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><li> Once you enable this option social share links will be shared in AMP.<\/li><\/ul>\n\n\n\n<p>We are providing compatibility with sassy social share and AddThis Share Buttons plugins.<\/p>\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><br><\/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>In this tutorial, we will show you how to remove the Social Icon from AMP for this follow the below steps. If you are using any social share plugin for your website and if that plugin is not compatible with our AMP plugin then you will see some ugly design&#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\/15134"}],"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=15134"}],"version-history":[{"count":8,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/15134\/revisions"}],"predecessor-version":[{"id":15144,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/15134\/revisions\/15144"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=15134"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=15134"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=15134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}