Add Twitter to your Website or Blog
This article teaches you how to add Twitter features to your website or blog, including a timeline of your recent tweets and social buttons like Share and Follow.
Contents
Steps
Adding a Timeline of Your Tweets
- Sign in to Twitter. If you’re not signed in on your computer, go to https://www.twitter.com and sign in with your account name and password.
- You’ll need to be able to access your website’s source code to use this method. If you don’t know how your website works, ask a web developer or IT person to help you with this process.
- If you’re using Wordpress.com, you can use its built-in Twitter widget instead of this method. Click Customize under “Personalize” in your blog’s Dashboard. In the Widgets section, click Add a Widget and select Twitter. You can customize the number of tweets displayed, as well as the look and feel of the widget.
- Go to https://publish.twitter.com in a web browser. This site allows you to quickly customize Twitter widgets for your website.
- A widget will make your tweets available to your visitors without them having to leave your site.
- Visitors can also click the widget to get to your profile, where they can follow or communicate with you.
- Scroll down and click Embedded Timeline. It’s one of the 4 options at the bottom of the page.
- Enter the full URL of your Twitter profile. For example, if your Twitter handle is @wikiHow, you would enter https://www.twitter.com/wikiHow.
- Click Preview. Scroll down to see a sample version of the widget. It’ll appear rather large by default, but you can change that.
- Click Set customization options. The link appears just above your list of tweets.
- Customize the look of the widget. Enter your desired height and width (in pixels) into the boxes, then choose a color scheme from the drop-down menu. You can also select a language, or stick with “Automatic” to tailor the widget to your location.
- The preview image will update as you move through options.
- If you’re not sure what size to make your widget, start with 200 in the “width” box, then increase or decrease the size from there.
- Click Update. This will save the changes you made to the widget.
- Click Copy Code. The code necessary to add the button to your website is now copied to your computer’s clipboard.
- Paste it your website’s source code. You can paste the code wherever you want your tweets to appear. The location varies by site or blog. Here’s how to find the source code for a few popular services:
- Tumblr: Click the Profile icon on your Dashboard, then select Edit Appearance beneath your blog’s title. Click Edit Theme, to open the editor, then click Edit HTML to view your source code.
- Blogger: In your Dashboard, click Theme on the left side of the screen, then click Edit HTML.
- If you’re using another site that’s user-friendly, it may have an "easy editor" on the admin page. Find the "HTML Code" tab or section, then paste the Twitter code.
Adding Twitter Buttons
- Sign in to Twitter. If you’re not already signed in to Twitter in your web browser, go to https://www.twitter.com and sign in now.
- You’ll need to be able to access your website’s source code to use this method. If you don’t know how your website works, ask a web developer or IT person to help you with this process.
- Some blogging sites have templates with customizable Share or Follow buttons you can implement with a few clicks. For example, if you blog at Wordpress.com, you can add a Share button by clicking Sharing Buttons in the Sharing section of your Dashboard.
- Go to https://publish.twitter.com in a web browser. This site allows you to quickly customize Twitter widgets and buttons for your website.
- Click Twitter Buttons. It’s at the bottom right corner of the screen.
- Create your button. Click the button you want to create, then follow the on-screen instructions to enter a link, Twitter handle, or hashtag. Each button has a different purpose:
- Share: Allows visitors tweet the current page. You can add some text that can be included in the tweet and decide whether to include hashtags.
- Follow: Lets visitors follow your site’s Twitter account. Type your Twitter handle when prompted to create the button.
- Mention: Makes it easy for a Twitter user to send a tweet to your site’s Twitter handle (@name). You’ll just have to enter your handle to create the button.
- Hashtag: Lets visitors compose a tweet that contains your hashtag. Enter the desired hashtag and any additional text you want to include in the tweet.
- Message: Visitors can click this button to send you a Direct Message. Enter your Twitter handle and any text you want to include in the message.
- Click Preview. The button will now appear as it would on your website.
- Click Set customization options. Each button has different options you can customize to change the way the button looks and behaves. Follow the on-screen instructions, then click Update to save your changes.
- Click Copy Code. The button’s code is now copied to your computer’s clipboard.
- Paste the button’s code into your source code. Paste the code wherever you want the button to appear. Here’s how to find the source code for a few popular services:
- Tumblr: Click the Profile icon on your Dashboard, then select Edit Appearance beneath your blog’s title. Click Edit Theme, to open the editor, then click Edit HTML to view your source code.
- Blogger: In your Dashboard, click Theme on the left side of the screen, then click Edit HTML.
- If you’re using another site that’s user-friendly, it may have an "easy editor" on the admin page. Find the "HTML Code" tab or section, then paste the Twitter code.
Related Articles
- Use Twitter
- Write a Famous Blog
- Integrate Your Blogger Post With Facebook, Twitter, and SMS with Twitterfeed
- Email a Tweet from the Twitter Website to Another Person
Tips
- To embed your recent tweets into a single Wordpress.com blog post, add the following code to your post editor, replacing “yourhandle” with your Twitter handle (without the @): twitter-timeline username=yourhandle
- Quickly paste code by pressing ⌘ Cmd+V (macOS) or Cntrl+V (Windows).
