Though Twitter is a short messaging platform, it works effectively for promoting your content. Besides promoting your WordPress articles, you can also focus on embedding Twitter timeline in your site. It will increase the user interaction and average visiting time on your site. There are many WordPress social plugins available that can help you in achieving this. However, social plugins drastically pull down the site’s speed and hence you should avoid using them unnecessarily. Keeping that in mind, in this article, we will explain how to embed Twitter tweet and timeline in WordPress without using any plugins.
Embedding Twitter Tweet and Timeline
Earlier Twitter was offering “Widgets” section within your account. However, the latest version has separate “Publish” section similar to Facebook Social Plugins. You can select the widget and get the embed code for inserting in WordPress site. Go to Twitter’s Publish section and you can find three ways of using the widgets in your site:
- Embed a single tweet
- Embed the complete timeline
- Add Twitter buttons
Users can retweet, comment and copy the tweet URL from the embedded tweet right from your webpage. Users can also start following you if they like your content. The advantage is that you can embed anyone’s tweet or timeline in your page. In this way, you can add additional information relevant to your post and allow users to get dynamic updates.
1. Embedding a Single Tweet
You can embed individual tweets in two methods. One is to simply embed the tweet URL in WordPress editor. WordPress will automatically convert the URL into Tweet and you do not need any additional plugin or setting for this purpose. However, make sure you have not disabled embed feature in WordPress using a performance optimization plugins like Perfmatters.
- Go to any tweet of your own or from any other user.
- Click on the “Share” button showing at the bottom of the tweet.
- Select “Copy link to Tweet” option to copy the tweet link.
- Now, login to your WordPress admin dashboard and go to the post editor. Simply paste the tweet URL where you want to showcase the tweet. Alternatively, you can insert a “Embed” block to paste the URL in the box and click “Embed” button.
- You will see the tweet appears beautifully with image (if available in the original tweet) and text content. Below is the real example how the embedded tweet will look like. As mentioned, the single tweet embed contains comment, reply and like options.
- WordPress will also automatically resize the tweet on mobile devices. Make sure the block settings in the sidebar has the option “Resize for smaller devices” enabled.
Get Embed Widget from Twitter Publish Section
Net method for embedding single tweet in WordPress is to get the widget code from Twitter’s Publish section.
- Go to Twitter Publish section and click on “Embed Tweet” option.
- It will ask you to enter the URL and you have to get the URL of a tweet as explained above from “Share” options.
- It should look something like below:
https://twitter.com/WebNots/status/1196629464333082624?s=20- After getting the URL, paste it in the box and press “Preview” button.
- You can see the preview of tweet along with the widget code for embedding it on your site. If you want, click on the “set customization options” link showing on the top of the widget code to adjust the appearance of the tweet.
- There are few customization settings for changing the look to light or dark and set the language. You can also hide the conversation and disable personalized ad tracking by selecting “Opt-put of tailoring Twitter” checkbox. After finishing the customizations, click on “Update” button to get the final embed code.
- Click on “Copy code” button to copy the code and you will see a success message like below.
- Now, go to WordPress post editor and insert a “Custom HTML” block.
- Paste the copied widget code and should look like below.
- You can click on “Preview” to view the widget is working and “Publish” your post if everything looks fine.
- Below is the real example of tweet using Custom HTML block in WordPress editor.
Get $2.95 Bluehost Hosting for your WordPress sitehttps://t.co/Drgu0eQMmr
— WebNots (@WebNots) November 19, 2019
2. Embedding Twitter Timeline on Your Page
This is an ideal option to showcase the timeline of your entire profile. However, make sure to limit the widget’s height so that it does not run endlessly. Twitter also shows a load more button after showing certain number of tweets and users can click on it to view the tweets in paginated manner.
- When you are in Twitter Publish page, click on “Embedded Timeline” option and provide your Twitter profile URL.
- Make sure to type your profile URL and not the URL of individual tweet. Otherwise, you will get an error like below.
- After entering correct URL, click on “Preview” button to view the widget code.
- Click on the “set customization options” link, set the height and width for your Twitter timeline widget and then click “Update” button.
- Finally, copy the widget code and go to your WordPress admin panel. You can showcase the timeline widget inside post content, sidebar or footer area using Custom HTML element block.
Remember, you can showcase the profile timeline, lists and favorites using the above widget by providing relevant URL. It is also possible to showcase the stories from your TweetDeck.
3. Embed Twitter Buttons
Similar to Facebook like and follow buttons, you can embed share, follow, mention, hashtag and messages button from Twitter. However, make sure to use correct URL for generating the widget code depending upon the type of button you want to insert.
- When you are in the Publish section, click on “Twitter Buttons” option.
- You will see a list of available buttons and click on the one you want to embed.
- For example, we will select the “Follow” button and hence we need to provide the profile URL to see the preview.
- Copy the widget code or click on the “set customization options” link.
- You can remove the username in the button or make it bigger size in the customization and click on the “Update” button to get the finalized widget code.
- You can paste the code anywhere in your WordPress site using Custom HTML block. Below is how the real Twitter follow button will look on your site.
Final Words
Generally, social plugins in WordPress help you to share the current post’s URL to Twitter. However, you do not always need to show a share option. You can embed individual tweet in WordPress editor or showcase entire Twitter timeline or add follow button as explained above without additional plugin.
