{"id":24708,"date":"2020-10-07T13:44:44","date_gmt":"2020-10-07T07:59:44","guid":{"rendered":"https:\/\/hashthemes.com\/?p=24708"},"modified":"2021-10-28T17:06:19","modified_gmt":"2021-10-28T11:21:19","slug":"create-social-media-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/","title":{"rendered":"How to Create Sticky Floating Social Media Button in WordPress?"},"content":{"rendered":"\n<p>Including the social media button in WordPress website can be a great way to build a social community. It enables your audience to connect with you socially and convert them into your followers. This will not only increase the social reach of your website but will also create a reliable relationship between the web owner and visitors.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#How-to-add-Sticky-Social-Media-Button-in-WordPress-Website\" title=\"How to add Sticky Social Media Button in WordPress Website?\">How to add Sticky Social Media Button in WordPress Website?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Major-Features-of-Simple-Floating-Menu\" title=\"Major Features of Simple Floating Menu:\">Major Features of Simple Floating Menu:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Adding-Sticky-Social-Media-Buttons-in-WordPress\" title=\"Adding Sticky Social Media Buttons in WordPress\">Adding Sticky Social Media Buttons in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Simple-Floating-Menu-Settings\" title=\"Simple Floating Menu Settings:\">Simple Floating Menu Settings:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Button-Position\" title=\"Button Position:\">Button Position:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Orientation\" title=\"Orientation:\">Orientation:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Button-Style\" title=\"Button Style:\">Button Style:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Button-Height-and-Width\" title=\"Button Height and Width:\">Button Height and Width:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Icon-Size\" title=\"Icon Size:\">Icon Size:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Icon-Vertical-Position\" title=\"Icon Vertical Position:\">Icon Vertical Position:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Tool-Tip-Typography\" title=\"Tool Tip Typography:\">Tool Tip Typography:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Floating-Menu-Offset\" title=\"Floating Menu Offset:\">Floating Menu Offset:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Space-Between-the-Buttons\" title=\"Space Between the Buttons:\">Space Between the Buttons:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/hashthemes.com\/create-social-media-button-in-wordpress\/#Z-Index\" title=\"Z Index:\">Z Index:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How-to-add-Sticky-Social-Media-Button-in-WordPress-Website\"><\/span>How to add Sticky Social Media Button in WordPress Website?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now let\u2019s talk about how to add a social media button in your WordPress website. There are many WordPress themes that come with options to include social media buttons on different locations. However, the options will be very limited and you won\u2019t be able to customize the social media buttons as you want.<\/p>\n\n\n\n<p>So, in order to add social media buttons the way you like, you might consider using a WordPress plugin.<\/p>\n\n\n\n<p>Here, we will use <a href=\"https:\/\/wordpress.org\/plugins\/simple-floating-menu\/\" target=\"_blank\" rel=\"noreferrer noopener\">Simple Floating Menu<\/a> to show you how to add social media buttons on your WordPress website. It is a free WordPress plugin that allows you to place different elements like social icons, CTA buttons, scroll to the top button on your WordPress website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Major-Features-of-Simple-Floating-Menu\"><\/span>Major Features of Simple Floating Menu:<strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>5 Pre Available Icon Pack with 5000+ Icons to Choose from<\/li><li>Add Unlimited Menu Buttons<\/li><li>8 Different Position to Display Menu<\/li><li>9 Different Button Shape to Choose From<\/li><li>Customizable Height \/ Width, Icon Size, Color, Tooltip of Button<\/li><li>600+ Google Fonts to Choose From for Tooltips<\/li><li>Add Internal, External, Social Media, or One Page Scrolling Link<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding-Sticky-Social-Media-Buttons-in-WordPress\"><\/span>Adding Sticky Social Media Buttons in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now let\u2019s add a social media button in WordPress website using Simple Floating Menu.&nbsp;<\/p>\n\n\n\n<p>The first thing you need to do is get the copy <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/simple-floating-menu\/\" target=\"_blank\">Simple Floating Menu<\/a> from WordPress.org.<\/p>\n\n\n\n<p>Then, install it on your WordPress website. Once the plugin is installed, activate it. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1403\" height=\"816\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/09\/simple-floating-menu.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25433\"\/><\/figure>\n\n\n\n<p>Upon activation, you can see <strong>Simple Floating Menu<\/strong> on the left menu of your WordPress dashboard. Click on it to continue.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1150\" height=\"850\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/simple-floating-menu-social-media-button.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-24709\"\/><\/figure>\n\n\n\n<p>You will land on the buttons page from where you can add social media buttons.<\/p>\n\n\n\n<p>To add social media buttons, click on \u201c<strong>Add New<\/strong>\u201d.<\/p>\n\n\n\n<p>Now, select the <strong>suitable icon for the button, and enter the URL<\/strong> of your social media channels. Also, give the tool tips text.&nbsp;<\/p>\n\n\n\n<p>After that, choose the favorable color for the <strong>button background, button icons, and tool tips<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Simple-Floating-Menu-Settings\"><\/span>Simple Floating Menu Settings:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>After you have added all the social media button on your WordPress, go to the settings tab to configure it. It contains different options to configure and customize the buttons. Here are some of them below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1000\" height=\"1650\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/simple-floating-menu-setting-tab.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-24700\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Button-Position\"><\/span>Button Position:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The button position will allow you to choose the placement of your social media button. The plugin comes with the option to showcase your floating social button in 8 different positions i.e. Top Left, Top Middle, Top Right, Bottom Left, Bottom Middle, Bottom Right, Middle Left, and Middle Right. Test all the positions and choose the most suitable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Orientation\"><\/span>Orientation:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>From the orientation option, you can either display button horizontally or vertically on your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"398\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/10\/button-positions.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-26010\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Button-Style\"><\/span>Button Style:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>From here, you can choose the most suitable button style. The plugin consists of 9 different inbuilt button styles i.e. Rectangle, Round, Triangle, Rhombus, Pentagon, Hexagon, Star, Rabbet, and Oval. You can choose the most suitable button type of your choice and display them on your WordPress website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"730\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/09\/social-button.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25472\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Button-Height-and-Width\"><\/span>Button Height and Width:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you want to configure the height and width of your social media button, you can do it from here. You will be allowed to choose any height and width to beautifully display them on your WordPress website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Icon-Size\"><\/span>Icon Size:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As you increase or decrease the height and width of your social button, the icons may turn out to be bigger or smaller. In that case, you can configure icons size to make match the size of icons with the button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Icon-Vertical-Position\"><\/span>Icon Vertical Position:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This setting will allow you to move the icon vertically up or down in the box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"400\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/10\/vertical-position-upward.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-26011\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"399\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/10\/vertical-position-downward.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-26012\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tool-Tip-Typography\"><\/span>Tool Tip Typography:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This option allows you choose the most suitable typography for the tooltip. You choose the suitable font family, font style, text transform, and text decoration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"680\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/tooltip-typography.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25485\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Floating-Menu-Offset\"><\/span>Floating Menu Offset:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Floating Menu Offset option will allow you to configure the offset spacing of your button. <\/p>\n\n\n\n<p>It will allow you to move the social media buttons on the top, bottom, left, or right side of your screen depending upon the button position you have chosen.<\/p>\n\n\n\n<p>There are mainly 4 different floating menu offsets:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Left Offset<\/li><li>Right Offset<\/li><li>Top Offset<\/li><li>Bottom Offset<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Space-Between-the-Buttons\"><\/span>Space Between the Buttons:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This option allows you to add spacing between the buttons. It is helpful to if you are looking to add multiple floating buttons on your WordPress website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"680\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/button-spacing.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25487\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Z-Index\"><\/span>Z Index:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In some of the WordPress theme, the menu will override your floating section. If you have installed such type of theme on your website, you can use this setting to bypass the menu.<\/p>\n\n\n\n<p>Once done, click on <strong>Save settings<\/strong> and view the social media button from the frontend of your website.<\/p>\n\n\n\n<p>You can see the <strong>social button<\/strong> like the one in screenshot below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1900\" height=\"900\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/floating-social-media-button-left.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25467\"\/><figcaption>Middle Left<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1900\" height=\"900\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/floating-social-media-button-right.png\" alt=\"Social Media Button in WordPress\" class=\"wp-image-25468\"\/><figcaption>Middle Right<\/figcaption><\/figure><\/div>\n\n\n\n<p>You can also check the similiar tutorial to <a href=\"https:\/\/hashthemes.com\/how-to-create-a-one-page-navigator-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">How to Create a One Page Navigator in WordPress?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Including the social media button in WordPress website can be a great way to build a social community. It enables your audience to connect with you socially and convert them into your followers. This will not only increase the social reach of your website but will also create a reliable relationship between the web owner [&hellip;]<\/p>\n","protected":false},"author":772,"featured_media":26183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[9,36],"tags":[],"class_list":["post-24708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tutorials","category-beginners-guide"],"_links":{"self":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts\/24708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/users\/772"}],"replies":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/comments?post=24708"}],"version-history":[{"count":0,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts\/24708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/media\/26183"}],"wp:attachment":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/media?parent=24708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/categories?post=24708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/tags?post=24708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}