How to add WhatsApp Telegram Join buttons in WordPress

How to add WhatsApp Telegram Join buttons in WordPress: Adding WhatsApp and Telegram Join buttons to your WordPress website has become an essential question for many website owners and bloggers today.

As you know, both WhatsApp and Telegram have gained immense popularity due to their speed and simplicity. Therefore, adding join buttons for these platforms to your website not only provides your audience with a simple and easy way to connect with you but also expands your brand’s reach.

In this blog post, I will provide a detailed guide on how to easily add WhatsApp and Telegram join buttons to your WordPress website. We will explore how to implement these buttons without using any plugins, regardless of whether you are a GeneratePress user or use any other theme.

Absolutely! In response to the question “How to Add Telegram WhatsApp Group Button in WordPress,” I’ll provide you with free-to-use methods today that will allow you to add these buttons to any of your WordPress websites. Let’s get started.

How to add WhatsApp Telegram Join buttons in WordPress in Hindi

We will cover this guide in 2 parts: the first will be for GeneratePress users and the second will be for Other Theme Users.

Part 1: For GeneratePress Theme Users

GeneratePress is a highly lightweight WordPress theme renowned for its speed. One of its exceptional features is the use of “hooks,” which allow you to insert custom content or code, including social media follow buttons.

• To begin, navigate to your WordPress Dashboard and then go to Appearance > Elements > Add New Element to create a new hook.
• Assign any name you like to the hook for identification purposes.
• Next, copy the following HTML code and paste it into the empty box provided in the HOOKS section.

<div class="CodeWP-ContentCard CodeWP-GreenHighlight">
    <span style="display: flex; align-items: center;"><i class="fab fa-whatsapp" style="font-size:24px;color:#25d366;"></i>
        <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">WhatsApp Channel</span>
    </span>
    <a class="CodeWP-ActionButton" href="ADD YOUR WHATSAPP CHANNEL LINK" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>

<div class="CodeWP-ContentCard CodeWP-BlueHighlight">
    <span style="display: flex; align-items: center;"><i class="fab fa-telegram" style="font-size:24px;color:#0086ce;"></i>
        <span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Telegram Channel</span>
    </span>
    <a class="CodeWP-ActionButton" href="ADD YOUR TELEGRAM CHANNEL LINK" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>

• Next, choose your preferred Hook Location from the options below. For instance, if you want to add it before the POST CONTENT, select “generate_before_content.” If you want to display it after the post, choose “generate_after_content.” There are numerous other options you can tweak and experiment with based on your preferences.
• In the “Display Rules” section, select Posts & All Posts. Then, publish the hook.
• Next, copy the CSS code provided below and paste it into the Style.css file of your GeneratePress Child Theme. Alternatively, you can paste it into the Additional CSS section in Customize.

.CodeWP-ContentCard {
        margin-bottom: 20px;
        position: relative;
        border: 2px solid transparent;
        border-radius: 5px;
        background: #f0f8fff2;
        display: flex;
        align-items: center;
        padding: 7px;
        justify-content: space-between;
        overflow: hidden;
    }

.CodeWP-BlueHighlight .CodeWP-ActionButton{
	text-decoration: none !important;
}

    .CodeWP-GreenHighlight {
        animation: CodeWP-GreenBorderAnimation 1s infinite;
    }

    .CodeWP-BlueHighlight {
        animation: CodeWP-BlueBorderAnimation 1s infinite;
    }

    @keyframes CodeWP-GreenBorderAnimation {
        0% {
            border-color: transparent;
        }

        50% {
            border-color: #25d366;
        }

        100% {
            border-color: transparent;
        }
    }

    @keyframes CodeWP-BlueBorderAnimation {
        0% {
            border-color: transparent;
        }

        50% {
            border-color: #0086ce;
        }

        100% {
            border-color: transparent;
        }
    }

    .CodeWP-ActionButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bold;
        padding: 5px 20px;
        border-radius: 3px;
        flex-shrink: 0;
        transition: all 0.3s ease-in-out;
        color: white !important;
    }

    .CodeWP-GreenHighlight .CodeWP-ActionButton {
        background: #25d366;
    }

    .CodeWP-BlueHighlight .CodeWP-ActionButton {
        background: #0086ce;
    }

    .CodeWP-ActionButton:hover {
        transform: scale(1.05);
    }

• And voila! With these steps, your GeneratePress website will now proudly display your WhatsApp/Telegram Join buttons, ready to connect you with your audience
• Now, the crucial step is to embed your WhatsApp and Telegram channel links within the provided HTML code. Replace “ADD YOUR WHATSAPP CHANNEL LINK” with your actual WhatsApp channel link. Replace “ADD YOUR TELEGRAM CHANNEL LINK” with your actual Telegram channel link.
• That’s it! Your WhatsApp and Telegram Join buttons will now be linked to your respective channels.

