25 Comments

1. 

   Fernando on 31 March 2020 at 12:03 am

   Hi Robin,

   How can implement this on the “blog module”, a use this module for a custom page for all my posts.

   Reply
2. 

   Nick on 11 November 2019 at 3:06 pm

   Wow this is awesome, thank you! Is LinkedIn share built in?

   Reply
3. 

   Maarten on 24 October 2018 at 6:36 pm

   Hi, I have a custom layout for every post (used the builder) and would like these buttons, but then let them appear wher i want (In a text module on the page). Is that possible in any way?

   Reply
   • 

     Robin Hislop on 25 October 2018 at 9:46 am

     Paste the HTML into a Divi code module, not a text module.

     Reply
4. 

   Larii on 26 September 2018 at 11:50 pm

   Hello, thank you very much for sharing this wonderful code.

   I need to add the social buttons in the blog module of my homepage, how can I do it?

   Thank you.

   Reply
5. 

   Leana on 7 September 2018 at 5:09 pm

   Hi thank you for this, we want to use this on specific pages only (not posts), is this possible?

   Reply
6. 

   Charley on 13 December 2017 at 12:00 pm

   Hi Robin,

   Thanks for this! I’m new to coding and pasted the code into a ‘fullwidth code’ module (I don’t even know how to access the stylesheet, haha). The buttons show up but the href links don’t work. I replaced them manually for one of my posts, but would love it to be auto-generated for each post. Do I need to replace certain elements of the ones you provided? Or does it only work in the stylesheet? What am I doing wrong?

   Thanks in advance!

   Reply
   • 

     Robin Hislop on 13 December 2017 at 3:10 pm

     Hi Charley. To get the links to appear on each post, you need to add them into the template which generates a single blog post (single.php).
     First of all, are you using a child theme? You really should be because it allows you to customise Divi, while still updating the base Divi theme. Here are detailed instructions about how to make a child theme for Divi.
     Once you’ve done that:
     – enable your child theme in Appearance > Themes.
     – copy the single.php template from /wp-content/themes/divi/templates/single.php to /wp-content/themes/your-child-theme-name/templates/single.php.
     – go to Appearance > Editor and open single.php.
     – paste the social links code above into the editor after the following:

     <div class="entry-content">
     <?php
     	do_action( 'et_before_content' );
     
     	the_content();
     
     	wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
     ?>
     </div> <!-- .entry-content -->

     – click Update File to save your changes.

     Reply
     • 

       Charley on 13 December 2017 at 4:52 pm

       Thanks so much for the quick and thorough reply; great help!

       Reply
7. 

   Melody Scott on 6 October 2017 at 3:02 am

   Hi, I’m sorry, but I can’t seem to figure out where in the single.php file to place this code.

   Reply
   • 

     Robin Hislop on 6 October 2017 at 11:07 am

     Wherever you want them to appear. Maybe just after the post tags?

     Reply
8. 

   Ventoh on 5 October 2017 at 11:40 am

   Very useful. I like a lot simple solutions without plugins. Thank you for sharing.

   Reply
9. 

   Roiu on 23 June 2017 at 9:20 pm

   Hi robin, how do i center the share buttons?

   Reply
   • 

     Robin Hislop on 5 October 2017 at 12:19 pm

     I think you’d have to wrap the whole thing in a div:

     <div class="share-block">

     then use something like this in your CSS:

     .share-block { margin: 0 auto; }

     Reply
10. 

    Patrick Jansen on 2 May 2017 at 9:57 am

    Goodmorning, I like to use those share buttons asswell, but in a normal page build with divibuilder. I tried to add the code with the code module in an new section but it didnt work for me. Thanks for your help!

    Reply
