You are here

Display tweets from your twitter account on your Drupal website

So you want to incorporate all that awesome tweeting you do somewhere on your Drupal website? Read on.

Implementation

  1. Get an account on dev.twitter.com. Login with the twitter username you'll want to pull tweets from and add your website (on which you'll be embedding the tweets) as a new application! This is needed so your website is identified as an application that can communicate with your twitter account once the new authentication requirements are in full effect. Then you'll have the consumer key/secret the twitter module uses to login
    Adding your website as an application on twitter dev account

    • Choose 'Read Only' for the access if you'll only be pulling tweets (versus posting tweets). In my example, I will only be displaying my latest tweets on the website, and will not be using the 'Log in with Twitter' functionality, ability to post tweets from the website or any other fancy stuff.
  2. On your Drupal website, download and enable the oAuth and Twitter modules
  3. Go to Admin --> Configuration --> Web Services --> Twitter --> Settings and paste in the consumer key & secret you got when you added your website as an application above
  4. Now go to the 'Twitter' tab of the configuration screen on your website. Make sure the 'Website' and 'Callback' URLs on the twitter application side match what's listed in the settings tab of this module on your website. Has to be something like 'http://YOURSITE.com/twitter/oauth'. Once you're sure these match, paste in the 'Consumer key' and 'Consumer secret' strings from your twitter dev account.
    • Note: if you're testing on localhost, use the following urls for your website and callback URLs (don't worry, these are just placeholders, and your drupal site will send the correct callback URL when it connects):
    • Website URL: http://127.0.0.1:8000/twitter/oauth
    • Callback URL: http://127.0.0.1:8000/twitter/oauth
    • If you're still getting errors when testing with localhost, make sure the version of the module you're using has the patch #5 on this issue queue: http://drupal.org/node/1924478#comment-7260928 (if you have an older version of the module, prior to the incorporation of the patch, get the latest stable/dev release that includes it and uninstall and install the module)
        Adding your website as an application on twitter dev account
  5. Click on the Twitter tab to add a new user
    • Note: make sure you're logged into the twitter account on the same browser while completing this step
  6. Check the 'Tweets' or both the 'Tweets' and 'Mentions' options next to the user depending on what you want to grab and display from your account.Drupal twitter module setup
  7. Finally - run cron to get your latest tweets, and make sure your cron is set to run regularly to update them...

Theming

  1. Go to the 'Views' section of your website and clone, rename, and modify the view that comes with this module until it displays the exact fields you want (for example, I added the tweet author login name to my view). I disabled the default one and just used my new customized view to display my tweets in a block on the main page.
    Editing Drupal Tweets block
  2. I also went a step further and added some extra css to my custom theme to get it looking just right. (Note that I added the css class 'block-twitter-pull' to my twitter view, in the view's 'Advanced' section). Some sample css changes I applied are below
    // Display at '@' sign in front of the screen name 
    .block-twitter-pull .views-field-screen-name a:before { 
      content: "@"; 
    } 
    // Style timestamp to be italics and lighter than the rest of the text 
    .block-twitter-pull .views-field-created-time { 
      font-style: italic; 
      display: inline; 
      padding: 0 8px; 
      color: #bcbab6; 
    }
  3. Results Before (unstyled tweet block, default from twitter module):
    Unstyled Drupal Twitter block

    After (my customized and styled twitter block):
    Styled Drupal Twitter block

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.