HTML - Twitter Feed

{"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"none","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false}

{"IsVertical":false,"DisplayHomeLink":true,"HomeLinkText":"","HomeLinkURL":"","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"Global Horizontal Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

{"ShowBreadcrumb":true,"IsDateTitleVisible":false,"IsBreadcrumbDateVisible":false,"ShowBookmarkIcon":false,"BookmarkIconURL":"","ShowComments":false,"IncludeCommentHyperLink":true,"ShowStructureLink":false,"StructureLinkUrl":"/applications/SiteContent.aspx","ShowUserProfileDetails":false,"ShowMyContentDetails":true,"ShowSearch":false,"UserProfileBreadcrumbBarOption":null,"ShowPublish":false,"ShowLibrary":false,"ManageCMSLink":"/applications/SiteContent.aspx?index","ManageFilesLink":"/applications/SiteContent.aspx?index","LinkSecurityEnabled":false,"ReadAccessToPublish":true,"DenyAccessToPublish":false,"ReadAccessToLibrary":true,"DenyAccessToLibrary":false,"ExternalLinkForPublish":false,"ExternalLinkForLibrary":false,"MyContentBreadcrumbBarOption":{"IsMyFormsVisible":false,"IsMyEventsVisible":false,"IsMyPagesVisible":true,"IsMustReadVisible":false,"IsMyFilesVisible":true,"IsMyContentVisible":false,"IsAssignNotificationsVisible":false,"IsManageMyNotificationsLinkVisible":false,"IsAnonymous":true,"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false},"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false}

{"BreadcrumbEntities":[{"breadcrumbEntityLink":"Home","breadcrumbEntityLinkURL":"/","breadcrumbEntityType":"","breadcrumbEntityLinkPartial":"","isCustomCrumb":true},{"breadcrumbEntityLink":"Apps","breadcrumbEntityLinkURL":"/applications/","breadcrumbEntityType":"IntranetDASHBOARD.Core.Subsite, Core","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"iD CMS","breadcrumbEntityLinkURL":"/applications/sitecontent.aspx","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiCategory, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"Components","breadcrumbEntityLinkURL":"/applications/Components/","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiCategory, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"HTML - Twitter Feed","breadcrumbEntityLinkURL":"/applications/Components/htmlcomponent-twitterfeed.html/","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiPage, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false}],"DateToBeDisplayedAs":"Thursday, 25 April","BreadcrumbDate":"","DateTitleURL":"","ApplicationName":[],"UserManagerDetails":"","CommentsText":"Comments","NumberOfComments":0,"UserProfileBreadcrumbBarOutput":null,"MyContentBreadcrumbBarOutput":{"MyForms":"","MyFormsURL":"","MyEvents":"","MyEventsURL":"","MustRead":"","MustReadURL":"","ManageMyNotificationsLink":"","ManageMyNotificationsLinkURL":"/applications/Notifications/default.aspx#jqTabs-3","MyContentURL":"","MyPagesURL":"/applications/mypages.aspx","MyFilesURL":"/applications/myfiles.aspx","UsersFullName":"Anonymous "}}

{"IsVertical":true,"DisplayHomeLink":true,"HomeLinkText":"iD Applications","HomeLinkURL":"/applications","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"Applications V Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

{"IsVertical":true,"DisplayHomeLink":true,"HomeLinkText":"System Admin","HomeLinkURL":"/systemadmin","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"System Admin V Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

HTML Component: Embed a Twitter Feed

Embed a Twitter Feed

As an example, we have loaded the latest tweets from Bill Gates' twitter feed. Below this is the HTML code we have used to output this through an iD CMS HTML component.

Bill Gates' Latest Tweets

Loading tweets

Twitter Feed Source Code

Below is the code for embedding a Twitter feed. The yellow highlighted sections can be customized to bring in data from other Twitter accounts.


<style type="text/css">
	#twitter_data { font-family: Helvetica, Arial, sans-serif; }
	#twitter_data .item { margin-bottom: 6px; }
	#twitter_data img { width: 30px; height: 30px; }
	#twitter_data .twitterIcon { float: left; padding: 2px 10px 2px 2px; }
	#twitter_data .bubbleLeft { float: left; height: 54px; padding: 10px 2px 0px 14px; background: url(bubble.png) left top no-repeat; }
	#twitter_data .bubbleRight { float: left; height: 54px; width: 6px; background: url(bubble.png) right top no-repeat; }
	#twitter_data .subheading { font-size: 10px; color: #747d8a; text-shadow: 0px 1px 0px rgba(255,255,255,0.5); margin-bottom: 3px; }
	#twitter_data .tweetMessage { font-size: 12px; color: #0c1f3f; text-shadow: 0px 1px 0px rgba(255,255,255,0.4); }
</style>

<div id="twitter_data"><span style="font-style:italic;font-size:12px;">Loading tweets</span></div>

<script language="Javascript">

var twitter_id = 'billgates';
var twitter_count = 5;
var twitter_elem_id = 'twitter_data';

$(document).ready(function() {
	var url = 'http://twitter.com/statuses/user_timeline/'
	+ twitter_id
	+ '.json?callback=twitterCallback&count='
	+ twitter_count;
	var script = document.createElement('script');
	script.setAttribute('src', url);
	document.body.appendChild(script);
});

function twitterCallback(obj){
  var html = "";
  for(var i=0 ; i<twitter_count && i != obj.length; i++){
	html += "<div class='item'>";
		html += "<div class='twitterIcon'><img src='" +  obj[i].user.profile_image_url + "'> </div>";
		html += "<div class='bubbleLeft'>";
			html += "<div class='subheading'><strong>Tweet</strong> from <strong>" + obj[i].user.name + "</strong></div>";
			html += "<div class='tweetMessage'>" + obj[i].text + "</div>";
		html += "</div>";
		html += "<div class='bubbleRight'>&nbsp;</div>";
	html += "</div>";
	html += "<br clear='all' />";
}
  document.getElementById(twitter_elem_id).innerHTML = html;
}
</script>

Twitter Feed Source File

The following image is used in the code above as a background image on each tweet. It is suggested you upload this to your own site and reference it from there.

[{"LastModified":"03/15/2012 02:16","UploadTitle":"1202129241_5485_7_33_1502135599","Thumbnail":"/images/5.0.0.28834_1/spacer.gif","Source":"bubble.png","Description":"","URL":"/applications/Components/htmlcomponent-twitterfeed.html/1202129241_5485_7_33_1502135599_/","Title":"bubble.png","Size":"1.48 kb","Icon":"/images/5.0.0.28834_1/spacer.gif"}]

{"Name":null,"ShowFileSize":false,"ShowLastModified":false,"ShowAllDownload":true,"DisplayOptions":"None","DisplayHeader":true,"HeadingValue":"","DownloadAllLink":"/apps/wiki/DownloadFile.aspx?entityId=5485\u0026componentIndex=7\u0026filename=File_Download_7.zip\u0026sid=4","ThumbnailHeight":"16px","ThumbnailWidth":"21px","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false}

{HeadingValue}

Click here to return to the HTML Component help index

iD Help refers to iD 8

Viewing: {SubsiteLink}

{UsersFullName}

View More

{Profile Name}

Show older comments

Show newer comments

{Profile Name}

{Profile Name}

Show older comments

Show newer comments

{Title}
in {Category}

{Title}
in {SubCategory}

{Title}
in {Calendar name}

{Title}
in {Room}

{Title}
in {Folder name}

{Title}

{Title}
in {Application Name}

{Title}
in {Subsite iD CMS}

{Title}
in {Subsite iD CMS}

{Title}
in {iD CMS Folder}

Share this component
Share Name	*
Add this component to current template Note: You must save the page to Live for this to take effect

Viewing: {SubsiteLink}

{UsersFullName}

View More

{Profile Name}

Show older comments

Show newer comments

{Profile Name}

{Profile Name}

Show older comments

Show newer comments

{Title} in {Category}

{Title} in {SubCategory}

{Title} in {Calendar name}

{Title} in {Room}

{Title} in {Folder name}

{Title}

{Title} in {Application Name}

{Title} in {Subsite iD CMS}

{Title} in {Subsite iD CMS}

{Title} in {iD CMS Folder}

{Title}
in {Category}

{Title}
in {SubCategory}

{Title}
in {Calendar name}

{Title}
in {Room}

{Title}
in {Folder name}

{Title}
in {Application Name}

{Title}
in {Subsite iD CMS}

{Title}
in {Subsite iD CMS}

{Title}
in {iD CMS Folder}