11. 

    Rachel Johns on 2 May 2017 at 8:09 am

    Hi, I’m having problems with mine aligning to the right instead of the left like yours are.

    I’m quite new to this theme so just trying to work out where everything is.

    Do I need to change something in the CSS?

    Is it also possible to have text above it like “Share this”

    Thanks for your help

    Reply
    • 

      Robin Hislop on 2 May 2017 at 9:30 am

      Hi Rachel. Do something like:

      <div class="share-block"><h4>Share this</h4><ul class="et-social-icons">
          <li class="et-social-icon et-social-facebook">
              <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(esc_url(get_permalink())); ?>&t=<?php echo urlencode(esc_attr(the_title())); ?>" target="_blank" title="Share on Facebook" class="icon">
                  <span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
              </a>
          </li>
          <li class="et-social-icon et-social-twitter">
              <a href="https://twitter.com/intent/tweet?source=<?php echo urlencode(esc_url(get_permalink())); ?>&text=<?php echo urlencode(esc_attr(the_title())); ?>:%20<?php echo urlencode(esc_url(get_permalink())); ?>" target="_blank" title="Tweet" class="icon">
                  <span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
              </a>
          </li>
          <li class="et-social-icon et-social-google-plus">
              <a href="https://plus.google.com/share?url=<?php echo urlencode(esc_url(get_permalink())); ?>" target="_blank" title="Share on Google+" class="icon">
                  <span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
              </a>
          </li>
          <li class="et-social-icon et-social-pinterest">
              <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(esc_url(get_permalink())); ?>&description=<?php echo urlencode(esc_attr(the_title())); ?>" target="_blank" title="Pin it" class="icon">
                  <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
              </a>
          </li>
      </ul></div>

      Then float the share block to the left (or right) by adding to your CSS:

      .share-block {
          float: left;
      }

      Reply
      • 

        Rachel Johns on 9 May 2017 at 3:07 am

        Hi Robin,

        Thanks for your help. I’m still having problems though and the alignment looked different in Chrome than in Brave (I haven’t checked other browers) so there must be something else messing it up. I’m quite new to CSS so not sure.

        I have put it up the top for now as it looked strange down the bottom when I couldn’t get anything to align neatly.

        Thanks again for your help and if you get a chance perhaps you could see it here and work it out. http://www.facecruit.com.au/is-recruitment-costing-you/

        Reply
12. 

    _rj on 20 April 2017 at 12:30 pm

    Thanks a lot. Very usefull.
    any idea on how to open it in a small window rather a full new window??

    Thanks 🙂

    Reply
13. 

    Nastassia Luisis on 28 March 2017 at 1:34 pm

    Awesome, this helped me out a lot. Thank you for taking the time to explain it to me 🙂

    Reply
14. 

    Nastassia Luisis on 28 March 2017 at 10:26 am

    Hi Robin,

    Thank you for the informative post, I’m new to coding and I’m wondering how I would go about adding an e-mail icon, any advice?? 🙂

    Reply
    • 

      Robin Hislop on 28 March 2017 at 11:16 am

      You’ll need to add the following

      to the list:

      <li class="et-social-icon et-social-email">
      	<a href="mailto:?body=<?php echo urlencode(esc_attr('Check out this page: ')) . urlencode(esc_url(get_permalink())); ?>&subject=<?php echo urlencode(esc_attr(the_title())); ?>" target="_blank" title="Email" class="icon">
      		<span><?php esc_html_e( 'Email', 'Divi' ); ?></span>
      	</a>
      </li>
      

      You’ll also have to add a definition for the et-social-email class to your theme’s stylesheet (style.css) since it isn’t predefined in Divi:

      .et-social-email a.icon:before {
      	content: "\e010";
      }

      This defines which icon to use for the email share button. You can find others to use in the list of Elegant Theme icons. For example, to use the filled in envelope icon

      

      , use

      content: \"e076";

      – (i.e. strip out the

      &#x

      from the unicode number).

      Reply
      • 

        Dan Burhans on 31 August 2019 at 2:19 am

        This came in real handy, thanks for sharing it.

        Reply
15. 

    murph on 1 November 2016 at 5:02 pm

    Hey Robin

    It’s Murph – a nice coincidence that I stumbled on this article while searching – just what I need, thanks for this 🙂

    Reply
    • 

      Robin Hislop on 1 November 2016 at 5:14 pm

      You’re welcome. Small world, eh?

      Reply