Add Facebook and Twitter buttons in WordPress

If you want to increase engagement on your WordPress posts, a great option is to add Facebook’s “Like” button and Twitter’s “Share” button. In this article, I’ll show you how to do it easily without additional plugins.

We’ll add the buttons below the title of each post. To do this, we’ll edit the functions.phpfile and the post template file.

Add the code to functions.php

Edit your theme’s functions.phpfile and add the following function to generate the buttons:

<?php
function addSocialButtons( $content ) {
    if ( is_single() ) {
        $postUrl   = get_permalink();
        $postTitle = get_the_title();

        $facebookBtn  = '<div class="socialButtons">';
        $facebookBtn .= '<iframe src="https://www.facebook.com/plugins/like.php?href=' . urlencode( $postUrl ) . '&width=100&layout=button&action=like&size=small&share=false&height=21" width="100" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>';

        $twitterBtn = '<a href="https://twitter.com/share?url=' . urlencode( $postUrl ) . '&text=' . urlencode( $postTitle ) . '" target="_blank" class="twitterShareButton">Share on Twitter</a>';

        $facebookBtn .= $twitterBtn . '</div>';

        return $facebookBtn . $content;
    }

    return $content;
}
add_filter( 'the_content', 'addSocialButtons' );

Add optional CSS styles

To make the buttons look better, add these styles to your theme’s style.cssfile:

.socialButtons {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.twitterShareButton {
    display: inline-block;
    background-color: #1DA1F2;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
}
.twitterShareButton:hover {
    background-color: #0d8ddb;
}

With this code, the buttons will automatically appear below the title of each post in WordPress. That’s it!