DEV Community

Cover image for 🐦 JavaScript Twitter Share Url Button
alexpaper
alexpaper

Posted on

🐦 JavaScript Twitter Share Url Button

The Tweet button allows you to quickly share the webpage you're viewing with all your followers,
clicking the Tweet button provides you with a prepopulated Tweet containing a link to that webpage.

Amazing, but how to add the Tweet button to your website, to share a blog post url for example?

In React you can use React-Share, but if you don't want to use an external package you can achieve the same result in a few lines of code7

How to use the Tweet button

Very simple

  1. When you see the Tweet button on a webpage that you feel like sharing, click it.
  2. If you're not already logged in to Twitter, you will be prompted by a pop-up box to log in.
  3. A Tweet box will appear for you to post a Tweet linking to the webpage you visited.
  4. When ready, click β€œTweet.”

Implementation

After creating the button all you have to do is associate it a click event that calls this function:

function sharePage() {
    const url = window.location.href;
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(url), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=600');
    return false;
};
Enter fullscreen mode Exit fullscreen mode

Done!

In this video you can see a simple implementation
video

have a good day!
πŸ‘‹

Top comments (0)