Instructions Quick Tips WordPress

How to add social media buttons to WordPress

Considering all-the-time huge rage of social media these days, content marketing through social media tools has emerged as an essential affair for most of the brands.

What Are The Social Media Buttons?

Social Media Icons represent buttons that allow easy access to your social media profiles to promote your social presence (Facebook, Instagram, Twitter, Pinterest, and others). However, for your clear understanding, we call it social media follow buttons.

Then, there are social media share buttons that enable the visitors to share your content on their respective social media accounts. These share buttons can be present in various places on your web pages. For instance, the landing pages, below the selling products, and at the end of individual blog posts.

The main purpose of these buttons is to increase the potential market for your business, generate more traffic, and most of all enhance your content-reach to the audience.

Adding Social Media Icons In The WordPress Menus

There are two methods for setting up social media buttons on your WordPress website. You can either utilize plugins to add the buttons or simple access WordPress menus. Howbeit, the later one is a preferable option because of the drag-and-drop interface and simplicity in application.

Here, in this article, we’ll explain all you need to know regarding how to set up your social media buttons in your WordPress website.

Using WordPress Menu

The first thing you need to consider is; whether your WordPress theme supports custom menus for social media icons or not (Tip: For the WordPress themes that support these menus, check here!). If it does, setting up social media following buttons is going to be an easy job.

To start off, you will have to go to My Sites, and then click on Customize button beside the Themes. Or you can visit your dashboard to select Appearance.

From the drop down menu, now select the tab Menus. If the social links menu already exists, you can start editing right away. However, if there isn’t any, click on + Add a Menu.

You can type in a title for your menu according to your liking (For example, Social Menu) and then finalize it by clicking on Create Menu.

To start adding your social media icons through the Add Items button, click on the Custom Links for items type on the left side.

Now, you can add your social media links in the URL field by directly copy-pasting it from your social media profile. Furthermore, you can also enter a name in the Link Text bar, before finalizing it through Add to Menu.

You can add as many profiles as you desire, by repeating the same steps mentioned above.

Once you are done adding all of your social media links, you need to find Menu Locations on the Customizing page and tick-check the Social Links option there. Now for the last step, all you need to do is Save and Publish to have your own social links menu.

Using Simple Social Icons Plugin

Though, there are almost hundreds of plugins available on the WordPress library, one of the best and easiest plugins to deploy is Simple Social Icons. It differs from other plugins in the respect that it places all the available configuration options in the widget which makes it super feasible.

To begin with, you have to download and activate the Simple Social Icons plugin.


Next, go to your admin menu page, Appearance→ Widgets. In the other widgets, you can easily find the simple social icons. Now, you just have to drag and drop in your sidebar or other preferred widget areas.

Next, you can select the dimensions, side alignment, and color combination of background and text -along with the color change when you hover the cursor above- according to your choice.

There are 12 social media sites (including email and RSS feed) that can be linked using this plugin. You can, now, simply add the URL in the empty fields of the ones you want to display in your website and leave the rest as it is.

Lastly, Save and Publish. You can also review your site to see the changes.

Displaying Social Media Icons Menu On The Webpage

There are different widget-ready areas on WordPress web pages like sidebar, footer, and header. Although it depends on your theme if it has multiple menu locations options or not, you can always choose the sidebar to display the menu.

To display graphical social icons in any widget-ready area of your website, you can follow these steps,

Visit My Sites→ Customize or Appearance to access Widget panel.

Now, you can either simply drag and drop a custom menu widget to your intended widget area and select the social menu you have already created to save it.

Or you can select the widget area and Add a Widget by first finding Social Icons widget.

Next, you have to enter an appropriate title or choose the default “Follow Us”.

Select a size for the icon and add the URL of your social media profile.

Repeat the steps to add more icons, and click Save and Publish in the end.

Adding Your Own Social Media Buttons By Using Text Widget And HTML

A downfall of the Simple Social Icons is that it displays icons in a particular sequence that can’t be changed. So, if you want to have a bit more control on the order and placement of the icons, you may go with Text Widget and add HTML. Moreover, it also allows complete customization, including the use of your own selected and designed icons that actually match the layout of your site.

First, you need to find/design your desired icons (make sure, they are copyright free, though!). Now, download them into your computer file.

Visit your dashboard. Go to Media→ Add New and upload them on a new blog post.

Next, you have to go to Customizer→ Widget in the homepage. Select the Text Widget and drag it to your sidebar and footer. Now, add a suitable title to the icon.

html

For the HTML, you can copy the above code. You will have to remove the brackets, though and add the particulars that you would like in your icons. In the full link bracket, add the URL of your social media that should start with http:// or https://.

Now to make the icon images clickable that lead the users to your social media profiles, you will have to find the icons in Media Library and edit them to copy the whole file URL there.

