|Read more about this book|
(For more resources on this subject, see here.)
Twitter is a popular and widely used micro-blogging application and website. You can sign up for a Twitter account and post tiny snippet-based blog entries, 140 characters or less, to your Twitter home page. You can log in to your Twitter account and post your 140 character entry into the What's happening? text area box and then click on the Tweet button to publish it. The tweet will appear on your account's home page—your default Twitter home page—and it will be shared on the main Twitter home pages of your followers.
To send a tweet to another user, you can use the hash tag in front of their username in your post. So, for example, if I was going to send myself a tweet, I would add this in my text area box before adding my post: #jamesweblabs. For more on the history and functionality of Twitter, check out the Wikipedia entry at: http://en.wikipedia.org/wiki/Twitter. Twitter also has a detailed Help and support documentation section on its main site at http://support.twitter.com/.
You may want to integrate Twitter with your Drupal site, to do things such as posting all of your most recent tweets into a Drupal block that will appear on your home page. You also may want to run this block automatically via a web service integration so that the block updates automatically whenever you post a new tweet to your Twitter account. Drupal and Twitter can easily integrate through these web services by using contributed modules.
In this article, we're going to install, configure, and use the Twitter module so that we can integrate our Twitter account with our Drupal user account; we can also post tweets to the sidebar block on our site. With the Twitter module, we'll also expose some of its fields to the Views module and be able to create more powerful and dynamic listings of Twitter-based content.
We'll also look at other contributed modules including Tweet.
The Twitter API
The Twitter API and service integration with Drupal uses the REST (Representational State Transfer) API protocol and a Streaming API protocol. Twitter does state in its API documentation that the service does not offer unlimited usage. Twitter does impose limits on the number of requests and updates made to its service API. The REST service is HTTP-based and uses GET and POST requests. GET is used to retrieve data so, in our case, this will be used when our Drupal site tries to receive the latest Tweet posted to your Twitter account. POST requests are used when you submit, update, or delete node data that you have sent over to Twitter and posted as a Tweet using the Twitter module.
Using REST as the protocol, the API does support various formats for data transfer including XML, JSON, RSS, and Atom. For more details on the Twitter API and how to use it, see the Twitter API documentation for developers at: http://dev.twitter.com/pages/every_developer.
The Twitter module
The Twitter module is available via its Drupal project page at http://drupal.org/project/twitter. The module allows for integration with Twitter's API web service. It allows you to integrate your Twitter account with your Drupal user account; post Tweets to a block in Drupal; and allows your Drupal users to post to their Twitter account using Drupal node content. Drupal Views also integrates with the module and you can create your own customized Views-based listings of Twitter content.
The module gives you a default block called User Tweets and also a user profile page titled user's tweets. We'll set both of these up in the examples that follow.
Integrating the Twitter module with Drupal
Download the 6.x-3.0-beta2 version of the Twitter module. This is the Other release version, not the recommended release. The reason we're going to install the Other release version is that recently Twitter changed their web service API to use authentication provided by the OAuth protocol. This change happened recently, in September 2010, when Twitter redesigned their website and made other security improvements and enhancements to their API.
In order to support OAuth in the integration, you need to make sure to use the 3.0-beta2 version of the Twitter module. You can download it from:
It's listed under the Other releases heading:
Once downloaded, upload this Twitter module folder to your /sites/all/modules location on your web server. You also need to download the OAuth module and add that to your /sites/all/modules. OAuth is required by the Twitter module, so you must install it. The OAuth module is available at: http://drupal.org/project/oauth. Again, with this module, you need to make sure to use the other release (earlier version) of 6.x-2.02. This 2.x version is the version that works with the Twitter 3.0-beta2 module. Make sure you have the correct versions of both of these modules before uploading to your site. This is very important. If the module versions are not the ones mentioned here, you may run into errors or other issues with functionality. So, make sure to install these exact versions.
Go ahead and upload both of these modules to your /sites/all/modules. Once uploaded, browse to your modules admin page and look for the OAuth and Twitter module suites under the Other modules fieldset. For OAuth, you're looking for the Oauth and the OAuth Client Test modules.
Enable the OAuth module as shown in the following screenshot:
Then, scroll down and look for the Twitter, Twitter actions, Twitter Post, and Twitter Signin modules. Enable all four of these modules:
Save your module configuration.
Registering your website with Twitter
Now that we've installed the necessary modules on our Drupal site, we need to set up the Twitter side of our functionality. In order to integrate the Twitter module with the Twitter web service, you need to create two Twitter-related items. The first is a Twitter account. If you do not already have a Twitter account, you can go to twitter.com and sign up for a brand new Twitter account. Go to:
Click on the Sign Up button and then proceed through the account sign-up steps.
Setting up a Twitter application
Now, we need to configure a new Twitter developer application. Once you have a Twitter account, log in to your Twitter account and then go to the twitter.com/apps URL to sign up for a new developer's application on Twitter. Make sure you are signed into your Twitter account already when you go to the apps URL. Launch the apps URL from:
This page will show you any applications you have configured in Twitter. For our site, we're going to set up a brand new application, so, click on the Register a new application hyperlink:
Clicking on that link will load a Register an Application form as shown in the following screenshot. Let's fill that out with the following info:
- Application Name
- Description of application
- Application Website (this is the URL of your website)
- Organization Name
- Website address (again this is the URL/home domain of your website)
Scroll down on the form and then complete the form by adding and completing the following fields:
- Application Type—make sure to select Browser here
- Callback URL—this is the callback URL that the Drupal Twitter module provides
The Callback URL is information that is provided by your Twitter module settings inside your Drupal site. To locate the correct Callback URL to add to the application sign-up form, go to your Twitter setup configuration settings in your Drupal site by browsing to: Site configuration | Twitter setup (admin/settings/twitter). On this page, you will see the Callback URL noted at the top of the OAuth Settings fieldset. You should see something similar to this:
Go back to your Twitter application sign-up form and add this Callback URL.
Now, make sure the Default Access type is set to Read & Write. Finally, make sure to check the Yes, Use Twitter for login. This will allow you to authenticate your posts to your Twitter account username and password when you try to post Drupal content to your Twitter account. So, make sure that box is checked. Your app form should now look like this:
Complete the reCAPTCHA field at the bottom of the form and then click on the Save button.
Twitter will load a page confirming your application is successfully configured and show you your application details. This includes your Consumer key, Consumer secret, Request token URL, Access Token URL, and Authorize URL. For integration with our Drupal site, we're going to need the Consumer key and secret.
Leave this app details confirmation page open and then open up your Drupal site in another browser tab.
Configuring the Twitter module once you have your app setup
With your Drupal site open, go back to your Twitter module configuration form in your Drupal site at the following path: admin/settings/twitter.
Here, you want to copy and paste your Twitter Consumer key and secret code into the respective fields for OAuth Consumer key and OAuth Consumer secret. Also, make sure to check the box next to Import Twitter Statuses. This will allow for your Drupal site to request posts from your Twitter account and add links to these tweets on your user account page, and also in a User Tweets block in one of your site's regions. This is what allows for the total cross-pollination and integration of your Drupal site with your Twitter account. It's very powerful and flexible for running the Twitter import functionality on your site.
Finally, set the Delete old statuses drop down to 1 week. This will keep your Tweets block up to date on your Drupal site and show only updated and recent tweets.
Let's go ahead and do that. You should have a screen that looks like this:
Go ahead and Save configuration.
Now, let's check and tweak some of the other Twitter module settings before we test our posts. Click on the Post link at the top of your Twitter setup page.
On this page, you can specify what content types and respective Drupal content you want to announce and post to your Twitter account. Let's make sure we check the boxes next to the Blog entry, Page, and Story types. Of course, you can enable all of your content types if you need to, but for this example, we'll just post our new blog entries over to our Twitter account.
The Default format string field shows you the format of the link that will be posted over to your Twitter account announcing your new Drupal content. So, when you post a node to your Drupal site using the blog type, the post will appear on your Twitter account in the following format as a hyperlink back to your post on Drupal:
New post: !title !tinyurl
This will show the Drupal node title, !title, value along with a tinyurl formatted hyperlink back to your Drupal post. So, for example, the resulting post on Twitter will look like this:
·New post: Testing post to Twitter http://tinyurl.com/33jnclx — 1 hour 53 min ago
Your Post screen should now look like this:
Save your Post page configuration.
|Read more about this book|
(For more resources on this subject, see here.)
Setting up OAuth configuration
Now, we need to check our OAuth settings. Go to Site configuration | OAuth or here:
Make sure you check the box for HMAC-SHA1 OAuth cryptography because this is the security method that Twitter and OAuth use for this type of integration:
Setting up your user account to integrate with Twitter
Now, we need to tweak our user account settings so that our logged-in user account can communicate with its respective Twitter account and utilize all of the settings and configuration we set in the above instructions.
In our example, we're going to authenticate our main /user/1 admin account with the Twitter account we are using for our site. In many cases, you may want to allow each user on your site to post to their own Twitter accounts. This is possible but these instructions focus on using one account globally for your Drupal site. On a production level website, you also probably will not want to authenticate the main super /user/1 admin account over to your Twitter account due to security reasons (since this is the main admin account on the site). Again, here this will serve as a good example for our demo.
First, go to your user account page for the account you are currently logged in as. I'm logged in as the admin account, so I'll go to: /user/1.
Now, on the main user account page for /user/1, click on the Edit tab. When you do this, you'll se e a new secondary menu of options on the Edit form. You should see a twitter accounts link. Click on that link:
Now, click on the Add account button.
The site will redirect to a Twitter authorization web page asking you to allow your site's access to your Twitter account. Click on the Allow button:
Twitter should authorize and redirect you back to your Drupal site's /user/1/edit/twitter page. It knows to do this because you set up your Callback URL to work with your Twitter account. Now, you will see that your new Twitter account is listed in a table on your main Drupal account page. You should see a screen that looks like this:
This shows us the name of the Twitter account, and the Import status of the account for whether you want your Twitter tweets imported to your Drupal site automatically. There will also be a link to make this account global, to be used across your entire website and by any user logged into your site if you allow the user permissions. For now, we will not make the account global. We only want to use this Twitter account with our /user/1 account in these examples.
We have configured our Twitter application, the Twitter module, and our authentication methods and permissions. We're now ready to test posting our Drupal nodes announcements over to our Twitter account.
Posting your Drupal nodes as tweets to your Twitter account
Let's go ahead and post a new piece of content to our Drupal site and post it as a tweet to our Twitter account. Go ahead and locate a blog post or create a new blog post on your site. On the edit form of your post, you should now see a fieldset titled Post to Twitter.com. There is a checkbox in this fieldset titled Announce this post on Twitter. Check this box if it is not checked by default.
When you check the box, the format of the Tweet URL will appear in the URL field. If you do not want the New post part of the formatted URL to appear, you can safely delete that, but make sure to leave the remaining part of the formatted URL: !title !tinyurl.
Now, Save your node.
Once you click on Save, you should get a notification box that tells you that the node has been Successfully posted to Twitter:
Go ahead and launch your Twitter profile home page, and you should see the new post at the top of your Twitter timeline:
Click on the tinyurl link and you should be directed back to the node on your Drupal site. So now, your Twitter readership can easily see that you have tweeted a new Drupal post and they can click on the link to launch the post on your Drupal site and read it.
Congratulations! You have successfully taken a Drupal node and announced it on your Twitter site.
Showing tweets in blocks on your Drupal site
The Twitter module ships with a default block called User Tweets that will show Twitter tweets and statuses on your site's user profile pages. This means that each user account that has configured a corresponding linked Twitter account can show their User Tweets block on their user profile page.
To activate the block, go to your Site building | Blocks admin page and look for the User Tweets block in your disabled blocks section. Enable that block to show in a specific region on your site. You can configure this block like any Drupal block to show for specific roles and on specific pages of the site.
Now that we have the user/1 account configured to use the Twitter web service, we can browse to our user/1 account page and once we have enabled the User Tweets block, we should see this block of tweets appearing in our right sidebar area. You should see a block of content that resembles this:
The user's tweets block is configured from a View that the Twitter module installs on your site in your Views administration area. You get two default Views when the Twitter module is installed. On your user account profile page, if you click on the Twitter link or tab in your account, you will get the resulting View page of your user's tweets. This View display should correspond to the block display of your user's tweets block. If you launch the path /user/%/tweets for a specific user ID, you'll get the following page display (or something similar to this):
Depending on how you have the View configured, the user's tweets block will show a certain number of tweets and potentially use a pager.
Let's go ahead and take a look at the Views configuration for our tweet content and make some adjustments to both the page and block view so you see how the block and page displays of your tweets can be enhanced and tweaked.
|Read more about this book|
(For more resources on this subject, see here.)
Twitter module page and block Views
The Twitter module ships with a default View called tweets. This provides a huge amount of flexibility and power when it comes to methods of displaying your user's tweets on the website. Since you can use Views in block and page formats, here you can publish and display your tweets in multiple layout options and configurations. The other great thing about the tweets views is that they use arguments in order to show tweets for a specific user account. So, you can easily learn how to use arguments with Views by studying the setup and configuration of the tweets View. Let's do that now.
If you need introductory material and tutorials on using the Drupal Views module, the module is covered in detail in two Packt titles: (https://www.packtpub.com/drupal-for-education-and-e-learning/book); and (https://www.packtpub.com/drupal-6-websitebuilder-solutions/book).
The tweets View is configured for both a page and a block view. The View will look like this in your Views list:
Click on Edit and let's look at the View configuration. Notice that the View is split up into a default Tweets View, a User page, User block, and a Global block view:
The default view Tweets sets some default configuration for all of the Views to share. It styles the view as a Table, uses a mini pager, and displays ten tweets per page. It uses a View argument for User: Uid. This sets an argument that the View should only return tweets for a specific user account when the path typed into a browser address field is of the following: /user/%/tweets. The title of the resulting page will be %1's tweets; and the argument type is User ID from URL. If you look at the argument configuration, you should see this:
The default view also filters in the following fields: Twitter: Profile image, Twitter: Message Text, and Twitter: Created Time. These are the fields that get displayed out in the block content. So, for example, if you wanted to remove the Created Time text, you could do that by deleting the field from the View output.
The page and block Views show the same content and use the same argument. The page version displays 10 items per page, while the block only shows the top 5 tweets. The page View also displays the Twitter account profile image if there is one in the Twitter account in question. If you view the user tweets page, you'll see that the profile image appears in the first column of the table next to each tweet. If you view the source code for the View table using Firebug, for example, you'll see that the profile image URL is something similar to this: http://a3.twimg.com/profile_images/448761483/P1060536_normal.JPG
So, all of the profile images are populating via the Twitter service domain (a3.twimg.com). You can test that this is the correct profile image by going to your Twitter account and viewing your profile image (as a View image in the browser). You should get a matching profile image name, with a potentially different scale version of the image. I get this when I review the URL of the image via Twitter:
You have successfully added a View block and View page of your admin user account's tweets to your Drupal site. You can now get real time tweet updates on your Drupal site as they are posted to your Drupal account. You also know how to configure and tweak your displays of these tweets using the core Twitter module tweets View as a model. Since you can display your tweets as Views, if you are a themer you now also have the power to theme these displays. Theming the Views is a bit beyond the discussion and topics of this book, but for more information on theming, see the module documentation at: http://drupal.org/node/412748
Finally, if you want to set up specific rules using the core triggers and actions modules that post nodes automatically to your Twitter home page without having to check the box on each node, you can do this. The Trigger module includes a hook to the Twitter module that allows you to configure a Post to Twitter action. Let's look at that now.
Actions and triggers with the Twitter module
Make sure you have enabled the core Drupal Trigger module and the Twitter actions module. First, we'll want to configure the action. Go to Site configuration | Actions and then scroll down all the way to the bottom of the Actions page and in the Choose an advanced action drop down menu, select the Post a message to Twitter action:
Click on the Create button. Now, in order to use this action, you'll also need to add your Twitter account name and password to this action screen as well. Go ahead and do that and add a message that will get posted to your Twitter account page when you post the new Drupal content. The message can include the following tokens: %site_name, %username, %node_url, %node_type, %title, %teaser, %body. Let's go ahead and format the message like this: New post: %title, %node_url. This will add the title of our post and a link to its URL. Your action form should look like this:
Save your action. Now, your action should appear in the main Actions listing at /admin/settings/actions:
You're ready to configure your Trigger now. Now, you can associate your core Triggers with this new action. For example, you can set the Twitter action to happen when you save a new post or update an existing post. Go ahead and assign the Post a message to Twitter action to your Trigger: After saving a new post:
Click on the Assign button. Now, go ahead and create a brand new node on your site. You can leave the 'Announce this post on Twitter' unchecked since you now have a trigger set up in your site to post the announcement automatically when a node is saved. Save your new node. When you save your node, you should go to your Twitter home page and refresh. The new node title and link to its URL should be posted as a tweet:
You have learned how to post tweets from Drupal to your Twitter account and also how to configure these posts to happen automatically using actions and triggers. You can view your site's recent log entries and actually see the actions type posted in your log entries. It should state Action Post a message to Twitter saved. If you click on that log link, you will see the details of the action that ran.
Additionally, for the most recent tweet to appear back in your tweets View block, you'll need to run your cron on the site so that the View updates with the latest tweets from your Twitter account.
This is amazing integration. You have now learned how to post your tweets to your Drupal site and also take Drupal nodes and post announcements about them back to your Twitter home page.
The Tweet module is another contributed module that allows for integration with the Twitter web service API. This module puts a link on your site's nodes to allow for posting node content to Twitter. You can also shorten the URL (to your Drupal node) that gets posted to Twitter using a combination of the Shorten URLs and the Short URL module. You may want to customize your URLs and make them your own formatted short URL instead of relying on the method Twitter uses, which is to automatically shorten any URL that's over 30 characters in length. For example, when we posted nodes to our Twitter site using the Twitter module, you'll notice that the Twitter API automatically created short URLs using the tinyurl format. An example of this is: http://tinyurl.com/22oy6wf. We may want more control over these URLs so that we don't have to use the tinyurl formatted link. These modules will enable you to set up your own formatted short URLs to use with your Twitter posts.
We're going to install these three modules and try them out. First, grab the Tweet module from its project page here: http://drupal.org/project/tweet. Then, download the Shorten URLs and Short URL modules from their respective project pages here: http://drupal.org/project/shorten and http://drupal.org/project/shorturl. Install them to your site as you would any contributed module to /sites/all/modules.
Go ahead and enable all three modules in your main modules administration page. This will include the Tweet, Shorten, Record Shorten, and Short URL modules. Save your modules configuration.
Configuring short URLs
With our modules enabled, go to your Site configuration | Shorten to load the Shorten module configuration page. You'll see the Shorten Web service methods and services listed that you can choose from. The first setting we'll tweak is the Use "www." Instead of http://. We're going to uncheck this so that we continue to create links using the http:// protocol. This will open up more flexibility for us because more web services use the HTTP method.
Shorten provides both PHP and cURL methods of retrieving the shortened URL from the Web service of choice. You can also choose a default and backup service from the multiple services listed, including but not limited to: is.gd, short.ie, TinyURL.For our example, we're going to choose the Drupal ShortURL module for the service and None for the backup service, for now. We want to leverage the ShortURL contributed module to create our short URLs so that's why we choose that as our service. All other settings on this configuration page can be left as their defaults. You should have a form screen that looks like this:
Save your configuration.
Configuring the Tweet module
Now we're going to configure the Tweet module. Go to Site configuration | Tweet to load the Tweet module configuration. For our configuration, let's set the following:
- Type of link to show on nodes: icon_text
- Type of link to show on teasers: icon_text
- Open Twitter: In new window with target="_blank"
- Node types on which to display link: blog and page
You should see a screen that looks like this:
Let's leave the taxonomy terms box blank for now. We'll only use the module with our node types chosen above. Leave the Twitter image set as the default that the module gives you.
Now, scroll down until you see the Format and Text of link boxes. Here's where we'll set the format of our shortened URL. By default, the shortened URL will be in this format: [url] [title] [node-tags]. This means that the node URL will show first, then the title of the node post, then any tags you have associated with the node. Let's delete the node tags token and just leave in the URL and the title tokens. Let's also tweak the Text of link field to just read Tweet. This is the link the user will click on to actually post the tweet over to Twitter.
Save your configuration. Now, we can test the module out. Load one of your page or blog nodes and you should now see a new button/link appearing on your node that says Tweet. The Tweet text should appear next to the Twitter icon. Before clicking on the link, make sure you are logged into your Twitter account:
Let's go ahead and click on the Tweet link. If you are not currently logged into your Twitter account, Twitter should open and it will prompt you to log in to your Twitter account. Go ahead and do this. Next you will be redirected to your Twitter home page and the Tweet information will be displayed in the What's happening? text box. This will show the shortened URL format for your link and the title of your node. In this example, I have the following format:
www.variantcube.com/lqg Packt presents the e-Pub format
If you are happy with your tweet format, you can go ahead and post this by clicking on the Twitter Tweet button. Now, you'll see your new Tweet appear on your home page. The shortened URL is now a link and you can test it to make sure it opens up the correct node:
Testing the link does open the node on your Drupal site. You'll notice that the URL opens on your Drupal site with the /node/id URL. Notice on your Twitter home page that the URL is shortened to your site's domain URL followed by the shortened 3-character node URL; in this case it's lqg. So, this shortened URL worked for our Twitter configuration and purposes.
If you want to see a listing of all the shortened URLs on your site using the Shortened URL module, you can go to Site configuration | Shorten | Shortened URLs. You'll see a table that shows the original URL and the shortened version and the service that provides it, in our case, the Drupal ShortURL contributed module:
So, we have successfully configured the Tweet module and used our Shortened URL and ShortURL modules to provide short URL services for our Tweet posts to Twitter. We have now expanded our repertoire of methods for getting our Drupal node content over to our Twitter account.
In this article, we looked in detail at setting up web services for integration of Twitter with our Drupal site. This allows us to post Drupal nodes as Tweets to our Twitter account, and also to take tweets and post those back to our Drupal site automatically. We used two main modules including Tweet and Twitter as well as some helper contributed modules in order to provide our node URLS in a shortened format. Here's a brief summary of what we accomplished:
- Enabled the Twitter module and used it to post Twitter account tweets back to our Drupal site and make them appear in View blocks
- Used Twitter module to post our Drupal node content to our Twitter account home page
- Set up automatic actions and triggers to use with our Twitter module
- Enabled the Tweet module to enable easy posting of node content as a Tweet to our Twitter account
- Created shortened URLs for our node URLs so that we can present these in a shorter format on Twitter and so they meet the Twitter requirement of 30 characters or less for hyperlinked URLs
- Installing Drupal 7
- Translations in Drupal 6
- Drupal Theming
- Content in Drupal: Frequently Asked Questions (FAQ)