Have you ever seen those social media buttons on a website and wondered: “How to add social media buttons to a website ?”
Well this is your lucky day because this post will show you how to add your own buttons for free in less than five minutes. Do not worry! This is an easy guide and I will try to explain it as simple as I can. However, if you got stuck at any moment during the tutorial please ask me in the comment section!
There is no point in getting into technical details. Most website owners have no idea about how to write a line of code and they are right. You don’t need to spend a lot of time in order to learn HTML&CSS to add those buttons to your website. In today’s society there tend to be more and more “plugins” that simplify the website owner’s life.
You are basically looking for a WordPress share plugin:
For this, I personally use the “Social Pug” plugin. It is free and simply to use it. Here is how you can install Social Pug on WordPress.
Once you are in your dashboard go on the left menu, click on Plugins and then click on “Add New”. From here, search for “Social Pug” on the search bar in the up right corner of the screen.
Check out the version with 30,000+ installs and click on the “Install Now” button. In my screen it only shows Active since I already installed him and activated. After you installed it click on Activate. Once activated, check on the left menu and a new component “Social Pug” should appear. Hover your mouse over it and click on Toolkit. After that it should look something similar as this:
Click on the circle and switch it to Active. The Floating Sidebar will appear in the left or the right area of the page and it will be visible at all time when you scroll up or down through the page or post. The Inline content bar it will appear only in the body part of the page. It will appear under the title and at the end of the post/page.
I usually prefer to use only the Inline Content, but as I mixed this plugin with Elementor, I found out that my Inline bar won’t pop up anymore and I have to put a share widget with Elementor. But, in order to keep it simple, I use both Floating Sidebar and Inline Content and both bars will appear at the posts that are not edited with Elementor.
P.S.: Elementor is another plugin that seems to interfere with this one.
Coming back to our subject, after you switched Social Pug from Inactive to Active, click on the settings icon and it should redirect you to a menu similar to this one.
Click on the right button of “Select Networks”, choose all those social media networks and click on Apply selection.
Note: In order for the plugin to work, you should create Social media accounts for your website. Click here to see how to create them.
Now, when it comes to the shape I personally like the rounded one. It is totally up to you. You can set your Inline Content bar to appear Above the text or below or both below and above. I usually set them to appear below the text because I don’t want to spam the share buttons so much. It could make your visitors experience a feeling of harassment.
Those are my other settings. I prefer to live it simple and now to add any Share text message. Make sure to click the Show on mobile box in order for your mobile users to be able to share your content. The Bonus Share Counts it is totally up to you. You can select to show the counts in order for other people to see how many people shared your post/page or not. You also have the option to choose where you want for your share bars to appear: Page, post and Template. I personally selected all of them because when people share your pages/posts will only help you and increase your website traffic. So after selecting them click the save changes button. Don’t worry, you can come at any time and modify them.
You’re done. Check out your pages/posts and see how it looks. Here is how the plugin looks looks on my page:
Don’t know what to write? Check my page right here where I will show you how to create quality content that will engage your visitors!
Got feedback or any other questions? Write them in the comment section below and I will try to reply as fast as I can! 😀