How to Add Social Media Icons to WordPress

Sharing is caring, so let's make it super easy on your website to share your content.Before we start, we need to download the Monarch plugin from Elegant Themes. If you already have it, you can skip this step. If you don't, just go to the Elegant Themes website and log into your account. If you don't have a subscription yet to Elegant Themes, I would really advise you to do so because the Divi theme is just perfect. If you follow the link in the description of this post, I can get you a 20% discount. So enjoy. If you just login and then you scroll down in your account. You can download Divi, you can download the Extra theme, you can download the Bloom plugin -which I created a awesome tutorial about it - and of course you can get the Monarch plugin. So press 'Download Monarch' and then you can log into your WordPress dashboard. And if you followed my tutorial about WordPress Security, then you notice that you have to fill in again your authentication code on your mobile phone. And on your dashboard you go to 'Plugins' -> 'Add new' and we go to 'Upload Plugin'. We're going to select Monarch right there. And then you click on 'Install Now'.And then you click on 'Activate plugin'. Congratulations! You've just installed Monarch and now the fun will begin. Alright if you want to go to the settings of Monarch you can go to 'Tools' -> 'Monarch' -> 'Settings', it's right there. Click on it. And here you can see the beautiful dashboard of Monarch. We have two types of sharing options you can use social sharing, like the little sidebar I'm going to show you and we have social follow buttons which shows you the exact amount of followers you have, or you can just fill in a random number if you like. But let's start with the social sharing options. If you look at the little green checkmark below it, it means that all these locations are activated on this very moment. So we have the sidebar, in line, pop up, flyin module and also on our media we have the social sharing icons. So you can just go to 'Networks'. Here we're going to configure the networks we want to use. If you click on this button 'Add networks' here you can select all the networks you want to use. You can't see WhatsApp and Telegram in this list but no worries. We'll be adding that at the final section of this post.So select all the networks you want to have on your website. It really depends on the audience.So if you have a blog, with a lot of news, then you might want to use Gmail also. So people can use Gmail to send out the links of your website to other people. Just press 'Apply' right there. And you can also change the order of your networks by just dragging them around like this.And then you can just change whatever you want. So I want to put the email all the way down. I want to put Facebook on top then LinkedIn, Twitter, Reddit, Yahoo Mail and Gmail. And after that comes WhatsApp and Telegram. We'll be adding that later on. And after that, you can change the labels of your buttons. So whatever you can say right here, "follow me on Facebook", or you can just use the names of your networks right there. So let's keep just the network names. That will be great. And on Twitter, you only need to add your username like WPress Doctor, That is very logical.And we press 'Save Changes'. Alright, now we go to our sidebar settings and here you can choose the icon styles of the sidebar. You want this icon, when you hover over it, it really looks beautiful with this little 3D effect and shadow its growing right there. It's moving and with this one its just only the shadow. I really like this first style its great. You can use the shape you want to have it rounded or an entire circle, its completely up to you all works great.And let's go to the display settings. Here you can really change the orientation of your sidebar. Do you want the left side of your website or on the right side? It really depends what's on your website on the left or right side. Let's keep it on the left side. The intro animation, I want it to be slide right, beautiful. I don't want to display my share counts because; if your website doesn't have a lot of traffic, it doesn't seem that good that this page has never been shared before. Or zero times or just one time. I really don't like it. You can use it however if you have a big blog which has a million visitors a year for example, then it counts as social proof. However some people also found it to be a little bit boasting.If you do use it however, you can actually use a minimum count display so after 50 shares, now you will see that it's been shared. I'm going to turn it off because I don't really like these kinds of things. Display total shares - I really don't care. Here you have ' Display all networks button' if you enable this you will get a extra button with all the networks available. And you can hide it on your mobile devices. I don't think you should hide it because Monarch does a excellent job in keeping it responsive, its really great. If you now go down you can actually change the background and hover colors of your icons. And when you change it it actually looks the same as your website itself. I'm going to show you how it looks like right now. Just press 'Save Changes' and open up your website in a new private window. And when I load up my website this is what you see. This is the beautiful website I created with my latest blog tutorial " How to create a professional website" and I'm going to show you how you can create this awesome effects within Divi. Now we have our beautiful sharing buttons right there on the left side and you can even close it. So this is the sidebar function. It really works great. All right, let's get back to the monarch settings and configure some more. All right, so now when I enable display all networks button and I press 'Save Changes' and now you see I actually have another button down there and when I click on it you can see all the networks available within Monarch. That is really great. And also on mobile you get a really nice responsive bar down there. And you can click on 'Share this' and you get the network's we created. It's beautiful. So let me show you how it looks when you use your custom colors on your branded website. Enable custom colors. Select the background color, for example, this golden color I use on the website and I press 'Save Changes' . Also on hover. I also want to have the same color but a little bit more darker. Like this. Press 'Save changes'. So now all the icons have a background color that I use on my website.However, I don't like it because now it doesn't stand out anymore, and the power of the logo has been taken away because the colors are very important for people to trigger it to actually click on this button to share it within Facebook. So I'm going to remove my custom colors and I'm going to save it and now they are back again to the normal colors. Alright, if we now scroll up, let's go to the inline options. The first thing you'll be able to change is the icon style. You want it to do like this, this or this, I really like this one or this one. Just choose whatever you want. You can make them of course, again, rectangle or rounded corners or entirely round.It's up to you. Let's keep it this way. Our 'Display settings' when you want to have it?I want to have it below my content. Because after you've read something, then you want to share it.Not before you read something I think but let's keep it below content. Align them in center.And the number of columns is very important. If you only have four share options, then this is perfect. If you have three or five, then auto-width would be useful for you. But if you want to have more columns, you could also put it on for example six.So let's keep it an auto-width. I don't want to show my share counts because I don't like that.Total shares, display by network names... you can turn it on and off. Again the all network button, and you can move remove some icon spaces and hide on mobile devices.This inline location is only activated on posts. So let's go to one of my posts. And as you can see my posts are really short and there's a links bar that's not fully completed... but what I wanted to show you is this on the lower side it really works but I don't like the auto-width because now Facebook is bigger than Twitter and Reddit is the smallest, Yahoo Mail is the biggest. I don't want it. So let's create a six or three columns layout. Let's go up a bit and let's change them to three columns. save our changes. And if and I'll refresh this page. This is how it looks. It looks way better. It's a little bit big. But you can of course imagine when you have an entire post which is really awesome to read. You can click this button to make sharing super easy. Alright, let's get back to the Monarch settings. So if you scroll up, we have a couple of options. We have the pop up. Within the op up you can change again the icon styles and icon shapes but now you have also a title and a message. You can change it to for example: " Spread the word and help us to reach the world" and the message will be "We will be forever grateful" and if you scroll down you will see a lot of more display settings. Of course the icon alignments the number of columns again the animation, but now we have a trigger after time delay. It means after 20 seconds the pop up will show and people can use it. You can also trigger it after inactivity or at the bottom of the posts or after commenting or after scrolling, I would say a percent of your scrolling after purchasing and of course you want to display once per session and a session will take one day because it's very frustrating if you get pop ups and you click them away you don't want to and every time they come back and back and back. That's really frustrating. So let's just enable display once per session once per day. Right if you now scroll down you have of course you display share counts.I don't like that but you can enable it for posts. That's of course with any pumping disk or whatever you want display all networks remove it again and hydrogel settings and the rest is very easy.Now I want this pop up to also show on pages. So let's save our changes. And if I now scroll to my page on my website when I hit 80% Or when I hit 20 seconds, this thing will appear you go there it is spread the word and help us to reach the world. We will be forever grateful. As you can see it now there is a gradient over my website which will really focus the attention to this box. Mark has really done a great job with this pop up module. The next one is the flying option and the flying is actually different from a pop up and I will show you what happens you also have a title and a message. This time you can choose your location in the bottom left or bottom right. You mentioned you have of course the time delay after reading the after commenting after 80% scrolling, it's exactly the same as the other one wells possession. And I don't want to share accounts, but this flying location is actually pretty different from the puppet.If I want to demonstrate this I have to turn the other one off because they don't work together. That's very interesting. So you have to go to your pop up.And let's say I don't want to use the pop up on my pages but I do want to use the flying on my pages.Now you can see that it works. So don't forget that if you want to add one of them you can use them at the same time at the same locations. Why is that? Well let me show you.So when I Now scroll down to a percent or I wait 20 seconds you can see flying.So differences with this flying as you can see there is no gradient above my website so my attention doesn't get old drawn to this share this box right there. So that is the big difference.Now when you close it don't forget to open a new private window because my session now has been closed for one day. I don't see this pop up. And the last one is on media if you have media files on your website, or you could actually share the media within the image there you can see all sharing icons. I don't use it on this specific website but you can use it if you want to show the world your portfolio for example. Alright, this basically is for all the network locations it is pretty easy. And then we have of course the social follow, which is a little bit different because here you could ask your networks and then people can actually follow you. So if you click on Add networks now you can see there are a lot more options to choose from we have for Facebook, Twitter, we have of course LinkedIn. But if you scroll down you will also see that you have Flickr for example, and you have Instagram and blog,which are very nice ones just add apply. You can change the titles of the networks, of course, and here you have to add your username. So if I'm for example on blog, I would go yes blog.com/c/w WPress Doctor that is the blog name and I can give it a name.And let's fill out Did I already have 500,000 subscribers? Well, I don't that just looks great.And then I press Save changes. And you can do this with all these things. And let's put in some numbers just to see how it's expressed and save changes. And then we open links a new window now.You also can get the real counts, and they will so you have to enable this one gift counts via API.But then you have to configure all the API keys of your networks. And then you could actually use the actual following count of your social media platforms like LinkedIn, Twitter and blog. I'm not going to show you how to get the API key of LinkedIn or Twitter or blog there are a lot of tutorials about it on the internet. So just look for that if you want to view counts. Alright, then we go to widgets and here you can configure your social follow up widget which I can start I can shape is exactly the same as we have seen within the other settings. If you go to shortcode you can actually change of course, everything and then you can go down here and click Generate shortcode This is the shortcode you can copy and paste anywhere on your website where you want to show it social follow bucks is a really great let's add it right into a widget. Let's go to widgets. So let's say I want to follow I want to be followed bucks a my sidebar you can just add this plus button and type in monarch or you can just scroll down, click on it. And here it goes. It has just been edified there and if you click on the right side, now you can see how it actually looks on your website, Facebook, Twitter, blog, Instagram you can see all the followers amongst we have just entered into the monarch seven is really great, and it works to get you more followers.Now there's one thing we didn't address. Well, that is the general settings. You can configure some other stuff like the API settings, Facebook, Instagram API, and you can of course enter your own custom CSS. This is only useful if you're using API's but for now, we are very good, very happy with our social sharing plugin Molenaar. So guys, what I really miss Imoen on is adding the options to share your website or you content using WhatsApp or telegram and what did I do?I hired a friend of mine to build it in Monaro, it cost me almost the same as the entire Divi license for a lifetime. But hey, this guy is very good. So I'm going to show you how you can add it really simple to your website. So what do we do we go to w WPress. Doctor Duff comm slash monarch and hit enter. And then you go to this beautiful page where it has been not designed but it shows you actually how it's going to look down here you can see the two icons that we're going to add in and the only thing I want from you is your email. Address. So I can sometimes send you email mostly once a month with a really awesome new post if I created one if I don't, I won't mail you at all. So don't worry, you can always unsubscribe is entirely free. So please subscribe to the blog and hit that like button. It's well worth it because it works like a charm and I'm going to show you so fill in your details. W WPress doctor does GM any press Show me and decode Thank you very much. Please follow this link and when you click on it now you can see the code so press CTRL A on your keyboard press CTRL COPY, or just press the right mouse and press press copy. And you go back to your dashboard of your website. And then we go to diffi down there and we go to theme options and just go to integration. And here you just paste in the code that we have just created. And don't forget to enable your header code if it's disabled.And scroll down and pressing Save Changes. Debts ID guys it is that easy. And if you now reload your page and I can see that our two buttons extra F on your website and they even move exactly the same as you have styled and when you press it. This is what happens ask you to open the desktop of WhatsApp. You can of course open it or when you hit daily grant. It also asks you to open the desktop app of telegram and if you don't have it, then you can press Share and then you can go to the web version of the telegram. It really works great. So guys, if I helped you out with this post and with the extra share options, please like this post, share it with your friends. Subscribe to the blog for more awesome WordPress content.I wish you a very awesome day and you did a great job by installing Monarch and adding these extra buttons of WhatsApp and telegram. Have a awesome day and I'll see you in the next post.