Creating social links shortcode

Shortcode:

function social_shortcode($atts) {
    $a = shortcode_atts(array(
        'facebook' => 'vincentke2018',
        'twitter' => 'vincentke2018',
        'instagram' => 'vincentke2018'
    ),$atts);

    $str = '<div style="text-align:right;padding-right:15px;">
<a href="https://facebook.com/'.$a['facebook'].'" target="_blank"><div class="facebook"></div></a>
<a href="https://twitter.com/'.$a['twitter'].'" target="_blank"><div class="twitter"></div></a>
<a href="https://instagram.com/'.$a['instagram'].'" target="_blank"><div class="instagram"></div></a>
</div>';
    return $str;
}
add_shortcode('social','social_shortcode');

Additional CSS:

.facebook,.twitter,.instagram{
	display:inline-block;
	border-radius:23px;
  width:45px;
  height:45px;	
}
.facebook{
  background: url(/images/Flat-Social-Icons.png) -7px -7px;
}

.twitter{
  background: url(/images/Flat-Social-Icons.png) -103px -7px;
}

.instagram{
  background: url(/images/Flat-Social-Icons.png) -288px -7px;
}

Usage:

[social facebook="vincentke2018" twitter="vincentke2018" instagram="vincentke2018"]

Display:

social links icons

Leave a Reply

Your email address will not be published. Required fields are marked *