How to Add Social Media Share Buttons

In this article, I'll explain how to add social media sharing buttons to your theme. It doesn't matter whether you're adding a theme based on HTML or WordPress. All the code here is taken from the developer pages of the social media platforms. You can also check there.

Facebook Share Button

In this code data-href=”” You need to change the value of the parameter. The site URL should be written there. If you're using WordPress, <?php the_permalink() ?> you can write. 

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://www.sitenizinurlsi.com" data-layout="button_count"></div>

Twitter Tweet Button

In this code data-href=”” You need to change the value of the parameter. The site URL should be written there. If you're using WordPress, <?php the_permalink() ?> You can write. At the same time data-text=”” You also need to change the value of the parameter. The page title should also be included there. If you want to add text within the tweet that says "via" (shared via): data-via=”” You can write the parameter with the value (for example, your Twitter username).  

<div style="display:inline-block;vertical-align:top">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.sitenizinurlsi.com" data-text="Sitenizin Başlığı"> Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
</script>
</div>

Pinterest Pin Button

You don't need to make any changes to this. Just remember that any JavaScript file added there should only be added once on the page.

<div style="display:inline-block;vertical-align:top">
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>

Linkedin Share Button

You don't need to make any changes here either.

<div style="display:inline-block;vertical-align:top">
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-counter="right"></script>
</div>

Google +1 Button

In this code data-href=”” You need to change the value of the parameter. The site URL should be written there. If you're using WordPress, <?php the_permalink() ?> you can write.

<div style="display:inline-block;vertical-align:top">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<a class="g-plusone" data-size="medium" data-href="http://www.sitenizinurlsi.com"></a>
</div>