How to Add Social Share Buttons

In this article, I will tell you how to add social media sharing buttons. The theme you are going to add will not matter whether it’s html or WordPress. All of these codes are from the developers’ pages of the social media platforms. You can also look theirs site.

Facebook Share Button

In this code you need to change the value of the data-href = “” parameter. This should be a URL in the site. If you are using WordPress, you can type <?php the_permalink ()?>.

<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.yourwebsite.com" data-layout="button_count"></div>

Tweet Button

In this code you need to change the value of the data-href = “” parameter. This should be a URL in the site. If you are using WordPress, you can type <?php the_permalink ()?>. You also need to change the value of the data-text = “” parameter. This should be a page title. If you want to add a shared via, you can type in the value of the data-via = “” parameter (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 do not need to make any changes to it. You should not only forget that the JavaScript has to be added only once on the site.

<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 do not have to make any changes here too.

<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 you need to change the value of the data-href = “” parameter. This should be a URL in the site. If you are using WordPress, you can type <?php the_permalink ()?>.

<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>