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 -
'Displays search results in real time! Ideal for live events, broadcastings, conferences, TV Shows, or even just keeping up with the news.'
Faves Widget -
'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 -
'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'
}
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]