Skip to content

December 9, 2015

How to Embed Twitter Widget into ExtJs Panel

by Joe Kuan

In order to embed Twitter page into ExtJs Panel, we need to first create a Twitter Widget. Go to Twitter account page, select Settings/Widgets.

screen1

Click ‘Create New’, then you should see a Widget setting screen with your own tweeter page as default. Alternatively, we can create a widget with other tweet page by changing the ‘username’. The following screen demonstrates a widget creation page with another username.

screen

At the bottom of the page, there is a container box at the right hand side which have two lines of HTML code. Click ‘Save Changes’ and copy the HTML code onto a clipboard.

screen

Here is what the code looks like (following is a screenshot to avoid HTML conflicting with WordPress):

screen

It is very simple to embed Twitter into a panel. Simply pastes the HTML <a> tag into the panel html property. Then copies the Javascript code inside the <script> to afterrender event handler.

Here is the sample of the code:

xtype: 'panel',
html: '&lt;a class="twitter-timeline" href="https://twitter.com/iTrinegy" data-widget-id="674515262809485312"&gt;Tweets by @iTrinegy&lt;/a&gt;',
itemId: 'twitter',
layout: 'fit',
title: 'Tweets',
listeners: {
afterrender: function() {
!function(d,s,id) {
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
}
}

Here is a screenshot of an ExtJs app with Twitter page.

screen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: