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

Perfmatters Improved My Google Page Speed by 145%

I'm a bit embarrassed to say this, but my page speed scores on my own agency website and the mobile version of the Permaslug site sucked until just 24 hours ago. (If you don't want…
READ post

Multi-User Oxygen Editing Plugin - Collaboration by dPlugins

A long requested feature for Oxygen has been allowing multiple users to work inside Oxygen at the same time, which unfortunately is not a core feature. Thankfully the team at dPlugins has created a solution…
READ post

Meta Box and Oxygen Builder Deep Dive

With the release of Oxygen 3.9 comes direct integration with Meta Box, a custom field solution for WordPress. In this stream, we'll take a deep look into all the settings and how to utilize it…
READ post
menu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram