How to make a twitter widget

Favourite 22 favourites
Tutorial written by smitchellOriginally published on 15th, December 2011 - 1 revision

Preview/Files

Here is the preview link - Preview
Here is the exported folder - Exported Folder
Here is the capx - capx

Getting Started

To make this widget we need a few things first.

- The HTML Div plugin - HTML Div (Plugin)
- Once you have downloaded the plugin, Place it in your plugin directory(eg, C:\Program Files\Construct 2\exporters\html5\plugins)

Now we can open up Construct2!
Note - It's important we open Construct2 after we place the plugin in the directory otherwise it would not appear there until the next time we open construct

Making the actual widget

Choose your widget!
Go to Twitter widgets Twitter Widgets
On the left hand side select "My Website"
Choose the widget you want, (I chose the profile widget)

Here are some screen shots of the widgets we can have -

Profile Widget - Profile Widget Preview 'Display your most recent Twitter updates on any webpage.'

Search Widget - Search Widget Preview
'Displays search results in real time! Ideal for live events, broadcastings, conferences, TV Shows, or even just keeping up with the news.'

Faves Widget - Faves Widget Preview
'Show off your favorite tweets! Also in real time, this widget will pull in the tweets you've starred as favorites. It's great for moderation.'

List Widget - List Widget Preview
'Put your favorite tweeps into a list! Then show 'em off in a widget. Also great for moderation.'

Note The List widget I do not really understand that's why the image for it is pretty blank, I Think the user I am using just does not have any 'Lists'.

Ok so customize your widget to your specifications, and Then move on.

Using The HTML Div

Now we can start to get the widget into Construct2.
There is only one problem I encountered when doing this widget,
The HTML Div does not like the code that Twitter gave us for our widget.

So how do we get it into Construct2??

Well we have to have a server. (A Cloud one will do)
If you do not have one, Go to this link Web Hosting - ITS FREE! And make an account, Dont worry you do not have to actually make a website, but you just need the hosting.
To make a account you need to click on the large sign up button on the right.

Ok so go to your 'CPanel' and click 'File Manager'. Or whatever way you usually upload to your server(note this may differ from each server)
And Make a new Blank HTML File.
The name of this does not really matter.

So once we have our blank HTML File we need to populate it with some HTML, Right?

So write a basic HTML template or use mine,

Download link - Template( You will need to right click, save link as to download it, otherwise it will just open the link) Once downloaded right click and open in your favorite text editor (eg, Notepad)

or copy and paste this into a blank HTML file,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My Construct Widget</title>
</head>

<body>
<div id="Widget"></div>

</body>
</html>

Underneath the "<div id="Widget"></div>" Paste the code Twitter gave you for your widget. Your HTML File should look something like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
</head>

<body>
<div id="twtr-profile-widget"></div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 30000,
width: 'auto',
height: 300,
theme: {

    shell: {
      background: '#000000',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#00e1ff'
    }
},
features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
}
}).render().setUser('ginorea').start();
</script>
</body>
</html>

if you want to download this HTML File and replace the .setUser function with the name of your user then here's the download link - Finished HTML File

Now if you have not already, Upload the finished HTML File to your server(The one I provided or your own)and remember the link, you'll need it. eg, example.com/twitter.html

Final part, In Construct2
Now we can finally bring it into Construct2!!

Once in Construct2 right click, insert new object(HTML Div).

If not prompt to, Drag the HTML Div onto the layout.

Look at the properties box, its asking for inner HTML, The way I found out how to do this was to use a IFrame.

So here is my IFrame,

<iframe src="http://ginoreagame.net76.net/Twitter.html" marginheight="0" marginwidth="0" frameborder="0" style="border:0;height:350px;width:600px;"></iframe>

You can copy and paste that into your inner HTML property, Note you will need to change the iframe src from"http://ginoreagame.net76.net/Twitter.html" to your address with the html file. And your good to go!

Run it and hopefully you should see your Twitter widget in Construct2!!

Message me if there are any problems. .PNG]

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

4
GingerBatMan 2,560 rep

Great Tutorial! Thanks, Im new to construct, But come from a programming background!

Thursday, December 15, 2011 at 10:17:52 AM
0
MariosBitch 2,066 rep

Wow thanks!!

Thursday, December 22, 2011 at 7:23:50 PM
0
WhackyWalrus 2,068 rep

Links are not working :(

Saturday, December 24, 2011 at 8:06:07 PM
0
tavitooo 5,711 rep

Links are died!! not working!! :(

Wednesday, January 04, 2012 at 5:01:28 AM
0
smitchell 8,609 rep

@tavitooo
Sorry, I'll try republish them soon as im not so busy. But why not just follow the tutorial? It will show you how to make it anyways :)

Wednesday, January 04, 2012 at 4:02:54 PM
0
Miceal 4,388 rep

Is this possible with Tumblr?

Tuesday, August 07, 2012 at 11:30:22 PM
0
BluePhaze 14.7k rep

I am thinking of using this to add to the pinned view in Windows 8, that way when the player has the game split screened with another app, one of the items that show in the window is the twitter feed.

Great addition to my games, thanks much!

Monday, January 14, 2013 at 10:32:14 PM
0
PeterMr 5,017 rep

Links down. :(

Saturday, April 06, 2013 at 3:12:55 PM
0
Enzan 2,731 rep

Links are down

Wednesday, December 18, 2013 at 8:01:15 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.