Display Latest Tweets (Twitter) in Karma HTML Template

Overview

This article describes how to display your latest Tweets within the Karma HTML Web Template. We’ve outlined 2 different methods for doing so.

Method 1: Twitter Widget

This method is the easier of the 2 options. It simply requires visiting Twitter and using an automatically-generated Timeline Widget for powerful and easily display of your latest tweets.

Steps:

  1. Click here to access Twitter’s Widget creation page.
  2. Click the “Create New” widget button. (view screenshot)
  3. Use the point-and-click settings to specify the desired options for your Latest Tweets Widget.
  4. Click the “Create Widget” button.
  5. Copy the widget code auto-generated by Twitter.
  6. Open up our desired HTML page in the code editor of your choice, paste in the Twitter code, Save and rejoice 🙂

Method 2: Custom Twitter API Script

[box type=”note”]Please note: This method requires your website to be hosted on a PHP/Linux web server.[/box] This method is a bit more in-depth and requires a few more steps. Twitter’s new API requires that unique developer tokens be generated in order to pull any information from their servers (ie. Latest Tweets)

Step 1: re-save all “.html” pages as “.php”

  • The Latest Tweets is a PHP script and requires that all pages within the website are PHP pages. (this is only required for pages that will be displaying tweets)
  • To convert an HTML page into PHP simply re-save the page with a “.php” extension.
  • For example: template-blog.html will become template-blog.php

Step 2: Log into Twitter Developer Center and generate the necessary API credentials

  1. Visit: https://dev.twitter.com
  2. Click “Sign In” and sign in using your existing Twitter Account
  3. Hover over your account and click on “My Applications”. (view screenshot)
  4. Click the “Create a new Application” button.
  5. Fill out the form by filling in the required fields. Under the “Website” section be sure to input the URL of your website where you’ll be displaying the Tweets.
  6. Click the “Create your Twitter Application” button.
  7. Scroll to the bottom of this screen and click on the “Create my access token” button.
  8. Now click on the “oAuth Tool” tab at the top of the screen.
  9. Success! Now leave this screen open as you’ll need the oAuth Credentials for the next step.

Step 3: Download Latest Tweets PHP Script

  1. We’ve created a custom script that does most of the heavy lifting for you. This script will be used to display the Tweets within your website. Click here to download latest-tweets.php
  2. Save this file into the root directory of your website (ie. this file will be in the same directory as style.css)
  3. Open latest-tweets.php in the code editor of your choice.
  4. Replace the 4 instances of “replace_this_with_your_api_key” with the required Twitter API information. These are the tokens you created in Step 2.

 Step 4: Include the PHP into Page Template

For this step we’ll be displaying the tweets within the sidebar of our newly saved page template: template-blog.php Here’s a sample of what the code will look like within your page template. The area that is highlighted is the only area that requires modification on your end:

  • Open up template-blog.php and “php include” the latest-tweets script into your page:
    <?php include 'latest-tweets.php'; ?>
  • Next, call this custom PHP function to display the tweets:
    <?php truethemes_print_twitter_timeline('true',3,'truethemes'); ?>
  • The above PHP function has 3 variables which require adjusting: – The first variable can be set to ‘true’ or ‘false’: Should retweets be displayed? – The next variable determines how many tweets to display. (this example displays 3 tweets) – The last variable is your twitter username. (this example shows tweets from truethemes)

Save the changes. Upload to your web server and enjoy. Your page will now automatically pull in tweets from Twitter’s API and format them gorgeously in Karma’s default styling.