Add social media buttons to WordPress
- Log in to WordPress.
- Install and activate the Contact Widgets plugin.
- In the Dashboard menu, click Appearance, and then below Appearance click Widgets.
- Under Available Widgets, click Social Profiles and then select Add Widget.
- Select where you want it located.
- Click Add Widget.
- 1 How do I add social media icons to WordPress without plugins?
- 2 How do I add social media icons to my website?
- 3 How do I add social media icons to WordPress footer?
- 4 How do I add social media icons to Adobe portfolio?
- 5 How do I add custom icons to WordPress?
- 6 How to Add Social Media Icons to WordPress Menus (Easy Way)
- 7 Social Icons Block
- 8 Create a Social Links Menu
- 9 How to Add Social Media Icons to WordPress
- 10 Does Your Theme Already Provide a Social Menu?
- 11 How to Create Your Own Social Links Menu
- 12 Generating a Social Media Buzz With Simple Share
- 13 Embed Social Sharing Buttons Anywhere on Your Website
- 14 Create a Floating Sharing Bar
- 15 Conclusion
- 16 The Best WordPress Themes and Plugins on Envato Market
- 17 How to Add Social Media Icons to the WordPress Footer
- 18 Where to Place Social Media Profile Icons
- 19 How to Add Social Media Icons to The WordPress Footer
- 19.1 How to Add Social Media Icons to The WordPress Footer Without a Plugin
- 19.2 How to Add Social Media Icons to the WordPress Footer with Social Media Plugins
- 19.3 How to Install a WordPress Plugin
- 19.4 Instructions on How to Add Social Media Icons to the WordPress Footer
- 20 Ending thoughts on how to add social media icons to the WordPress footer
- 21 How to Add Social Media Icons to WordPress
- 22 The How-To
- 23 1. Choose a Social Media Icon
- 24 2. Add Widget and Configure HTML
- 25 Summary
- 26 How to Add Social Media Icons to WordPress Menu (Step By Step)
- 27 Why Add Social Media Icons to the WordPress Menu?
- 28 How to Add Social Media Icons to your WordPress Menu
- 28.1 1) Plugins
- 28.2 2) Add Social Media Icons with the Theme Customizer
- 28.3 3) Using FontAwesome
- 28.4 Add social media icons to the WordPress header
- 28.5 Bonus: Open social media icons in a new tab
- 28.6 How to add social feeds to your site
- 29 Conclusion
Search for and download official social media icons.
- Go to the WordPress Dashboard section, hover mouse to “Media”, then select “Add New.”
- From the Media Library, open the icon’s image, and copy the direct link.
- Select Appearance > Widgets.
There are multiple ways to add social media icons to your website:
- Add icons as images in the desired format -. png,. svg or. eps.
- Add them using icon fonts – FontAwesome, Glyphicons etc.
- Implement icons using WP widget.
- Add social media icons through WP plugin.
How to Add Social Media Icons to Header or Footer
- Go to Appearance → Customize.
- Expand the Menus panel.
- Select the menu to edit or +Add a Menu.
- Click +Add Items.
- Check the menu location where you would like the icons to appear.
- Click Save & Publish.
To add social icons to a page:
- Click the + icon.
- Click Social Icons.
- Click the social icons module to add social profiles.
- Click into Icon Style to customize.
How do I add custom icons to WordPress?
To add WordPress menu icons, select any of the menu items you already have created. Locate the Icon: Select link. Click on that to navigate to the section to add an icon to that particular menu item.
How to Add Social Media Icons to WordPress Menus (Easy Way)
Is it important to you to have social network icons in your WordPress menu? In spite of the fact that WordPress does not provide a section for social network accounts, you can quickly add and display social media icons on any widget-ready part of your website by using WordPress navigation menus. It is our goal in this post to teach you how to include social network symbols into your WordPress navigation menus.
Why You Should Add Social Media Icons to Menus?
The most significant advantage of including social media icons in WordPress menus is the ability to rearrange the order in which they appear via the use of a simple drag and drop interface. It is possible to display social media symbols in your sidebar by utilizing third-party plugins; however, the majority of these solutions are less versatile. Additionally, when you add social media icons to WordPress menus, they may be shown on any widget-ready location of your site, such as your sidebar, footer, underneath posts, and so on.
As a result, let’s take a look at how you may quickly and effectively add social media icons to your WordPress menus.
Adding Social Media Icons to WordPress Menus
The first step is to download, install, and activate theMenu Imageplugin on your computer. For further information, please refer to our step-by-step instructions on how to install a WordPress plugin (included). Following activation, you must navigate to theMenu Imagepage inside your WordPress administration section. Following that, you will be able to customize the picture sizes that will appear in your menu. You have the option of leaving the sizes at their original settings or modifying them to meet your requirements.
- Once you’ve completed this, you’ll need to navigate to Appearance » Menus in your WordPress administration area.
- You may then give your menu a name and click on the ‘Create Menu’ button to begin the creation process.
- Input the URL of your social network page, along with any link text you want to include, then click the ‘Add to Menu’ button.
- After that, if you hover over your freshly constructed menu, you’ll notice an option that reads ‘Menu Image,’ which is what you should select.
- In the next seconds, a popup window will emerge with all of the options for your social media symbol.
- If you choose the Image option, you will be able to submit an image of the social networking site by selecting the ‘Set image’ option from the drop-down menu.
- On the other hand, you may pick the Icon option and then choose a social networking icon from the drop-down menu that appears.
Alternatively, if you simply want the social icon to be displayed and not the associated label, you may pick the ‘Hide’ option under the Title position setting.
Simply repeat the process to include as many social media icons as you require.
It’s also possible to include a social symbol menu in your WordPress sidebar.
You should choose the social menu that you built above from the Select Menu dropdown menu, and then click on the ‘Save’ button to save your changes.
You will need to apply custom CSS to the widget in order for it to look precisely like that.
We hope you found this post useful in learning how to include social media symbols in WordPress menus.
We encourage you to subscribe to our YouTube Channel for more WordPress video tutorials if you enjoyed this post.
Please be aware that our material is sponsored by our readers.
See how WPBeginner is supported, why it is important, and how you can help us by donating. The Editorial Staff at WPBeginner is a group of WordPress specialists, lead by Syed Balkhi, who provides guidance and support. Over 1.3 million readers around the world put their trust in us.
Social Icons Block
The Social Icons block is a collection of icons that represent social media. This feature allows you to include social media icons on any page or post and lead visitors to your social network profiles. Here’s an illustration: The following is a table of contents: Adding the Social Icons block is as simple as selecting it from the Add Block button and pressing Enter. Alternatively, you may start typing/socialing on a new line and hit the enter button. As soon as you add the block for the first time, you will be presented with a Size setting that will assist you in defining the size of your icons: For additional information, please see our full instructions on how to add blocks.
- To add your first icon, click on the plus sign (+button).
- You can choose the symbol you want from the list, or you can search for a specific icon, such as “Facebook,” using the search option.
- You may then attach the emblem to your social media profile, if you choose.
- Enter the link to your social network profile by typing or pasting it into the text box and clicking the arrow icon.
- The following is the table of contents:
Add New Icons
The Social Icons block is a collection of icons that represent social networks. makes it possible to include social network icons on any page or post and lead visitors to your social media profiles. As an illustration, consider the following sentences: a list of the topics that will be covered The Social Icons block may be added by selecting it from the Add Block drop-down menu. Instead, you may start a new line and type/social on it, then hit return. As soon as you add the block for the first time, you’ll notice a Size setting, which will assist you in defining the size of your icons: Size.
- ↑ The following are the contents of the table of contents It will appear as a+button when you initially add the block.
- After that, you’ll get a list of all the icons that are currently accessible.
- The icons may then be shared across all of your social media networks.
- You must first click on the symbol once before a box appears for you to type in your address.
Adding a link to your social symbol If you do not provide a link to your social icon, you will not be able to see the icon on your preview or on the live website. The following are the table of contents:
List of Supported Icons
There are a variety of icons available for use, including:
- 500px, Bandcamp, Behance, CodePen, DeviantArt, Dribbble, Dropbox, Etsy, Facebook, Flickr, Foursquare, GitHub, Goodreads, Google, Instagram, Last.fm, LinkedIn, Email (mailto: links), Mastodon, Meetup, and Twitter
- Among the sites that accept RSS feeds include Medium, Patreon, Pinterest, Pocket, Reddit, RSS Feed (URLs that begin with /feed/), Skype, Snapchat, Soundcloud, Spotify, Telegram, TikTok, Tumblr, Twitch, Twitter, Vimeo, VK, WordPress, Yelp, and YouTube.
Remove an icon
In order to delete an icon, first click on it to bring up the icon’s own toolbar. Remove the social media symbol by clicking on the ellipsis (three-dot) button next to it and selecting Remove Block:Removing a social media icon ↑ Section I: Table of Contents
In order to uninstall an icon, first click on it to bring up its own toolbar. Remove the social media icon by clicking on the ellipsis (three-dot) button next to it and selecting Remove Block:Removing a social media icon from your website ↑ The following are the contents of the table of contents
In the block settings, you have the option of selecting one of three distinct icon styles: arrow, square, and circle. Settings that are not allowed
You have the option of selecting the justification of the icons from the left, center, right, or space between objects on the screen.
You may also choose to open the links in a new tab by selecting the “Open in a new tab” option from the drop-down menu on the right. When this option is enabled, the links in the social icons will open in a new tab on your browser.
There are two color settings options that you may change under Color Settings.
- Color of the icons in the Social Icons block may be changed using the icon color property. The background color of all icons may be changed by selecting it and pressing Enter.
This page allows you to add a CSS class to your block, which gives you the ability to create custom CSS and design the block anyway you see appropriate. The advanced option allows you to customize your block by adding a CSS class to it. Each social media symbol can also be assigned to a certain class. By picking an icon and editing the Additional CSS Class field for that icon, you may add a class to it as follows: The CSS class field for a single icon is seen below.
Create a Social Links Menu
Many themes have a built-inSocial Links Menu, which displays visually appealing icons that link to services such as Twitter and Facebook, allowing visitors to reach you on social media platforms. This tutorial will walk you through the process of configuring your theme’s built-in social links menu. It is possible to achieve the same outcome by including a Social Icons block in your theme if it does not already feature a social connections menu. Section 1: Table of ContentsIf your theme does not include a spot for a Social Menu, you may check by navigating to AppearanceCustomize Menus View all Locations.
The following are the steps to creating a social links menu:
- It is possible to edit a Social menu that has already been established if you see it highlighted in red. Otherwise, clickCreate New Menuinstead and enter a name for the menu, such as “Social” for instance.
- UnderMenu Locations, make sure that the checkbox forSocial Links/Iconsis selected:
- To add your first social media link to the menu, select + Add Items:
- To add your second social media link to the menu, select + Add Items:
- To add your third social media link to the menu, select + Add Items:
- URL: Include the address of one of your social media profiles in this field. For example, if you have a link to your Facebook page, you would put that link into the URL area of the form. Text for the link: Fill up the blanks with the name of the social networking site, such as Facebook or Instagram.
- Once you have completed both forms, click on the Add to Menu button.
- Repeat the preceding steps until all of the social media profiles that you wish to utilize have been added to the menu:
- At the end, click “Save Changes.” You should have a look at your website to view your fresh updated social media icons.
The following is the table of contents:
When you link to any of the following sites from your social links menu, the emblem for that site will immediately appear in your menu:
- 500px, Amazon, Apple, Bandcamp, Behance, CodePen, DeviantArt, Digg, Dribbble, Dropbox, Etsy, Facebook, Flickr, Foursquare, GitHub, Goodreads, Google+, Instagram, LinkedIn, and email (mailto: links) are all good places to start.
- Meetup, Medium, Pinterest, Pocket, Reddit, RSS Feed (URLs that begin with /feed/), Skype, SlideShare, Snapchat, SoundCloud, Spotify, StumbleUpon, Tumblr, Twitch, Twitter, Vimeo, VK, WordPress, Yelp, and YouTube are just a few examples.
Older themes may support a different collection of icons than newer themes; the documentation for your theme should indicate the icons that are supported. After that, you may personalize the menu design.
How to Add Social Media Icons to WordPress
11 minutes to complete the reading Today, social networking is one of the most successful methods to advertise your WordPress website, earning you important word-of-mouth marketing, enhancing your SEO, and allowing you to develop a more personal contact with your audience. Languages: As a result, why make it tough for people to interact with you on social media sites like Facebook, Twitter, Instagram, and all of the other important ones? Despite the fact that many WordPress themes provide built-in social networking buttons, what happens if your favorite WordPress theme does not include this critical feature?
You will learn how to integrate crucial social networking elements into your WordPress website in this lesson.
Do you require a shortcut?
Icons for social media sites are available for free.
I’ll also show you how to include social sharing indicators into your website, including a floating bar that follows visitors as they scroll up and down the page, ensuring that your social sharing buttons are always within reach.
Does Your Theme Already Provide a Social Menu?
Exist any social media profiles related with your website that I should know about? It’s possible that you’ve set up a Twitter or Instagram account where you publish your most recent blog entries, or that you’d like to include a link to your personal Twitter account so that your audience can get to know who is behind the website. The methods I’ll be addressing in this area will include linking to your social media profiles from your website, as well as other methods. In most cases, these social network links are represented as icons; for example, in the accompanying screenshot, I’ve included links to my Twitter, Facebook, and Instagram accounts.
There are a variety of approaches you can take to include social media symbols into your website, but one of the simplest is to pick a theme that has a pre-built social connections menu.
Despite the fact that the social connections menu is one of the most straightforward methods to advertise your social media accounts, each theme only supports a limited number of icons that you are unable to change.
To make the social connections menu appear, follow these steps:
- If you haven’t done so previously, create a WordPress account. To customize the appearance of WordPress, go to AppearanceCustomize in the left-hand menu. Create a new menu by selecting SelectMenusCreate New Menu
- Give your menu a name that is descriptive
- Select theSocial Links Menu checkbox and then press the Next button.
To add the first icon to your menu, select Add Items from the drop-down menu and then click to expand theCustom Linkssection. In theURLfield, you can enter the URL of your social network profile, for example, or any other URL. When you’re satisfied with the information you’ve entered, click the Add to Menu button. Repeat the process for each social network profile that you wish to add in your menu, and you’re done. Once you’ve added all of your social media profiles, you’ll be able to publish your menu by selecting Publish from the menu bar.
How to Create Your Own Social Links Menu
If your theme does not have a social connections menu, and altering your theme is not an option, one option is to install a plugin to accomplish the same result. It will be demonstrated in this part how to add social buttons to any widget area by utilizing the Social Icons Widget. To install and activate this free WordPress plugin, follow these steps:
- If you haven’t done so previously, create a WordPress account. Navigate to the PluginsAdd New menu option on the left-hand side of the screen. Start typingSocial Icons Widget by WPZOOM into the Searchbar on the left side of the screen. When the proper plugin is displayed, choose it by clicking on its associated button. Install the Nowbutton now
- When the Activatebutton appears, click on it to activate it.
Your plugin is now complete and ready to use! So let’s put it to use to build some connections to our social media profiles, like this:
- To customize the appearance of WordPress, go to AppearanceCustomize in the left-hand menu. Widgets can be found in the left-hand menu. Choose the widget area in which you want to display your social icons, such as the Blog Sidebar or the Footer 1 of your website. Add a Widget is selected.
Start typingSocial icons by WPZoom in theSearch widgetssection, and when the plugin appears, choose it from the list that displays. If you want any title text to appear in bold above all of your social icons, you may enter it in the Title field. For example, “Follow us on social media!” The Text above iconssection allows you to provide some optional text that will be shown above the icons for your social network accounts. A subheading is created in the widget area, and it appears below anyTitletext that you enter into it.
- Alternatively, if you go down to theIconssection at the bottom of this menu, you will discover the default label for each social network, which you may alter if necessary.
- Select Add additional from the drop-down menu and then input the URL for one of your social networking profiles, such as or.
- Select whether opening a link from one of your social media icons should open a new tab or if the link should be accessed in the current tab when clicked.
- The majority of these options are rather self-explanatory in their nature.
It’s worth spending some time getting to know these options in depth since you may come up with some amazing and distinctive effects. As soon as you’re satisfied with your settings, clickApply, and connections to all of your social media profiles will be automatically added to your site.
Your social media accounts may be a very effective tool for advertising your website and business. However, by encouraging visitors to share your material via their own social media profiles, you may reach an even larger audience. Not only may social sharing bring your website to the notice of a completely new audience, but people are more inclined to pay attention to material that has been shared organically by a third party rather than by the person who generated it. If you make it simple for others to share your material, you may find that a significant portion of your website’s traffic originates from outside sources!
- As part of this segment, I’ll show you how to include these quick and simple social sharing buttons into your website by utilizing the Simple Share Buttons Adder.
- Depending on your needs, you may want to restrict these buttons to certain webpages or embed them in the midst of blog entries so that readers don’t have to scroll to the bottom of the page in order to share your information.
- This might be useful if you’ve made money from your website by opening an Amazon affiliate store, but you’d prefer people to share your website’s original content rather than things from Amazon.
- After we’ve finished with this simple row, I’ll go through some more options for displaying these buttons, such as embedding them into your text using a shortcode or changing them into a floating share bar.
- Simple Share Buttons Adderplugin may be found by searching for it and clicking onInstall Now when it appears.
- With the use of drag and drop, you can now construct a collection of all your favorite social media networks.
- You may use the sliders to limit the visibility of these buttons to particular types of content, such as Pages, Posts, and the Homepage.
- You will find several styling choices for your sharing buttons when you use Simple Share Buttons Adder, so be sure to click to expand theStylingsection and spend some time examining the various possibilities accessible to you.
- You may also wish to include a live counter at this point, which will reflect the number of times a certain piece of content has been shared on social media.
- When you’re satisfied with your settings, click the floppy-disc symbol to return to the vintage mode.
Your website will now display the social sharing buttons that you have selected. If you click on any of these buttons, a popup window will appear, which will provide all of the information you need to share this material on your preferred social networking site.
Embed Social Sharing Buttons Anywhere on Your Website
Alternatively, after your social sharing buttons have been configured, you may embed them in any area by utilizing the shortcode that has been produced automatically. By showing your sharing buttons directly after your site’s most appealing piece, you may, for example, encourage readers to share your blog article with their social networks. To include your social media sharing icons on any page of your website, follow these steps:
- Simply navigate to SettingsSimple Share Buttons in the WordPress left-hand menu. Continue reading until you reach theShortcodesection, and then click to enlarge it. A shortcode should be shown as a result of this. Copy the shortcode by clicking on the Copybutton that appears next to it. Using your browser, navigate to the page, post, or any other item where you want your sharing buttons to appear and open that item for modification
- Discover exactly where you want these buttons to appear on your website, then copy and paste the shortcode into this part
Your social sharing buttons will now show exactly where you indicated they would.
Create a Floating Sharing Bar
You may encourage people to share your material by making sure that your social sharing buttons are constantly visible and easily accessible to them. Using this plugin, it is easy to build a floating sharing bar that will follow visitors around the website as they scroll down. The following steps were taken to make this floating bar:
- Navigate toSettingsSocial Share Buttons and select the appropriate option. Select the Share Bartab from the drop-down menu. Navigate to theShare Barslider and move it into theOn position
You may now configure your share bar in the same manner that you configured your social sharing buttons in the beginning of this article.
The information presented in this lesson shows you how to encourage website users to follow you on all of the main social media networks and to share your material on their own social media accounts. A variety of methods in which you may edit the default social network buttons to match the design and feel of your website were also discussed, as was the ability to adjust the location of these symbols on your website. Do you have any methods or pointers for getting others to connect with you on social media that you could share?
Please share your thoughts in the comments box below!
The Best WordPress Themes and Plugins on Envato Market
On ThemeForest, you can browse thousands of the greatest WordPress themes ever produced. On CodeCanyon, you can find the most popular WordPress plugins. Acquire one of these high-quality WordPress themes or plugins to enhance the user experience on your website for both you and your visitors. Here are a handful of the most popular and soon-to-be-popular WordPress themes and plugins available for purchase in 2020. Jessica Thornsby is a technical writer based in Sheffield who specializes in medical terminology.
She is the co-author of iWork: The Missing Manual and the author of Android UI Design, both of which are available on Amazon.
Social media platforms aid in the popularization and well-knownization of businesses and websites among their target customers. It increases brand recognition, which has a variety of benefits. Knowing how to include social media icons in the WordPress footer will help you do the following:
- Increase your SEO ranking
- Gain significant word-of-mouth promotion
- And assist in developing a more personal interaction with your audiences or visitors.
Businesses may benefit from the use of social media platforms such as Instagram, Twitter, Facebook, and others. They have the ability to improve and enhance the relationship with possible clients or prospective consumers. Social media marketing has also become much more manageable in recent years. Facebook postings may be scheduled quite quickly, and there are programs that interact with all of the big social media networks. It is critical to establish a connection between visitors and the company’s social media profiles.
Visitors will be encouraged to follow the company’s social media profiles as a result of this.
This may be accomplished by website owners by including social network icons on their pages.
There are a variety of approaches that may be used to entice people to social media pages.
Using plugins to share social network accounts is the most simple and time-saving method available. There are a variety of free and paid plugins available for including social media icons in the WordPress footer.
Where to Place Social Media Profile Icons
The primary objective is to direct users to the company’s social media pages. As a result, it is critical to remember that these symbols should not be spammy or crowded in their appearance. Before adding icons, take into consideration the present theme and web design. Site owners may either insert icons directly in the footer or utilize the widget area that is included with the theme to display icons on their pages. It is possible to include social networking icons in the widget that appears next to the header of the page.
The steps outlined here will walk you through the process of adding social media icons to your WordPress footer.
Before installing any plugins, make sure that the theme you’re using provides an option to add icons to page sections. If this is not the case, it will be essential to employ code or a third-party icon plugin for WordPress. In the case of people who do not possess technical or coding abilities, plugins are a viable solution. The plugin will take care of all of the tedious tasks. All of the well-known platforms are covered in this package. Manual inclusion of less popular social media networks, on the other hand, will be required.
Adding social media symbols by hand might have its merits in some situations. It is possible to personalize and include less popular social media networks in the article or website parts as well as to remove them. Despite the fact that this involves the use of HTML code, the directions are straightforward. The next part shows how to accomplish this despite the fact that you are a complete novice in coding. Despite the fact that this article is designed for people who do not have CSS or programming abilities, it is simple to follow.
To prevent this, do the following steps: Navigate to the Images section.
To re-use an image, click on the Usage Rights labeled for reuse.
- Look for and download official social network icons from the Internet
- Navigate to the WordPress Dashboard area, hover your mouse over “Media,” and then click “Add New.” Open the icon’s picture in the Media Library and copy the direct URL from the image
- AppearanceWidgets should be selected.
- Select the widget space where you want to set the social media icons, and then insert a Custom HTML widget into it. Copy and paste the HTML code provided below to create and update a customized HTML document.
A href=”web address such as the address of a Facebook page, Twitter account, or other social media account” border=”0″ /> img border=”0″ /> alt=”alternet text” src=” ” width=”100″ height=”100″/a alt=”alternet text” src=” ” width=”100″ height=”100″/a
- Copy and paste the HTML code into the picture and use it as a link
- Widget to be saved
- Make a new session of the site and check to see whether the icon placement was effective.
If the procedure of entering social media icons into a widget is successful, the process may be repeated as many times as necessary. A sense of accomplishment comes from learning how to add social media symbols to the WordPress footer without the need of a plugin. It’s simple and convenient, and it helps to increase your online visibility on social networking networks.
WordPress is pre-installed with a number of plugins that may be used to further develop the website. There are several advantages for website owners who learn how to install and utilize these plugins. Plugins can improve the functioning of a page, resulting in increased traffic and conversion rates.
Installation of the plugins is simple; simply activate them and they are ready to use. In addition to including social media icons on a WordPress website, the following add-ons can help make the site more user-friendly:
Social Icons Widget by WPZOOM
This plugin is fully customisable, and it allows users to search for icons using a keyword search. They may also customize the size and cushioning, as well as select from a variety of various designs and colors.
Social Media Buttons
It provides users with the ability to customize and change the icon colors.
Social Media Icons
It offers a web interface that is straightforward and uncluttered.
How to Install a WordPress Plugin
- Access the WordPress dashboard using the sidebar menu and click on “Plugins.” By clicking on the “Add New” button located under the “Plugin” section, a page with a list of available plugins will be shown. Scroll through the list or type the name of the plugin into the search box to find it. Select the WordPress plugin that delivers the most useful WordPress functionality. Select the “Install Now” button from the drop-down menu.
- WordPress will begin the process of downloading the plugin. Upon activation, the “Install Now” button will change to the “Activate” button.
- To install a social media icon plugin, go to the WordPress Plugin Repository and select one from the list. Make changes to the widget to suit your needs and tastes. Customize the hover color, alter the backdrop color, pick an icon font color, adjust the icon size, modify the alignment, and add a title
This makes it simple to match the design of the symbol with the color scheme of the current theme. Users may make icons flat by changing the border radius of the icon to zero and increasing the icon size to around 30 pixels.
- After enabling the plugin, click on the “Appearance” button to see the changes. Users can browse to the Widget page from inside that portion of the site. Location of the Social Icon Widget: The Social Icon Widget may be found on the Widget page. Hold down the Social Media symbol in the Footer area and drag it to the right. Customize the widget to meet your own requirements and preferences.
- Save your changes and check them out on the front-end page.
Knowing how to incorporate social media symbols into the WordPress footer provides a sense of accomplishment. It will raise brand recognition as well as the number of followers. There are several benefits to engaging with visitors through social media sites. Visitors to a website can become followers by clicking on social network buttons. They will then be notified of any new postings, goods, or services that are available. Creating a connection between a company’s website and social media platforms is always a good idea.
Followed by an invitation for visitors to pass along social media links to their relatives and friends.
If you enjoyed reading this post on how to add social network symbols to the WordPress footer, you might also be interested in this article on how to remove dates from a WordPress website.
How to Add Social Media Icons to WordPress
20th of December, 2021 Klara R.3 minutes to read Why not share your other digital presence with your website visitors if you have one in addition to your website? In this post, we will demonstrate how to include social networking symbols into your WordPress website. Visitors may follow you on social media if you make your social media profiles visible to them, and the easiest way to accomplish this is by including social media buttons on your website. Because it doesn’t take up much room, you can position it almost anywhere without it interfering with your overall design.
There are two options for accomplishing this: manually adding the social media icons or using third-party icon WordPress plugins to accomplish the task. If you do decide to make use of plugins, here is a list of some of our favorite ones that you may use to get started:
- Simple Social Icons (with a clean and straightforward layout)
- Social Media Buttons (allows you to change the color of your icons)
- Social Media Buttons (allows you to change the color of your icons)
- WPZOOM’s Social Icons Widget (which can be customized in terms of size and padding, can search for icons based on keywords, and has a variety of designs to pick from, among other features)
Using a plugin is a wonderful option for novices because it does not necessitate a high level of technical expertise on your behalf. However, the majority of them do not include less popular social networking sites like Facebook and Twitter. If you do not see an opportunity to add your specific social profile on the plugin’s settings page, you will have to do so manually.
You will come across some coding, but we tell you that it is not difficult to add social media icons to your WordPress site. Find out how to quickly and simply add social networking icons to your WordPress website by following the steps below.
1. Choose a Social Media Icon
Finding the symbol you’re looking for isn’t difficult at all. There are thousands of options available to you after conducting a fast Google search. Protip: Keep in mind that you cannot just copy and paste symbols from other people’s websites. It may cause you to infringe on intellectual property rights. A solution for this is to filter Google Image Search results depending on the permissions of use that are granted. Navigate to Images-Tools-Usage rights-Labeled for reuse in the menu bar. Now, Google will only provide results that you may use without restriction.
A few websites, such as Iconfinder, supply you with free icon packs that provide a wide variety of options for you to choose from.
Go to Media-Add New and drag the icons into the window.
2. Add Widget and Configure HTML
You must now include the social network symbols into your website through the use of a widget. Navigate to the Customizer-Widgets section of your WordPress dashboard. Then, by dragging “Custom HTML” to your header, sidebar, or footer area, you’ve completed your transformation. Fill in the title with something like “Social Media,” for example, then enter the following code into the body of the document. diva href=” style=”margin:5px”>diva href=” style=”margin:5px”>diva href=” style=”margin:5px”>diva href=” style=”margin:5px”>diva href=” style=”margin:5px”>diva href=” style=”margin:5px”>diva h src=” ” width=”30″ height=”30″ alt=”Instagram”/aa href=” style=”margin:5px” src=” ” width=”30″ height=”30″ alt=”Facebook”/aa href=” style=”margin:5px” src=” ” width=”30″ height=”30″ alt=”Instagram”/aa href=” style=”margin:5px src=” ” width=”30″ height=”30″ alt=”YouTube”/a/div src=” ” width=”30″ height=”30″ alt=”YouTube”/a/div Protip: Did you notice the term username and the brackets that are scattered throughout the code?
- You must replace these with the names of your social media profiles as well as the direct image URL to your symbol.
- Look at the URL column for further information.
- The final version of your code should look somewhat like this.
- After you’ve finished updating the sections of code in your program, click Save.
- Since adding social network buttons to your website has been a successful endeavor, you may repeat the procedure for any other button that you wish to include.
It’s easy to implement and doesn’t take up much of your time, but it may make a significant difference in growing your social media and website engagement.
Including social network icons on your website is a terrific approach to grow your following and boost the general visibility of your company. You should now be able to add social networking icons to your WordPress site. Hopefully, you found this post to be useful. Wishing you the best of luck! Klara works as a writer for digital content. She likes developing e-commerce websites and is always seeking for new opportunities to broaden her IT skills. Klara enjoys traveling and learning about various cultures in her spare time.
How to Add Social Media Icons to WordPress Menu (Step By Step)
If you are running a business or a personal website, you must ensure that people can easily share your material on social networking platforms like Facebook and Twitter. To demonstrate how to incorporate social networking icons into your WordPress menu, we’ve written this article.
Why Add Social Media Icons to the WordPress Menu?
According to recent research, approximately half of the world’s population is a member of at least one social networking website. It is possible to build your social media presence by connecting your website with Facebook or by adding Instagram feeds to your website, but there is something more you can do to increase your social media presence. It is one of the most visible parts on your website, so make it stand out. Aside from that, it’s one of the very first things that consumers see when they arrive at your website.
As a result, you may add social network icons to your WordPress menu in order to personalize your site and make the most of your social media channels.
Despite the fact that certain themes, such as Divi, provide the ability to add social media icons to the menu, the majority of themes do not contain this functionality.
We’ll show you three simple strategies to effortlessly include social media icons in your WordPress menu in this post, so read on!
How to Add Social Media Icons to your WordPress Menu
When it comes to adding social media icons to your WordPress menu, there are three primary options: Using FontAwesome icons in the theme customizer is a manual process. Each approach will be described in detail in this book, allowing you to select the one that best suits your needs.
Using plugins to integrate social media icons on your menu is the quickest and most convenient method. Due to the large number of possibilities available, we have selected two of the most effective plugins available to make your life a little simpler.
With QuadMenu, you can quickly tweak and elevate your WordPress menus to a higher degree of functionality. This is a freemium plugin with limited functionality. Among the options are a free version with limited functionality and three premium subscriptions that include more sophisticated functionality as well as priority assistance.
You’ll need the premium version if you want to include social network icons in your menu. To learn how to install and activate the plugin on your website, continue reading.
Installation and Activation
With QuadMenu, you can simply tweak and elevate your WordPress menus to a higher level of functionality and design. A freemium plugin is available for download here. Additionally, there is a free version with rudimentary functionality as well as three premium subscriptions that include more extensive functionality and priority assistance. You will need the premium version in order to include social network icons in your menu. So, let’s have a look at how to set it up and activate it on your website:
QuadMenu is compatible with any theme, free or paid. Although we will be using GeneratePress for this demonstration, the technique is the same for any other theme. To begin, navigate to the plugin’s settings by selecting QuadMenuOptions from the drop-down menu. There are various customization options available, including the following:
- Responsiveness, default theme, customizability, social integration, import/exportability, etc.
Adding social media icons to our major menu is what we’re looking to do in this scenario. As a result, we’ll go with theSocialoption. You will notice a number of default choices, which you may modify or remove based on the channels you have available. They have already associated social media profiles with their respective symbols. You may, however, personalize them by selecting the+ Add Iconbutton from the toolbar. Additionally, by hitting the Plus button, you may add new social media outlets to your account.
- When you click on the + Add icon, a pop-up window will appear with a variety of icons from which you may pick.
- As you can see, we looked for Facebook symbols during our search.
- You may also edit the titles and URLs of the documents.
- Following that, navigate to the WordPress menus.
- The QuadMenu choices on your menu must be designated as QuadMenu Devunder the Menu settings in order to be accessible.
- The QuadMenu selections will be shown on the following page load.
- Add them to the menu by selecting them and pressing Add to Menu.
- When you move your mouse cursor over the QuadMenu, you will see the customization choices.
- Other than that, simply click on theSave Menubutton and you’re ready to go.
It is now necessary to review the outcomes. So, go to the homepage of your website and you will see the social media icons.
Additionally, when you hover over them, the icons will be displayed. That’s all there is to it! With QuadMenu, you have successfully incorporated social media icons to your WordPress menus, which is a great accomplishment.
1.2) WP Menu Icons
Don’t be concerned if you are unable to buy any premium plugins. We’ve got a free solution for you right here. In this part, we’ll teach you how to integrate social media icons into your WordPress site using a free plugin called WP Menu Icons.
Installation and Activation
First and foremost, you must install and activate WP Menu Icons on your website. Aside from being extremely simple to use, this tool does not require any extra modification.
Customizing Menu Icons
It is possible to build a menu on your site from the setup area if you do not already have one. After you’ve assigned a location to your menu, you’ll be able to begin adding items to it. Custom Links is the item to use if you want to include links to your social media profiles in the menu. You will be required to provide the URL of the page to which you wish to connect as well as a label. Then select Add to Menu from the drop-down menu. Following the addition of the icon to the menu, the settings page will appear as shown below.
- In this particular situation, we’ve included icons for Twitter, Pinterest, and Instagram in our menu.
- That is the parameter you must utilize in order to add icons to the menu items, so make sure you do so.
- Because there are dozens of icons, you should utilize the search option to narrow down the results to what you desire.
- Following your selection of the icon, you will see the icon settings in the right column of the screen.
- In this particular instance, we’ll conceal the label.
- In the same manner, you may edit the Pinterest, Twitter, and Instagram icons on your website.
- It is now necessary to review the outcome.
- Using WP Menu Icons, you can easily add social networking icons to your header menus in WordPress, as seen above.
2) Add Social Media Icons with the Theme Customizer
If you don’t want to install any plugins, you may use your theme’s customizer to incorporate social media icons in your menus instead. Avada and Divi are two premium themes that come with integrated theme panels that allow you to tweak the theme and add social media icons. Newspaper and Divi are two more premium themes that come with integrated theme panels. If you’re not sure whether your theme includes the option to include social media icons, navigate to AppearanceCustomizeMenusView Locations in your WordPress dashboard and look for a social menu or social symbol option.
- To begin, navigate to your WordPress dashboardAppearanceCustomize.
- You will find an option to activate social icons in the top section of the page.
- It is also possible to personalize them by visiting the DiviTheme Options page.
- In the default configuration, the social network icons will display in both the header and bottom of your website.
- Other themes, such as Newspaper and Newsmag, offer their own set of customization options, which you may access through a special theme panel.
You can enable and deactivate icons, as well as show them. If you are unable to locate the social media icons area in the theme customizer or panel, please leave a comment below and we will make every effort to assist you.
3) Using FontAwesome
Last but not least, you may manually include social media icons in your WordPress menus. Using a few lines of HTML code, you may show social network symbols on your website even if you are not a developer or do not have coding expertise. FontAwesome’s icons will be used to do this. So the first thing you should do is visit the FontAwesome website to get started. Make use of the search function to locate the icons you want. For the sake of this demonstration, we will look for Twitter symbols. The search results will be displayed on the next page of the website.
You will see the specifics of the symbol you picked on the following page, so simply copy the HTML code for the icon from that page.
Adding Font Awesome Icons To WordPress
Go to the menus area of your WordPress website and make your changes there. The section for custom links may be found on the left-hand side of the page. You will be required to input the URL of your Twitter profile as well as the HTML code that you have just copied into the Link Textfield on the next screen. Once you’ve done that, click on “Add to Menu.” After that, be sure to save your modifications. Then navigate to the frontend of your website, where you’ll see the symbol. This manner, you will be able to include any social media symbol in your menu as you see appropriate.
HTML code doesn’t work
If you’ve completed all of the steps in this article but the HTML still doesn’t work, try the following. If thefabcode doesn’t work, try modifying the HTML code by eliminating theb from thefabcode’s beginning. As an example, the final HTML code in our situation will look somewhat like this. instead, use I class=”fab fa-twitter”/i instead of I class=”fab fa”/i. Example:
Let’s take a brief look at how to add social network icons to your website’s header, which is one of the most common areas to do so. We’ll use the Theme Customizer to do this. It’s important to note that you’ll need a theme that provides you the option to include social network icons in your navigation menu. It’s also important to remember that the procedures may alter somewhat depending on your theme; nonetheless, you should be able to follow the instructions without any problems with the majority of themes.
- Navigate to the AppearanceMenus section of your WordPress dashboard. Create a new menulink next to theSelectbutton by pressing thecreate a new menulink button and giving it a name
- Now you can add the icons to it. After creating a brand-new menu, key in the social media profiles and URLs you wish to include (such as those for Instagram and Facebook), then click “Add to Menu.” Save the changes
- After that, insert the menu you just built into the header area of your website. Save your modifications, and you’re finished! How to add social networking symbols to the WordPress header is explained in detail here.
- AppearanceMenus is located in the WordPress dashboard. Create a new menulink next to theSelectbutton by pressing thecreate a new menulink button and giving it a name
- You can now add the icons to it. After creating a brand-new menu, fill in the social media profiles and URLs you wish to include (such as those for Instagram and Facebook), then click “Add to Menu”
- Changes should be saved
- Next, insert the menu you just built into the header area of your website
- After that, just save your modifications. Adding social media icons to the WordPress header is as simple as that.
Alternative options include adding icons to the footer, which may be accomplished by following the same procedure but selecting Footer as the icon’s destination.
Including social network icons in your WordPress menu will aid in the expansion of your social media presence on the web. In this case, the problem is that when a user clicks on the icon in your menu, the social network page will load in the same window, and the user will be sent away from your website. Changing the social networking icon to open the website in a new tab will solve the problem. Let’s have a look at how to accomplish it. Open the AppearanceMenus in your WordPress dashboard, click onScreen Options in the upper right corner, and check the Enable Link Target option.
Select the Open link in a new tab checkbox for each menu item after that. If you like, you may set each target to blank instead of to target. Finally, save your modifications and you’re finished!
In addition to including social network icons in your menu, you can also provide social feeds on your website to encourage customers to interact with you more. We’ll teach you how to integrate Instagram and TikTok into your website in this section.
Add an Instagram feed to WordPress
The Social Feed Gallery plugin is the quickest and most convenient method to integrate Instagram into your website. You may show your Instagram feed in only a few clicks using this freemium tool, which is available to everyone. First, download and install the plugin from this site. Then, activate it. Afterwards, navigate toSocial Feed Galleryandlog into your Instagram account. Afterwards, navigate toSocial Feed GalleryAccounts, where you’ll be given the choice of logging into either your personal or company account (keep in mind that the business account has more options).
Once that is completed, navigate to theFeedstab and press+Feed to add the feed you wish to show.
Visit our guide on how to integrate Instagram with WordPress for further details.
Add a TikTok feed to WordPress
In a similar vein, you may integrate your website with Tik Tok. We’ll use a plugin called WP TikTok Feed to show TikTok feeds, which is specifically designed for this purpose. This is the most popular TikTok plugin for WordPress, and it is available in both a free and a paid version, with a few premium plans available. Following the installation and activation of the plugin, you will need to link your TikTok account in your WordPress admin and then navigate toTikTok FeedFeeds. From there, select+Feed and enter the feed URL you wish to show.
For more details on how to embed TikTok videos in WordPress, please see our guide on how to embed TikTok videos.
Overall, including social network icons in your WordPress menus is a great approach to increase your social media presence and increase your traffic. In this article, we’ve seen three distinct approaches of accomplishing this goal: There is no need to utilize any additional plugins or HTML code if your theme includes the ability to add icons by default. In the event that you would like a plugin, we propose QuadMenu. It will give you complete control over the modification of your whole WordPress menu, and it also includes a slew of useful functions.
It’s a straightforward tool that will assist you with including social media icons in no time.
The icons may also be customized with a little CSS, or you can choose to skip the style and use the pre-installed icons instead.
Have you found this article to be of assistance? If you did, please let us know in the comments section below and spread the word on social media. Check out the following tutorials for additional information on this topic:
- The best WordPress plugins for including social network feeds
- How to integrate Facebook group feeds into your WordPress site