Read More : Protect Your Website Content From Being Copied

Part 2: For Other Theme Users Without Any Plugin

Now, let’s discuss how to add WhatsApp/Telegram Join buttons to any theme without using a plugin. This is because code insertion plugins are not specifically designed just for adding your WhatsApp/Telegram Join buttons. They often include many other features that you may not need, and these unwanted features can slow down your site’s loading speed. Therefore, I’ve created code for you so that you can add these buttons to your WordPress site without a plugin.

I’ll be explaining three methods: Before Content, After Two Paragraphs, and After Content. These methods will allow you to add these “WhatsApp/Telegram Join buttons” to these three locations within your articles or posts.

Requirement : For this, it is mandatory that the Child Theme of the theme you are using is installed and activated.

Method 1: Before the Content

• Editing functions.php : To add social buttons Before Content, edit the functions.php file of your theme. You can find it in Appearance > Theme File Editor.
• Next, copy the following code and paste it into your functions.php file.
• Please note that you’ll need to replace the placeholder values with your actual WhatsApp and Telegram group links.

function add_social_buttons_to_content($content) {
    // Your social buttons HTML
    $social_buttons_html = '<div>Your social buttons HTML</div>';

    // Only append buttons to the beginning of posts, not pages
    if (is_single()) {
        $content = $social_buttons_html . $content;
    }
    return $content;
}

add_filter('the_content', 'add_social_buttons_to_content');

• Now, in this code, you might be seeing this part: <div>Your social buttons HTML</div>. Replace this part with the HTML code provided at the very beginning of this guide.
• Adding CSS: Now, copy the CSS code provided above and paste it into the Style.css file of your Child Theme or into the Additional CSS section in Customize.
• That’s it! Your social buttons will now appear before the content of your posts. Make sure to read the GeneratePress users section above to add your social media platform links.

Method 2: After the Second Paragraph

• To add social buttons After Two Paragraphs, follow the exact same steps as Method-1. This means:
• Edit your theme’s functions.php file. You can find it in Appearance > Theme File Editor.
• Copy and paste the following code into your functions.php file.
• Replace the placeholder values with your actual WhatsApp and Telegram group links.
• Add the CSS code provided in Method-1 to your Child Theme’s Style.css file or to the Additional CSS section in Customize.
• That’s it! Your social buttons will now appear after the second paragraph of your posts.

function add_social_buttons_after_second_paragraph($content) {
    if (is_single() && !is_admin()) {
        $paragraphs = explode('</p>', $content);
        $paragraph_count = count($paragraphs);

        // Your social buttons HTML
        $social_buttons_html = '<div>Your social buttons HTML</div>';

        if ($paragraph_count > 2) {
            $paragraphs[1] .= '</p>' . $social_buttons_html; // Add after the second paragraph
            $content = implode('</p>', $paragraphs);
        }
    }

    return $content;
}

add_filter('the_content', 'add_social_buttons_after_second_paragraph');

Method 3: After the Content

• The third method is to generate your WhatsApp/Telegram Join buttons at the very end of the post content.
• For this as well, you need to follow the same process: Paste the following code into your functions.php file and Replace the placeholder values <div> Your social buttons HTML</div> with your actual WhatsApp and Telegram group links.
• Add the CSS code provided in Method-1 to your Child Theme’s Style.css file or to the Additional CSS section in Customize.

function add_social_buttons_end_of_content($content) {
    $social_buttons_html = '<div>Your social buttons HTML</div>';
    
    return $content . $social_buttons_html;
}
add_filter('the_content', 'add_social_buttons_end_of_content');

• That’s it! Your social buttons will now appear at the very end of your posts.

Conclusion

Incorporating social follow buttons (WhatsApp/Telegram Join buttons) into your WordPress site can significantly boost user engagement and social media followers. Whether you’re using GeneratePress or prefer a different theme, the methods described above provide straightforward solutions for adding social media to your site. Experiment with placing these buttons in different locations within your posts to see what works best for your audience and content.

By now, you’ve likely mastered How to Add Telegram WhatsApp Group Button in WordPress to your WordPress site without relying on plugins!

This simple process can significantly boost social media engagement and follower growth on your website. If you found this post helpful, don’t forget to leave a “Thanks” comment below. Your appreciation motivates me to create even more informative content!

Additionally, help spread this valuable knowledge by sharing this post on your social media channels with your friends and colleagues.

Thanks, Happy Blogging!