Repeat the above steps to every icon. You may edit the features in code according to your wants. Adjust the dimensions that compliment your website’s layout. To make the icons appear in line, all you have to do is edit the URLs in the sequence you want.

In the end, all you have to do is save it and review your new icons by visiting your site.

Choose Your Favourite Social Media Icons

If you don’t have the resources to design your own icons, there are various sources from which you can easily find your favorite social media icons. Here are some sources that have free reusable icon images,

If you still don’t find anything to your taste, there is always our good-old Google. Though again, make sure there is no copyright infringement with its reuse.

Pro-Tip: The links that open on the same tab as the blog are bound to cause frustration as it tends to break the attention of your reader. Moreover, it is always difficult to go back the page and continue the reading where you left off. To avoid that, you may want your social media buttons to lead to the linked social media profile in a new tab.

For this, when adding the URLs of your social media profiles to your buttons, always remember to check the Open link in a new tab field.

Adding Social Media Share Buttons In Posts

Now, getting towards the social media share buttons. If you want to increase your brand exposure and improve user experience, having your customers share your content can be a substantially good step towards promoting your business. However, to achieve this, you’d have to establish a smooth and easier way to help your readers share your blogs, deals, and products.

For your convenience, here we are with four easy ways to add social media sharing buttons anywhere on the page, including above and under the posts.

Using JetPack

JetPack is currently supporting almost all of the known and important social media platforms, and also providing multiple options for buttons styles. Here is how you can deploy this plugin on your website,

You can directly download this plugin from your WordPress dashboard. Go to Plugins and then Add New. Find the JetPack plugin or click here. Install it and click Activate.

Connect the plugin with your WordPress account by logging in and syncing it.

After Approving the syncing, you’ll be asked to Start For Free. Remember that JetPack has a premium version too with many features, however, the share buttons are available in the free version too.

Now you can easily find the JetPack menu in your WordPress dashboard.

Next, go to JetPack→Settings. Choose Sharing option to activate it.

Check the Add sharing buttons to your post tab, to display the buttons.

Now get back to your WordPress and open Settings → Sharing.

In the new bar you have to now drag and drop the sharing buttons to Enabled Services. Moving below it, you can edit and customize the settings.

Check the Live Preview to finalize it.

Using Sumo

Having tons of features that can help you accumulate more traffic, this plugin is considered one of the best and easiest methods to display social media share buttons in your WordPress. It is responsive to both P.C and mobiles and also allows hover buttons for images. Here is how to use it,

First of all, download the Sumo plugin from here or find it in your WordPress plugins.

Visit your Sumo dashboard and select Social from the menu.

Now, click on Share from the drop-down menu, and Activate it.

After it’s activation, go to the Settings to choose your preferred design of button from the archive and save it. In the settings, you can also customize the buttons for size, share counts display and other features.

Choose your favorite Layout and Save it again.

In the Services section, connect your social media accounts to finalize it.

Using Social Warfare

If you want to have more freedom in terms of placing the buttons on the top or bottom of the post, Social Warfare is the right choice for you. Although it has some hefty registration fee considering other free plugins, Social Warfare provides lighter, faster and attractive assortment of share buttons.

To download, again you can either find it through your WordPress plugins or visit here.

After downloading, syncing and activating it (Like done with the JetPack), you can find it in your WordPress dashboard on the left side of your navigation menu.

Go to Social Warfare→ Display.

Drag and drop the social media buttons that you want to display on your site, to Active section. Here, you can edit the further settings according to your wish. There is also Pin hover button option for images.

For other sections like Style, Social Identity and etc, you can choose designs and add URLs of your social media sites accordingly.

In the end, add your valid license key in Registration tab, Save it. Preview it, and enjoy.

Using Social Pug

Another free plugin that provides customizable social media share buttons. Along with the regular attributes, one important feature it provides is the floating sidebar with share buttons that follow the readers when they scroll up and down, for their convenience.

You can set up Social Pug by following these steps,

Find the plugin through WordPress or here.

Once you have installed and activated it, go to Social Pug→ Toolkit on your dashboard.

You’ll be shown two options of Floating Sidebar or Inline Content. Select whichever you want.

Go to Settings now and Select Networks by clicking on your required social media icons under Social Networks.

Further down the settings, you can customize your buttons according to your layout and preference.

Save the changes and Preview on the live website.

Conclusion

There are many different ways to set up your social media buttons. While some are easy to deploy and others have multitude of cool features, it’s only up to you to make a sound decision. Above, we have gathered all the easy and commonly-used methods for you with all the details you can ever need. Consider your website’s layout and the main attributes you want your icons to have, and choose accordingly. May you have some kick-ass and aesthetic social media buttons! Good Luck!