Create Dynamic Social Share Buttons in Oxygen

YouTube video

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://permaslug.com/ultimate-oxygen-course/

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

--Connect with me!--

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

Signup For Emails

Want to be notified when new tutorials are released? Signup below for our roundup emails. We promise not to spam and won't blow up your inbox. 
  • This field is for validation purposes and should be left unchanged.
Jonathan Jernigan, Founder
Permaslug and APEX Web Solutions

Join Permaslug

Membership Benefits Include:

  • Ultimate Oxygen Course
  • Ultimate Woocommerce Course
  • ACF Pro Course
  • Material Design Lite
  • Template Downloads
  • Community
  • And more!
register

More Posts

Create a Multi Row Footer in Oxygen Builder

In this second episode of our Oxygen Build Series, we're working on creating a multi-row footer for our website. This is similar to the website and incorporates elements of both Grid and Flexbox. We'll also…
READ post

Oxygen Builder 3.9 Alpha First Look

This is my very first look at Oxygen Builder 3.9 Alpha 1, which includes a number of performance fixes and adds support for MetaBox, just like Advanced Custom Fields is baked directly into Oxygen Builder.…
READ post

Creating a Multi-Row Header - Aletha's Legacy Part 1

Welcome to the first full episode of this series where we will be building a website in Oxygen Builder from the ground up, start to finish. The project is for an organization called Aletha's Legacy…
READ post
menu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram