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

Setting up SearchWP Live Ajax Search in Oxygen

I've been wondering how a search driven site would work on WordPress. Will users still want to use main navigation? Will they want to use search right off the bat? I'm hoping to start answering…
READ post

Social Feeds and Reviews with WP Social Ninja for WordPress

Social media feeds in WordPress have always been a sticking point because most plugins were unreliable and difficult to use, or their free version was not really usable. The team behind Fluent Forms brings us…
READ post

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
menu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram