Wednesday, 5 November 2014

How to Add the Official Twitter Widget to Your Website



This post has been updated to reflect the recent Twitter API changes that has stopped the previous code from working. The updated tutorial below will get you back on track!

twitter-widget-sm
When building custom WordPress websites and custom WordPress themes for our clients, we are often asked to integrate their Twitter feed into the website sidebar. Many personal brands like to display their Twitter feed in the sidebar to bring more dynamic content into their site, promote their Twitter feed and get new followers, and show the value they provide with their tweets.
We love WordPress plugins, but I prefer to keep them to a minimum when simple code is available, so I’m happy to report that adding Twitter to your website can be accomplished quickly without using a WordPress plugin by instead using the official Twitter widget. The Twitter widget can also be used non-WordPress sites. Only the final implementation on your website will be different.
Here are instructions on how to create your official Twitter widget:
  1. Navigate to this page and click on “create new” to start building your Twitter widget
     
    twitter-widget1
  2. Once you create the widget you can now select your options.
     
    twitter-widget2
  3. After you choose your timeline source and options, just click the “create widget” button and Twitter will generate a preview for you and then supply the code you can use just below the preview window. Copy and paste this code into a plain text file and save it.
     
    twitter-widget3
Now that you have generated the official Twitter Widget code, the next step is to add it to your website. In a WordPress site, simply log in, go to the widgets screen and either add a new text widget to your sidebar and paste in the Twitter code, or add the Twitter code to an existing text widget and click save.
Once you save the changes to your text widget, take a look at your site to see how it looks. If your new Twitter widget is a little off or if you want to change the appearance of it, you will need to dive into the Twitter developer documentation to get it just right.

Source: http://www.bourncreative.com/

No comments:

Post a Comment

Disqus Shortname

Comments system