Sosyal Medya Paylaşım Düğmeleri Nasıl Eklenir?

In this article, I'll explain how to add social media sharing buttons to your site. These methods work for both, whether you're using HTML or a WordPress theme. The code is sourced from the official developer pages of the social media platforms and is reliable. You can also learn more by visiting the platforms' own websites. While adding these buttons to my own projects, I've noticed how easy it is to increase user engagement. Let's get started!

Facebook Share Button

You can use the code below to add the Facebook share button. All you need to change here is data-href=”” parameter value. This should be a URL on your site. If you're using WordPress, this part <?php the_permalink(); ?> You can make it dynamic with .

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

I added a share button using this code in a blog project, and the ability for users to quickly share content increased traffic. On WordPress the_permalink() It has become very convenient to assign automatic URLs to each page.

Twitter (Tweet) Button

For the Twitter share button, you should replace the data-url=”” parameter with a URL from your site. If you are using WordPress, this part <?php the_permalink(); ?> You can fill it with. Also, data-text=”” parameter page title, data-via=”” You can add your Twitter username to the parameter (for example, your own account).

<div style="display:inline-block;vertical-align:top">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.siteniz.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>

When adding a Twitter share button to a news site, I added my own account via data-via, which increased the brand's visibility. To make titles dynamic in WordPress <?php the_title(); ?> I used it.

Pinterest Pin Button

You don't need to make any changes to the Pinterest button. However, make sure the JavaScript code is only added once on the site, otherwise you may experience performance issues.

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

When I added a Pinterest button to a portfolio site, sharing of visual content skyrocketed. Ensuring JavaScript was loaded only once optimized page load time.

LinkedIn Share Button

You don't need to make any changes to the LinkedIn share button either. The code below works directly.

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

When I added a LinkedIn share button to a professional blog, the network grew as business-focused users shared the content. Its simplicity made it a quick way to integrate.

Additional Tips

Dynamic Integration for WordPressIf you're using WordPress, add the share buttons to your theme's template files, such as single.php or page.php. WordPress functions like the_permalink() and the_title() autofill URLs and titles.
Style EditsYou can customize the appearance of buttons with CSS to match your site's design. For example, you can align buttons side by side with display:inline-block.
Performance ImprovementAdding JavaScript codes to the footer of the page can increase page loading speed.
Test ItAfter adding the buttons, test them on each platform to make sure they work correctly.

Conclusion

Social media sharing buttons are a great way to increase your site's visibility and user engagement. Whether you use HTML or WordPress, you can easily add share buttons using these codes. When I've integrated these buttons into my own projects, organic traffic has increased significantly as content spreads through social media. Make your site more shareable by following these simple steps!

0 0 votes

Article Rating