01273 264503 info@mootpoint.org

Elegant Theme’s Divi theme has a nice set of icons built in, including social media icons, so it seems a shame to have to install a social share button plugin to enable sharing for your posts. These plugins often install extra Javascript and icon images which can slow down your site’s page load times. If all you need is a simple (but elegant!) set of share icons at the bottom of your posts, add this code to your single.php template in you Divi child theme:

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

This adds buttons for Facebook, Twitter, Google+ and Pinterest. Here’s what they look like:
divi-social-icons
Of course, you can easily style the size, colour etc. by tweaking the et-social-icon CSS class in your Divi child theme stylesheet.