{"id":66,"date":"2023-09-26T07:53:12","date_gmt":"2023-09-26T07:53:12","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=66"},"modified":"2024-01-09T09:26:20","modified_gmt":"2024-01-09T09:26:20","slug":"how-to-set-social-icons-in-your-site","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-set-social-icons-in-your-site\/","title":{"rendered":"How to Set Social Icons in your site?"},"content":{"rendered":"\n<p>Adding Social Media Icons in your website is very important for user\u2019s social media retention and generating more visibility. Many users feel comfortable hanging out in the Social Media rather than searching for your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Guide<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=141&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts at relative time<\/em>.<\/figcaption><\/figure>\n\n\n\n<p>In order to use<strong>&nbsp;Social Icons<\/strong>, you should first enable&nbsp;<strong>Top Area Header<\/strong>&nbsp;as<strong>&nbsp;Social Icons&nbsp;<\/strong>are only displayed on&nbsp;<strong>Top Header<\/strong>&nbsp;for the free version. To do that,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to&nbsp;<strong>Header Settings &gt;&gt; Top Area<\/strong><\/li>\n\n\n\n<li>Then toggle on the&nbsp;<strong>Enable<\/strong>&nbsp;<strong>Top Area&nbsp;<\/strong>option.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"602\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-4.png\" alt=\"Enabling Social Icons\" class=\"wp-image-67\" style=\"width:260px;height:335px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-4.png 468w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-4-233x300.png 233w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>After that toggle on&nbsp;<strong>Enable Social Icon<\/strong>&nbsp;to enable top header for displaying social icons.<\/li>\n\n\n\n<li>Navigate back to<strong>&nbsp;General Settings &gt;&gt; Social Icons&nbsp;<\/strong>to add up to 4 social media icons of your choice.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;Note: Only 4 repeater fields are allowed for the free version. You cannot set&nbsp;<\/em>more than 4 social icons using the free version.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"243\" height=\"393\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-5.png\" alt=\"Set Social Icons\" class=\"wp-image-68\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-5.png 243w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-5-185x300.png 185w\" sizes=\"auto, (max-width: 243px) 100vw, 243px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Drag and drop the&nbsp;<strong>Social Icons<\/strong>&nbsp;block to set the order of their display position in the Top Area Header section.<\/li>\n\n\n\n<li>Click on the eye icon if needed to hide or display the selected&nbsp;<strong>Social Icon<\/strong>.<\/li>\n\n\n\n<li>You can also toggle on or off the \u201c<strong>Open in New Tab\u201d&nbsp;<\/strong>option based on whether you want to display your social media page on a new tab or the same tab.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"474\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Setting-Up-Social-Icon.png\" alt=\"Setting Up Social Icon in Azure News Theme\" class=\"wp-image-69\" style=\"width:567px;height:328px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Setting-Up-Social-Icon.png 819w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Setting-Up-Social-Icon-300x174.png 300w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Setting-Up-Social-Icon-768x444.png 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/figure><\/div>\n\n\n<p>After you have selected the Social icon, add your social media profile link on the link bar.<\/p>\n\n\n\n<p>This will redirect your user directly to your Social Media\u2019s profile after clicking the icon \u201c<strong>displayed on the top right hand side of the top area<\/strong>\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding Social Media Icons in your website is very important for user\u2019s social media retention and generating more visibility. Many users feel comfortable hanging out in the Social Media rather than searching for your website. Video Guide In order to use&nbsp;Social Icons, you should first enable&nbsp;Top Area Header&nbsp;as&nbsp;Social Icons&nbsp;are only displayed on&nbsp;Top Header&nbsp;for the free [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":3,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/66\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}