How to Put a Twitter Badge on a Website


Twitter offers several resources for helping make your Twitter presence known from your website. There are two types of HTML badges you can add to a Web page, with customization options: buttons and widgets. Buttons include the Follow and Tweet buttons. Widgets embed Twitter search results or tweets on your page. Twitter gives you the HTML code, so all you have to do is paste it into the HTML code of any Web page.

Getting the Button Code

  • Log into your Twitter account and go to Twitter's Button page (see Resources) to add a Share a Link, Follow, Hashtag or Mention button to your website.

  • Select the button you want and then use the options provided onscreen to customize it. For most buttons, you can select a large or small button or change the username that appears.

  • Examine the preview button that appears as you make changes. When you are satisfied with the appearance, highlight the HTML code and copy it to your computer's clipboard by pressing "Ctrl-C" on the keyboard.

Getting the Widget Code

  • Log into Twitter, go to the Twitter Widget page (see Resources) and click the "Create New" button.

  • Select the "User Timeline" tab to post a badge with your recent tweets, or someone else's public tweets. Select "Favorites" to display recent tweets you have favorited on Twitter, "List" for recent tweets from one of your Twitter lists, or "Collection" for a list of collected tweets. Select "Search" to display a list of tweets from anyone on Twitter using a hashtag or search term you specify.

  • Customize the widget as desired to change its theme, colors and size. To make the widget safe for the workplace, widgets have the "Safe Search Mode" enabled by default.

  • Highlight the HTML code and press "Ctrl-C" on the keyboard to copy it.

Adding the Code to Your Web Pages

  • Open an HTML file from your website using your favorite Web editor. For this process you can also use a plain text editor like Notepad. If you are using a platform like Tumblr, use your template's built-in HTML editor.

  • Insert the cursor where you want the Twitter badge to appear and press "Ctrl-V" on the keyboard to paste the copied code to the page. In most cases, this should be anywhere between the "<body>" and "</body>" tags.

  • Save the HTML file. Upload the page to your website host using your preferred FTP client if you are using a self-hosted website with static HTML pages. Repeat this same process to insert a Twitter page on additional pages on your website.

Related Searches


  • Photo Credit amana imagesRF/amana images/Getty Images
Promoted By Zergnet



You May Also Like

  • How to Add a Link in Twitter

    If you come across the best website to find deals on name-brand shoes or an intriguing news story, you most likely want...

  • How to Link Twitter to a Website

    Since Twitter got rolling, it has been a popular way to keep friends updated on your day, follow others' daily activities, and...

  • How to Embed Twitter in HTML

    Extend your Twitter reach by pasting a Twitter widget into your website's HTML code. This will display your tweets for all of...

  • How to Add a Twitter Button

    Putting a Twitter button on your blog or website will allow people to post your Web page on their Twitter status updates...

  • How to Use the Twitter Logo

    The Twitter logo and bird, as well as the terms "Twitter" and "tweet," are trademarks of Twitter, Inc. In order to use...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!