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