How to Create Divi Social Share Buttons without having to install a Plugin

Post By : Jim Monkhouse
Today I’m going to show you how simple it is to create social share buttons for the Divi Wordpress Theme, without having to install “yet another” 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 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 for creating 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

In this tutorial, we are going to use the “Divi Button Module” to create social share links for the following social networks. 

  1. Facebook
  2. Twitter
  3. Pinterest
  4. LinkedIn
  5. Email

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 taht .

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 ;
});

});

</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=&amp;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&amp;u=&amp;t=&amp;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=&amp;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&amp;url=&amp;title=&amp;summary=&amp;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=&amp;title=" target="_blank" rel="noopener noreferrer">Reddit</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

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

Five Stunning Feminine Divi Layouts

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *