Add social share buttons in Oxygen’s repeater with Shortcode

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

<?php
function oh_social_media_func(){

	$permalink = get_the_permalink();
	$output = '<div id="div_block_social_media" class="ct-div-block">';

	$output .= '<a id="link_social_media" class="ct-link social_icons_link" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'" target="_blank"><div id="fancy_icon_social_media" class="ct-fancy-icon social_icons"><svg id="svg-fancy_icon_social_media"><use xlink:href="#FontAwesomeicon-facebook-square"><svg id="FontAwesomeicon-facebook-square" viewBox="0 0 24 28"><title>facebook-square</title><path d="M19.5 2c2.484 0 4.5 2.016 4.5 4.5v15c0 2.484-2.016 4.5-4.5 4.5h-2.938v-9.297h3.109l0.469-3.625h-3.578v-2.312c0-1.047 0.281-1.75 1.797-1.75l1.906-0.016v-3.234c-0.328-0.047-1.469-0.141-2.781-0.141-2.766 0-4.672 1.687-4.672 4.781v2.672h-3.125v3.625h3.125v9.297h-8.313c-2.484 0-4.5-2.016-4.5-4.5v-15c0-2.484 2.016-4.5 4.5-4.5h15z"></path></svg></use></svg></div></a>';

	$output .= '<a id="link_social_media" class="ct-link social_icons_link" href="https://twitter.com/home?status='.$permalink.'" target="_blank"><div id="fancy_icon_social_media" class="ct-fancy-icon social_icons"><svg id="svg-fancy_icon_social_media"><use xlink:href="#FontAwesomeicon-twitter-square"><svg id="FontAwesomeicon-twitter-square" viewBox="0 0 24 28"><title>twitter-square</title><path d="M20 9.531c-0.594 0.266-1.219 0.438-1.891 0.531 0.688-0.406 1.203-1.062 1.453-1.828-0.641 0.375-1.344 0.656-2.094 0.797-0.594-0.641-1.453-1.031-2.391-1.031-1.813 0-3.281 1.469-3.281 3.281 0 0.25 0.016 0.516 0.078 0.75-2.734-0.141-5.156-1.437-6.781-3.437-0.281 0.484-0.453 1.062-0.453 1.656 0 1.141 0.531 2.141 1.422 2.734-0.547-0.016-1.062-0.172-1.563-0.406v0.031c0 1.594 1.203 2.922 2.703 3.219-0.281 0.078-0.5 0.125-0.797 0.125-0.203 0-0.406-0.031-0.609-0.063 0.422 1.297 1.625 2.25 3.063 2.281-1.125 0.875-2.531 1.406-4.078 1.406-0.266 0-0.531-0.016-0.781-0.047 1.453 0.922 3.172 1.469 5.031 1.469 6.031 0 9.344-5 9.344-9.344 0-0.141 0-0.281-0.016-0.422 0.641-0.453 1.203-1.031 1.641-1.703zM24 6.5v15c0 2.484-2.016 4.5-4.5 4.5h-15c-2.484 0-4.5-2.016-4.5-4.5v-15c0-2.484 2.016-4.5 4.5-4.5h15c2.484 0 4.5 2.016 4.5 4.5z"></path></svg></use></svg></div></a>';

	$output .= '<a id="link_social_media" class="ct-link social_icons_link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url='.$permalink.'/&amp;title=&amp;summary=&amp;source=" target="_blank"><div id="fancy_icon_social_media" class="ct-fancy-icon social_icons"><svg id="svg-fancy_icon_social_media"><use xlink:href="#FontAwesomeicon-linkedin-square"><svg id="FontAwesomeicon-linkedin-square" viewBox="0 0 24 28"><title>linkedin-square</title><path d="M3.703 22.094h3.609v-10.844h-3.609v10.844zM7.547 7.906c-0.016-1.062-0.781-1.875-2.016-1.875s-2.047 0.812-2.047 1.875c0 1.031 0.781 1.875 2 1.875h0.016c1.266 0 2.047-0.844 2.047-1.875zM16.688 22.094h3.609v-6.219c0-3.328-1.781-4.875-4.156-4.875-1.937 0-2.797 1.078-3.266 1.828h0.031v-1.578h-3.609s0.047 1.016 0 10.844v0h3.609v-6.062c0-0.313 0.016-0.641 0.109-0.875 0.266-0.641 0.859-1.313 1.859-1.313 1.297 0 1.813 0.984 1.813 2.453v5.797zM24 6.5v15c0 2.484-2.016 4.5-4.5 4.5h-15c-2.484 0-4.5-2.016-4.5-4.5v-15c0-2.484 2.016-4.5 4.5-4.5h15c2.484 0 4.5 2.016 4.5 4.5z"></path></svg></use></svg></div></a>';

	$output .= '</div>';
	$output .='<style>div#div_block_social_media { flex-direction: row;}#div_block_social_media .social_icons >svg { width: 32px;height: 32px;}</style>';
	return $output;
}
add_shortcode('social_media','oh_social_media_func');
?>

Above shortcode you can use on as per Screenshot.

Like & follow for WordPress tips 🙂