How to Create Divi Social Share Buttons without having to install a Plugin
Why are social share buttons important?
Everyone knows that Social Media provides an amazing opportunity to promote our product or service. By adding simple social sharing buttons to our website content we give our users the option to promote our content with just one click.
I’m going to show you two methods of how to quickly and easily create social media share buttons using the Divi theme for WordPress.
Method one – Creating social share buttons for Divi Modules
The first one is perfect for if you want to use Divi modules with built-in links such as buttons, images, and blurbs. This method is lightweight and highly customizable and most importantly takes no technical skills.
Method two- Creating social share buttons using customisable HTML anchor tags
The second method is best for people who want complete control over the design of the “social media share link” and have at least a working knowledge of working with HTML and CSS.
Why can’t I just use a plugin to add social share buttons?
There are many social share plugins available out there, but they have a few drawbacks such as
- Plugins add bloat to your website, slowing the load speed
- Plugins can cause security vulnerabilities
- Plugins can limit the customization of your design, and make your website appear “generic”.
- Plugins can be overkill if you’re just using one aspect of the plugin functionality.
When it comes to something as simple as social link sharing, I personally think it’s best to just do it yourself. It will take you 5 – 10 minutes to create some buttons using the Divi Builder.
Here’s a video running you through both Methods of creating “social share links”. I recommend watching this video, before you try this tutorial.
Method 1 – Creating Social share buttons for Divi
In this tutorial, we are going to use the “Divi Button Module” to create social share links for the following social networks.
Step One -> Design the button template
Create a new button on any page or post, using the “Button Module”
In the content tab of the Button Module, add some text such as “share on Facebook and then click on ”Module settings Content > Link > Button Link Target > “In the new window”
Open the design settings for the button module and scroll down to Button and choose “Use Custom Styles for Button” and add all the following styles.
- Button settings “Design” > Button Text Size : 16px
- Button settings “Design” > Button Text Color : #ffffff
- Button settings “Design” > Button Background Color : #3b5998
- Button settings “Design” > Button Background Hover : #153f99
- Button settings “Design” > Button Border Width : 4px
- Button settings “Design” > Button Border Color : #3b5998
- Button settings “Design” > Button Border Color : #153f99
- Button settings “Design” > Button Border Radius : 50px
- Button settings “Design” > Button Font Weight : Semi Bold
- Button settings “Design” > Button Icon : Choose Facebook
- Button settings “Design” > Button Icon Color : #ffffff
- Button settings “Design” > Button Icon Placement : Left
The next step is to duplicate this button four more times, so we’ll have 5 buttons in total. And then add the following designs and settings.
Facebook Button
- Button settings “Design” > Background colour : #3b5998
- Button settings “Design” > Border color : #3b5998
- Button settings “Design” > Background hover color : #153f99
- Button settings “Design” > Border hover color : #153f99
- Button settings “Design” > Module icon : Facebook
- Button settings “Advanced” > CSS ID & Classes > Class : “fb-social-share”
Twitter Button
- Button settings “Design” > Background colour : #00aced
- Button settings “Design” > Border color : #00aced
- Button settings “Design” > Hover Background color : #00a1f2
- Button settings “Design” > Border hover color : #00a1f2
- Button settings “Design” > Module icon : Twitter
- Button settings “Advanced” > CSS ID & Classes > Class : “twitter-social-share”
Pinterest Button
- Button settings “Design” > Background colour : #cb2027
- Button settings “Design” > Border color : #cb2027
- Button settings “Design” > Hover Background color : #cc0006
- Button settings “Design” > Border hover color : #cc0006
- Button settings “Design” >Module icon : Pinterest
- Button settings “Advanced” > CSS ID & Classes > Class : “pinterest-social-share”
LinkedIn Button
- Button settings “Design” > Background colour : #007bb6
- Button settings “Design” > Border color : #007bb6
- Button settings “Design” > Hover Background color : #0061a3
- Button settings “Design” > Border hover color : #0061a3
- Button settings “Design” > Module icon : LinkedIn
- Button settings “Advanced” > CSS ID & Classes > Class : “linkedin-social-share”
Email Button
- Background colour : #08aa00
- Border color : #08aa00
- Background hover color : #009320
- Border hover color : #009320
- Module settings Advanced > CSS ID & Classes > Class : email-social-share
- Module icon : Email
- Button settings “Content” > Link > Button Link Target > “In the same window”
Now we have all the buttons setup and it’s time to add the “share links” to the buttons
Divi ships with jQuery, so we can take advantage of that .
Copy the jQuery code below and then add it to the “Footer” section in your Divi Builder options integrations.
<script type="text/javascript">// Setup Function
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
// Facebook
var FB_share = "https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(document.URL)+"&t="+encodeURIComponent(document.URL);
$jq('.fb-social-share').each(function(){
this.href=FB_share;
});
// Twitter Share
var twitter_Share = "https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content%20" + encodeURIComponent(document.title)+":%20 "+encodeURIComponent(document.URL);
$jq('.twitter-social-share').each(function(){
this.href=twitter_Share;
});
//Pinterest
var pin_Share = "http://pinterest.com/pin/create/button/?url="+encodeURIComponent(document.title)+"&media="+encodeURIComponent(document.title)+"&description="+encodeURIComponent(document.URL);
$jq('.pinterest-social-share').each(function(){
this.href=pin_Share;
});
//Linkedin
var Linkedin_Share = "http://www.linkedin.com/shareArticle?mini=true&url="+encodeURIComponent(document.URL)+"&title="+encodeURIComponent(document.title);
$jq('.linkedin-social-share').each(function(){
this.href=Linkedin_Share ;
});
//Email
var email_Share = "mailto:?subject="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
$jq('.email-social-share').each(function(){
this.href=email_Share ;
});
//Whatsapp
var whatsapp_Share = "whatsapp://send?text="+encodeURIComponent(document.title)+"&body="+encodeURIComponent(document.URL);
$jq('.whatsapp-social-share').each(function(){
this.href=whatsapp_Share ;
});
});
</script>
Method 2
This is an alternative method for creating “Social share links” which gives you a bare-bones share link, which you can then style using your own custom HTML and CSS.
Just add the following code directly to a text module, add your own classes, Id’s and icons and style as you like to match the design of your website.
<!-- FACEBOOK SHARE -->
<a class="w-inline-block social-share-btn fb" title="Share on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="noopener noreferrer">
Facebook
</a><!-- TWITTER SHARE -->
<a class="w-inline-block social-share-btn tw" title="Tweet" href="https://twitter.com/intent/tweet?" target="_blank" rel="noopener noreferrer">
Twitter
</a>
<!-- PINTEREST SHARE -->
<a class="w-inline-block social-share-btn pin" title="Pin it" target="_blank" rel="noopener noreferrer">
Pinterest
</a>
<!-- TUMBLR SHARE -->
<a class="w-inline-block social-share-btn tmb" title="Post to Tumblr" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" rel="noopener noreferrer">
Tumblr
</a>
<!-- SHARE VIA E-MAIL -->
<a class="w-inline-block social-share-btn email" title="Email" href="mailto:?subject=&body=:%20" target="_blank" rel="noopener noreferrer">
Email
</a>
<!-- LINKEDIN SHARE -->
<a class="w-inline-block social-share-btn lnk" title="Share on LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<!-- REDDIT SHARE -->
<a class="w-inline-block social-share-btn redd" title="Submit to Reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" rel="noopener noreferrer">Reddit</a>
<!-- WHATSAPP SHARE -->
<a href="whatsapp://send?text=The text to share!" data-action="share/whatsapp/share">Share via Whatsapp</a>
To Summarise
I hope this tutorial been useful in showing you how to build social share buttons without having to install yet another plugin. As always, if you have any questions, leave a comment below and I’ll get back to you
How to Add Custom Fonts to Divi
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
Five Stunning Feminine Divi Layouts
We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.
How to Create an inline Divi Opt In Form with the Divi Builder
Want to learn how to create a neat inline email optin for your Divi Website? All it takes is copying and pasting a few lines of CSS code. Read below to learn how,
How to Fix the Divi Header on Mobile
As flexible as the Divi WordPress theme is, I do occasionally run into a few drawbacks now and again when it comes to the styling of certain parts of the theme.
Get the Divi Theme
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to add custom Icons to Divi’s social media module
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module
How to Add Custom Fonts to Divi
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
Five Stunning Feminine Divi Layouts
We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.
54 Comments
Submit a Comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Thought you might want to amend the following with but hide on desktop for messenger on mobile and ipad.
Thanks so much for the great article, found it very helpful.
// messenger
var MSNGR_share = “fb-messenger://share?link=”+encodeURIComponent(document.URL)+”&app_id=”+encodeURIComponent(document.URL);
$jq(‘.messenger-social-share’).each(function(){
this.href=MSNGR_share;
});
Thanks for the comment Phil, that’s really useful!
great idea, unfortunately this does not work. In fact it shoots down the whole thing when implemented.
Thank you so much for this! Only the Pinterest jQuery does not seem to work.
Thanks for the heads up Thomas, I’ll look into it and revise the code, Cheers!
Hi Thomas
Thanks for your comment. Pinterest should work, as long as the user who clicks on your link is logged in. I’ve just tested on this link here https://diviwebsiteexpert.com/social-media-share-buttons/ Thanks
Thanks Jim for this. Very helpful.
On Pinterest, for some reason, the image selection comes as broken – so unable to choose the image to pin. (I am logged tried on my website and also the above link). Am I missing something here?
Hi Thomas— Thanks for this super helpful post. I too am having an issue with the Pinterest image not appearing via the share link. I’m logged into Pinterest, but now image appears to pin. Any pointers? Much appreciated!
Hi! In case I want to apply Whatsapp? It’s different code in web than in mobile?
Hi Maria
Thanks for your comment!
I’ve updated the code block to include whatsapp.Give it a try and let me know what you think?
Hey Jim! Thank’s for sharing this content!
The Whatsapp code it’s not sending the content URL, only the title… Can you help with it?
Very useful tutorial, thank you very much! It works very well but when I share my post on fb, it’s my logo that appears in the fb post, would it be possible to make another image appear?
Thanks
Hi Kevin,
Thanks for your comment,
Facebook will pull the data from the page your sharing, so you should have the “featured image” or OG meta tags specified image appear on your share link. Thanks
Hi! Thanks for this! Could you please Add Instagram?
Thanks for your comment Michael, but as of now instagram does not offer an open sharing endpoint to receive arbitrary URLs or media as far as I know. I’ll be sure to update if if they change their API access. Thanks!
Thank you Jim. Easy to follow but I still jammed it up. Perhaps because I got too creative? I used images and gave them the classes you documented in Method 1. I integrated the script but nothing happens when I click on the image. Not a stylist/coder and would be so grateful for your guidance. (My site is under construction please dont just too harshly.) If willing to take a look, please go to this specific post url as I have social follow on others.
Blessings!
Hi Debbie, Thanks for your comment, I’ve taken a look at your website https://dreamcatcherlonghorns.com/ looks really good! however I can only see Jetpack share icons at the bottom of pages such as https://dreamcatcherlonghorns.com/chisholms-lezawe/ If you sen me the page with code on I can see if I can work it out for you, thanks!
Hi Jim, thanks for your amazing tutorial. It was very easy to implement. I’m having problems trying to get the Jquery code to open the links in a new tab or window. Is it possible? Can you give me a hand, please? Thanks a lot! Stay safe!
Hi Tomas, in the button module, just choose … content > link> Button link target “Open in the new tab “
Hi Jim, great tutorial, thanks. I installed it on my site but it opens on the same tab and my site page gets lost. Is there a way to force it to open on a new tab?
Hi Gabrys, I’ve answered this in the comment above
can this code be attached per button of social media?
will this code work for light box per image only of sharing?
any idea how to use this for light box?
thanks in advance
Hi Ma, have you got a more specific example? Do you mean share the content of a lightbox?
https://waterfallmagazine.com
I blog frequently and I truly appreciate your information. This article has really peaked my interest.
I’m going to bookmark your blog and keep checking for new details about once per week.
I opted in for your RSS feed as well.
Thanks https://waterfallmagazine.com/
Hey Jim!
This was incredibly helpful! The only thing not working on my end is the “Share by Email” button. Nothing happens. Was I supposed to add anything specific to have that button work?
Thank you for sharing this information!!
Hi Karie, I’ve just checked the code and it works on my end, are you still struggling with this?
Hello.
I am a little stuck as I cannot find the “Footer” section in the Divi Builder options integrations.
All i have is “head”, “Body”, “top of posts”. “bottom of posts”
Please can you let me know where i am going wrong.
Thank you.
Hi Quintin, you can stick it in a standard Divi “text” or “code” module, just make sure that the block runs after your buttons ( keep the code underneath your buttons.)
Hey Jim, thank you for putting this together. I followed your instructions but it is not working for me. Can you please help me figure it out?
Here is what I did.
* My page has 1 section and in it 3 rows. I placed the button modules in the middle row.
* The buttons show up
* I went to DIVI > Theme Options > Integration and “Enabled the Single Button Code” option.
* I copy-pasted your jquery code in the “Add code to the bottom of your posts, before the comments”
On my first attempted to save, I got an error about being blocked by ajax and asking me to whitelist thee action. I did and saved again and it saved fine.
The issue is, when I click the buttons, it only opens up my own site and doesn’t fetch the URL of the page.
Thanks in advance Jim or anyone who replies and help me solve this.
Hi Tim. Are you using a wordpress security plugin which could be blocking the request? Are you setting the link to “Open a new page”? Thanks
same to me like tim ….i do same to same like tim …but not work to share when i click fb share button it exist same page
I can’t make it to work with blurbs — it’s not clickable unless I put something in the link. But the buttons are fine.
I’ve always wondered why the Divi’s authors didn’t include such functionality.
Thank you for the information!
Hi Jim,
Can you help us add text to the link in the email button – as you have created it in this example. We want our people using this button to be able to add some words to their email before the page link. Something like: “I found this great webpage, check it out:” and then the link to the page appears. If this question is beyond the scope a comment response, get in touch. Maybe we can hire you?
Hi Jim
This has helped me so much… thanks! Is there any way of adding a custom subject line with the email link?
Thanks
Lloyd
I’ve tried this but it just reopens the post in another tab instead of the share option. I’ve tried it with a code a module as well as what you initially suggested in the tutorial.
I found this article very interesting. Unfortunately I couldn’t get it to work. I read all the above comments and tried to implement it first through the integration tab and then I tried to put a code module after the shared buttons links. It only seems to open a new tab to the same post in my website. Any advice would be greatly appreciated. My blog post url https://www.yourutahrealty.com/how-to-get-pre-approved-for-a-home-loan/
I figured it out! I still had the “” in the class id. Works great! Thank you, Thank you, Thank you!
Thank-you for posting that solution. I did same thing. I was following the instructions a little too close 🙂
Thanks you so much Jim! What a super helpful tutorial!
I did as you explain, and everything works beautifully except for LinkedIn. There I get the following error: “Something went wrong, Refresh the page” – although I am logged in Linkedin. Any idea why that may be happening?
And on a totally unrelated note, I’ve been trying to figure out how I can have external links on my Divi blogpost open up in a new tab – but I can’t figure out how. Any chance you could write a post or do a video on that as well?
Thank you so much Jim! Truly appreciate your hard work and sharing your knowledge with us.
Hello, This post is great! I am trying to add a bcc(Blind carbon copy) and a message before the link using your Method 1. But I got stuck. Can you help? Thanks!
Hi Jim,
I did the buttons nicely on the edge of the page and put them in a fixed position. Everything works for me, so it’s super. And thank you very much.
However, I would also like to ensure that clicking on the button does not open a complete window, but only a window that has been scaled at some point. Just like when I used the Monarch plugin, for example, when I clicked the button, the share window appeared separately in a size of about 400 px x 400 px. Is that possible with Divi?
is there any way to make the facebook app to open everytime it opens the mobile browser
Great post, thank you! For LinkedIn, is there any way to have the pop-up in a new window that is smaller? The new full tab is pretty overwhelming!
Thanks in support of sharing such a good ideа, piece of ԝriting is nice, thats why i have read it fully
Very helpful! I was wondering though if you could link to a different page other than the one the buttons are on? Mainly because if a visitor is on a Thank you page, it’s unnecessary for them to share that page, but rather a different one.
Hi,
Really appreciate what you are doing here.
I am having a bit of a problem which is that I have added the code at the bottom of the page and added three buttons – one for email, one for Twitter and one for Facebook. I can see all three buttons on the design page but when I load the live page, only the email button shows (and it works fine).
Any idea why the other two buttons go invisible on the live page?
Many thanks.
Mark.
hi there, thank you fo posting this. I was thinking if there is a chance to make those buttons only with the icons. I mean i did make just the icons with Divi, but using those CSS class as descrived in your video it won’t work just with the icons.
Thank you
thank you. Is it possible to do just with simple icons (https://intercom.help/elegantthemes/en/articles/2791864-adding-divi-icons-anywhere-you-want). i would like to have it like that rather than having a button where i have to write something in it
Appreciate
Hello, thank you for this! can you please tell me how to tweak the code to make it open a new pop-up window instead of a new tab (because new tabs are full-width) Thanks in advance!
If I use this: $jq(‘.fb-social-share’).each(function(){window.open(this.href=FB_share, “_blank”, “width=500, height=350”); a popup appears as soon as my page loads (that is not what I want), and then if I press the button a new tab is opened and not a pop-up. I´m not a programmer I´m just guessing. I hope you can help me to correct this code thanks!
Great article, thanks
just I think that the Whatsapp code in method1 is not correct, should be like this:
//var whatsapp_Share = “whatsapp://send?text=”+encodeURIComponent(document.title)+”&body=”+encodeURIComponent(document.URL);
var whatsapp_Share = “whatsapp://send?text=”+encodeURIComponent(document.title)+” “+encodeURIComponent(document.URL);
Thanks for adding this code update