How to Add a Twitter Share Button to Your Blog

Remember you wanted your readers to be able to share your blog posts on Twitter?

Today I tell you how to make this happen. Which means how to add and customize a Twitter share button (aka a Tweet Button) to your blog.

There are a few ways your website and Twitter can interact. For example, you can:

  • Add a Twitter icon hyperlinked to your Twitter page (usually, in the context of an About page)
  • Add a Twitter Follow Button, so viewers can follow you with a click
  • Add a Twitter Message Button to make it easy for site viewers to send you direct messages (DMs)
  • Add a Tweet Button so viewers can share your posts. And this is what you and I are focusing on here.

As a reference point, the post-a-Tweet-from-your-blog user flow is as follows:

  1. A reader visits your blog and reads your post and enjoys it and wants to tweet about it.
  2. Your reader clicks on your Tweet button.
  3. And then arrives to a Tweet page that looks like this:

Tweet share button pop up window

Let’s get to work.

STEPS TO ADD A TWEET BUTTON

STEP 1

Choose where you want your Twitter button on the page. Do you want it on the side of the post? Below the post? Somewhere else? First decide on this.

STEP 2

Add a Twitter icon to the HTML of your website to serve as your Tweet button.

(If you use a Twitter icon, remember to review Twitter’s brand guidelines)

Or if you don’t want to use a Twitter icon, you can simply write some text like “Twitter” as your Tweet button, similar to what I’ve done on this site (see end of post).

STEP 3

Now that your Tweet button is in the proper position within the layout of your page and you have some HTML for your Tweet button, you’re ready to customize the Tweet page (Number 3 in the user flow above), which Twitter calls a Tweet Web Intent:

Tweet share button pop up window

The code for this Tweet page is:

Gilbert Ginsberg Tweet button html

href → the base url
url → your page url
&via → your Twitter username
&text → custom text you can define


For a deeper dive, I point you to the following links, which I used as reference for this post:

Twitter share ⤴