How To Code A “click To Tweet” Button.

17th November, 2020 | Liam | WORDPRESS

How To Code A “click To Tweet” Button

“Instagram, snapchat and other “young” social media platforms taking over the internet, twitter still remains one of the most popular marketing channels”

Having users share your content online is a great way to grow your brand. In this tutorial we’ll cover everything you need to know to add a simple link to your page, so that users can tweet it directly.

With Instagram, Snapchat and other “young” social media platforms taking over the internet, Twitter still remains one of the most popular marketing channels.

It has around 326 million active users per month which means that your target audience is likely using it. This is why you should at least consider using it as a marketing channel for your business. Having Twitter as one of the main marketing channels is not only going to help build awareness of your brand but can also drive traffic to your website and make your articles go viral.

How can this be achieved? Well, it’s a pretty straightforward tactic that some of the top bloggers are using. The idea is that within your blog post you have short pieces of content that are catchy and people like them. Those pieces of content can then be easily tweeted. (For example, it could be a quote from someone who is an authority in your niche, or a statistic that you feel is likely to be shared by your visitors.)

So, let me show you how you can have “click to tweet” buttons added automatically to every quote in your article.

Before we get started, let me say that this is a medium-advanced technique. If you’re using WordPress you can use a ready-to-go plugin that will serve the same purpose.

Creating “Click to Tweet” Buttons with JavaScript

Let’s assume that we want to turn from this article about conferences that says “According to iconic-publishing.com …” into a tweetable block.

Here is how we would create a click to tweet button:

Step 1

    document.addEventListener("DOMContentLoaded", function() {
        // Step 1. Get all quote elements inside the article
        const articleBody = document.getElementById('article');
        const quotes = [...articleBody.querySelectorAll('quote, blockquote')];
    }):

Step 2

Create additional variables to store the current page url, tweetable url and a ‘click to tweet’ button:

    let tweetableUrl = "";
    let clickToTweetBtn = null;
    const currentPageUrl = window.location.href;

Step 3

We need to iterate over all the quote elements that we want to make tweetable and append a “click to tweet button” for each of them:

    quotes.forEach(function (quote) {
        // Create a tweetable url
        tweetableUrl = makeTweetableUrl(
            quote.innerText, currentPageUrl
        );

        // Create a 'click to tweet' button with appropriate attributes
        clickToTweetBtn = document.createElement("a");
        clickToTweetBtn.innerText = "Click to Tweet";

        clickToTweetBtn.setAttribute("href", tweetableUrl);
        clickToTweetBtn.onclick = onClickToTweet;

        // Add button to every blockquote
        quote.appendChild(clickToTweetBtn);  
    });

Step 4

Add 2 missing functions: makeTweetableUrl, that will create a tweetable URL, and onClickToTweet that will act as our event listener and open a window for the tweet (once the button is clicked):

    function makeTweetableUrl(text, pageUrl) {
        const tweetableText = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
        return tweetableText;
    }

    function onClickToTweet(e) {
        e.preventDefault();

        window.open(
            e.target.getAttribute("href"),
            "twitterwindow", 
            "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0,scrollbars=0"
        );
    }

Creating “Click to Tweet” Buttons with jQuery

Now, let me show you a slightly different way to get the same result that you can implement if you’re using jQuery.

Here is the code:

    $(document).ready(function() {

        // Get all quote elements inside the article
        const articleBody = $("#article");
        const quotes = articleBody.find("quote, blockquote");
        let tweetableUrl = "";
        let clickToTweetBtn = null;

        // Get a url of the current page 
        const currentPageUrl = window.location.href;

        quotes.each(function (index, quote) {
            const q = $(quote);
            // Create a tweetable url
            tweetableUrl = makeTweetableUrl(
                q.text(), currentPageUrl
            );

            // Create a 'click to tweet' button with appropriate attributes
            clickToTweetBtn = $("");
            clickToTweetBtn.text("Click to Tweet");

            clickToTweetBtn.attr("href", tweetableUrl);
            clickToTweetBtn.on("click", onClickToTweet);

            // Add button to every blockquote
            q.append(clickToTweetBtn);
        });
    });

    function makeTweetableUrl(text, pageUrl) {
        const tweetableText = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
        return tweetableText;
    }

    function onClickToTweet(e) {
        e.preventDefault();
        window.open(
            e.target.getAttribute("href"),
            "twitterwindow", 
            "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0"
        );
    }

If you’d like more information on any of our services, then please Contact Us directly.