{"id":25,"date":"2017-04-02T08:14:21","date_gmt":"2017-04-02T08:14:21","guid":{"rendered":"http:\/\/www.loftocean.com\/berry\/?p=25"},"modified":"2020-10-08T12:18:57","modified_gmt":"2020-10-08T04:18:57","slug":"display-social-media-icons-in-header-footer-sidebar","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/berry\/social\/display-social-media-icons-in-header-footer-sidebar\/","title":{"rendered":"Display Social Media Icons in Header, Footer &#038; Sidebar"},"content":{"rendered":"\n<p>You can add icons for the most popular social networks to your site header, site footer and sidebar. The icons are linked to your social media profiles, giving your readers access to your latest status updates. In Berry theme, we offer a special custom menu for adding your social media icons.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"300\" height=\"73\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/Screen-Shot-2017-04-03-at-4.21.22-pm-300x73.png\" alt=\"social icons\" class=\"wp-image-30\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/Screen-Shot-2017-04-03-at-4.21.22-pm-300x73.png 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/Screen-Shot-2017-04-03-at-4.21.22-pm-360x87.png 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/Screen-Shot-2017-04-03-at-4.21.22-pm.png 372w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Set up the social menu<\/h5>\n\n\n\n<p>Please follow the strunctions below to create your social menu:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>On your website dashboard, go to <strong>Appearance<\/strong> &gt; <strong>Menus<\/strong> &gt; <strong>Edit Menus<\/strong>.<\/li><li>Create a new menu. Give it a name, for example, &#8220;Social Menu&#8221;. Then click on the &#8220;<strong>Create Menu<\/strong>&#8221; button.<\/li><li>Find &#8220;Custom Links&#8221; on the left. Enter the link of your social media site, for example, &#8220;https:\/\/twitter.com\/LoftOcean&#8221;. And you can also enter some text into &#8220;Link Text&#8221; field, it&#8217;s optional, and you can enter any text here. Just need to give a correct URL. Click &#8220;Add to Menu&#8221; button.<\/li><li>Repeat to enter your other social media sites&#8217; links.<\/li><li>Find &#8220;<strong>Menu Settings<\/strong>&#8221; option &gt; &#8220;<strong>Theme locations<\/strong>&#8220;, check the box before &#8220;<strong>Social Menu<\/strong>&#8220;.<\/li><li>Click on &#8220;<strong>Save Menu<\/strong>&#8221; button.<\/li><\/ol>\n\n\n\n<p>You can also manage your social menu in Customizer.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"906\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu.jpg\" alt=\"social-menu\" class=\"wp-image-35\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu.jpg 1600w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-300x170.jpg 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-768x435.jpg 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-1024x580.jpg 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-360x204.jpg 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-480x272.jpg 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-720x408.jpg 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-960x544.jpg 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-1440x815.jpg 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-menu-1200x680.jpg 1200w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure><\/div>\n\n\n\n<p>Now your social menu is ready to use.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a name=\"open-in-a-new-tab\"><\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"open-in-new-tab\">Open the social icon link in a new tab when clicking<\/h5>\n\n\n\n<ol class=\"wp-block-list\"><li>When edit your social menu, please click on <strong>&#8220;Screen Options&#8221;<\/strong> button located on the top right corner of the page.<br><img decoding=\"async\" class=\"aligncenter size-full wp-image-231\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options.png\" alt=\"expand-screen-options\" width=\"2560\" height=\"373\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options.png 2560w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-300x44.png 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-768x112.png 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-1024x149.png 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-360x52.png 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-480x70.png 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-720x105.png 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-960x140.png 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-1440x210.png 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/expand-screen-options-1200x175.png 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/li><li>Then tick the box before <strong>&#8220;Link Target&#8221;<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target.png\" alt=\"show-link-target\" width=\"2560\" height=\"932\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target.png 2560w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-300x109.png 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-768x280.png 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-1024x373.png 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-360x131.png 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-480x175.png 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-720x262.png 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-960x350.png 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-1440x524.png 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/show-link-target-1200x437.png 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/li><li>When create\/edit a menu item, tick the box before <strong>&#8220;Open link in a new tab&#8221;<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-239\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab.jpg\" alt=\"\" width=\"1800\" height=\"975\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab.jpg 1800w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-300x163.jpg 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-768x416.jpg 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-1024x555.jpg 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-360x195.jpg 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-480x260.jpg 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-720x390.jpg 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-960x520.jpg 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-1440x780.jpg 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/open-menu-item-in-new-tab-1200x650.jpg 1200w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/li><li>Click on &#8220;Save menu&#8221; button to save the changes. Done.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Add social icons into site header<\/h5>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"481\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded.jpg\" alt=\"social-nav-folded\" class=\"wp-image-44\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded.jpg 1600w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-300x90.jpg 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-768x231.jpg 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-1024x308.jpg 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-360x108.jpg 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-480x144.jpg 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-720x216.jpg 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-960x289.jpg 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-1440x433.jpg 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-nav-folded-1200x361.jpg 1200w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure><\/div>\n\n\n\n<p>Go to <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong> &gt; <strong>Header<\/strong>, find the option <strong>Social Icons<\/strong>. Check the box to show your social menu in the site header.<\/p>\n\n\n\n<p>And you will see another option below: <strong>Fold Social Icons<\/strong>. You can choose to check the box so social icons will be folded, and hover\/click on the <i class=\"fa fa-share-alt\"><\/i> icon to show them. So the social icons won&#8217;t overlap the site menu, especially when they are both long.<\/p>\n\n\n\n<p><strong>Please note<\/strong>: Social icons will always be folded when screen width is smaller than 980px.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Add social icons into site footer<\/h5>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"1019\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer.jpg\" alt=\"social-in-footer\" class=\"wp-image-52\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer.jpg 1800w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-300x170.jpg 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-768x435.jpg 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-1024x580.jpg 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-360x204.jpg 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-480x272.jpg 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-720x408.jpg 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-960x543.jpg 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-1440x815.jpg 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-in-footer-1200x679.jpg 1200w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/figure><\/div>\n\n\n\n<p>Go to <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong> &gt; <strong>Footer<\/strong>, find the option <strong>Footer Social<\/strong>. Check the box before &#8220;Check to enable social icons&#8221; to show your social menu in the site footer.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Add social icons into sidebar<\/h5>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"982\" src=\"http:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget.jpg\" alt=\"social-widget\" class=\"wp-image-54\" srcset=\"https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget.jpg 1800w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-300x164.jpg 300w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-768x419.jpg 768w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-1024x559.jpg 1024w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-360x196.jpg 360w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-480x262.jpg 480w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-720x393.jpg 720w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-960x524.jpg 960w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-1440x786.jpg 1440w, https:\/\/www.loftocean.com\/berry\/wp-content\/uploads\/sites\/5\/2017\/04\/social-widget-1200x655.jpg 1200w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/figure><\/div>\n\n\n\n<p>Go to <strong>Appearance<\/strong> &gt; <strong>Widgets<\/strong>, find the custom widget <strong>Berry Social<\/strong>. Add this widget into the sidebar. Then you can choose to enter a title for it.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Supported Social Icons<\/h5>\n\n\n\n<p>Currently, we support adding icons for the following 22 social networks:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Facebook<\/li><li>Twitter<\/li><li>Google+<\/li><li>Instagram<\/li><li>Pinterest<\/li><li>Behance<\/li><li>LinkedIn<\/li><li>YouTube<\/li><li>Vimeo<\/li><li>Snapchat<\/li><li>Medium<\/li><li>Flickr<\/li><li>Etsy<\/li><li>Dribbble<\/li><li>Tumblr<\/li><li>Vine<\/li><li>Bloglovin<\/li><li>RSS<\/li><li>VK<\/li><li>Reddit<\/li><li>Yelp<\/li><li>Delicious<\/li><\/ul>\n\n\n\n<p>The share icon <i class=\"fa fa-share-alt\"><\/i> will show if you enter a link of a social network we haven&#8217;t supported yet.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can add icons for the most popular social networks to your site header, site footer and sidebar.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-social"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":5,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/25\/revisions\/400"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}