Create Dynamic Social Share Buttons in Oxygen

YouTube video

Written By

Jonathan Jernigan

This tutorial has been superseded by a newer, cleaner, builder-agnostic version: https://jonathanjernigan.com/easy-dynamic-social-share-buttons/

This tutorial will show you how to easily create dynamic social share buttons in Oxygen. Add this to a template to get the social share capability on all your posts and pages in WordPress.

Code examples:

Facebook: <button class="social-share-button"><a href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> Share on Facebook</a></button>

Pinterest: <button class="social-share-button social-share-button-pin"><a href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;">Pin on Pinterest</a></button>

Email: <button class="social-share-button social-share-button-email"><a href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;">Share via Email</a></button>

LinkedIn: <button class="social-share-button social-share-button-linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;">Share on LinkedIn</a></button>

Reddit: <button class="social-share-button social-share-button-reddit"><a href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;">Share on Reddit</a></button>

Icon Buttons Code Example:

<div>Facebook: <a href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> <i class="fa fa-facebook-square"></i> </a>
</div>

<div>
Pinterest: <a href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"> <i class="fa fa-pinterest"></i> </a>
</div>

 

Learn more about my Oxygen Builder course here: https://jonathanjernigan.com/ultimate-oxygen-course/

Visit the premium forums: https://jonathanjernigan.com/forums/

–Connect with me!–

  • Facebook: https://www.facebook.com/permaslug
  • Twitter: https://twitter.com/permaslug

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.