eFrog Digital Design |

Both Windows and Mac are integrating social media platforms more and more into their systems – creating a new Tweet is just a click or two away. You can do this on your own website too by integrating with the Twitter Development platform. Today we’re going to cover how to add a “Tweet Box” to any page on your site.

This is what we’re going to create (as seen at the end of the checkout process on eFrogThemes.com)

It’s actually a very simple process. Let’s get started:

Firstly, you’re going to want to create a Twitter application. You can do this here: https://dev.twitter.com/. Once you’ve created your app, you’ll be presented with a screen that details some key information about your application.

What you need to note down for the purposes of your Tweet Box, is just the ‘Consumer Key’.

Secondly we’re going to add the required code to 2 places in your site. Firstly, in the header you’ll want to include the Twitter Javascript library.

Enter your unique Consumer Key into the above snippet and add that before the close of your head tag.

Thirdly and lastly, wherever you want the actual Tweet Box to display, you’ll add the following:

And that’s that. Right out the box your Tweet Box will work perfectly.

Optionally, you might want to edit the styling of your Tweet Box – perhaps changing the color of the textarea, or adjusting the font and size of the heading. To do this, we’re going to add a style tag to the label. The final product would look as follows:

As the Javascript creates that Tweet Box then, the styling you’ve provided will be applied.

Hope you have fun inserting this Tweet Box into your own site. Let us know how you manage!