How is Gates Foundation creating their

The community page of the Bill and Melinda Gates Foundation (http://www.gatesfoundation.org/about/Pages/community.aspx) displays several twitter and facebook widgets, but I haven't been able to find those specific widgets on Facebook or Twitter.

There is also a display by a 3rd party system which appears to be "Echo" (http://aboutecho.com) so I'm guessing that's just a pay service plugin.

Can anyone help me understand how the Twitter and Facebook widgets were created and customized? They look so nice it would be great to be able to incorporate them into our site.

Thanks experts!
LVL 1
rascalAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Carl TawnSenior Systems and Integration DeveloperCommented:
It would appear to be using this:

    http://twitter.com/goodies/widget_list

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
EMB01Commented:
And to make the live tweets, it seems to be using the API:
http://dev.twitter.com/pages/tweet_button
rascalAuthor Commented:
I'm not sure I understand the connection - when I visit the links you refer to above and create the widgets, I cannot format the look so that it is like the Gates Foundation look. The resulting widgets are just simple thin lined boxes and don't have the additional display features.

For example, on the Gates Foundation page, the Twitter feed has a "What's Happening" callout box with the twitter account name referenced beneath it, and is styled with that blue bar along the top, etc. How is this achieved?
And the Facebook box on the bottom of the page, has the bold blue bars along the top and bottom - again, the facebook widget page I visited didn't offer options for this type of formatting.
What am I missing here?
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

scrathcyboyCommented:
"What am I missing here?"

You have to create YOUR OWN icons from their DEVELOPER APIs
Look at the Page source in the browser -- view PAGE SOURCE
and you will see exactly which twitter and Facebook APIs they are using.
EMB01Commented:
My guess is that they use the API and custom CSS to design the top part from twitter for "whats happening" down to the tweet button and they use the twitter widget to generate the "tweet using #livingproof..." to the twitter logo.  

Here's some code for this part:
<tr>
		<td id="MSOZoneCell_WebPartctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c" vAlign="top"><table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td valign="top"><div WebPartID="de6d61b1-21ee-4593-9dc3-1deb298db91c" HasPers="false" id="WebPartctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c" width="100%" class="ms-WPBody" allowDelete="false" allowExport="false" style="" ><div id="ctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c">
					<div style='width:611px;'><div style='background-image: url(/_layouts/images/GFO/twitter/twitter-611.jpg); width:611px; height:132px;position:relative;'><a href='http://twitter.com/' target='_blank' style='border:none;float:left;top:5px;left:12px;position:absolute;'><img src='/_layouts/images/GFO/twitter/twitter-logo.gif' /></a><div id='CharCount' style='padding-right:11px; float:right; padding-top:4px; font-size:21px; line-height:21px; color:#ebfaff; font-weight:bold;'></div><div style='left:21px;top:68px; position:absolute;'><textarea name="ctl00$SPWebPartManager1$g_de6d61b1_21ee_4593_9dc3_1deb298db91c$twitContent" rows="2" cols="20" id="ctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c_twitContent" onkeydown="DisplayCharCount(this, 'CharCount');" onkeyup="DisplayCharCount(this, 'CharCount');" style="height:20px;width:566px;border:none;font:12px/14px Arial,Helvetica,Sans-Serif;color:#2db2df;overflow:hidden;overflow-y:hidden;overflow-x:hidden;resize:none;">#livingproof</textarea></div><div style='top:107px;left:531px; position:absolute; float:right;'><img id='ctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c_tweetbtn' onclick="window.open('http://twitter.com/home?status=' + encodeURIComponent($('#ctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c_twitContent').val()));return false;" src='/_layouts/images/GFO/twitter/tweet-btn.gif' /></a></div></div><div style='background-color:#e6e2dc;'><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>$('#ctl00_SPWebPartManager1_g_de6d61b1_21ee_4593_9dc3_1deb298db91c_tweetbtn').hover(function(){$(this).css('cursor', 'pointer').attr('src', '/_layouts/images/GFO/twitter/tweet-btn-mo.gif');}, function(){$(this).css('cursor', 'default').attr('src', '/_layouts/images/GFO/twitter/tweet-btn.gif');});new TWTR.Widget({version: 2, type: 'search', search: '#livingproof',interval: 6000, title: 'Tweet using #livingproof to join the conversation.',subject: '', width: 611, height: 300,theme: {shell: {background: '#e6e2dc', color: '#59452a'},tweets: {background: '#ffffff', color: '#392d1c',links: '#2db2df'}},features: {scrollbar: false, loop: true,live: true, hashtags: true,timestamp: true, avatars: true,toptweets: true, behavior: 'default'}}).render().start();</script></div></div>
				</div></div></td>
			</tr>
		</table><div class="ms-PartSpacingVertical"></div></td>
	</tr>

Open in new window

rascalAuthor Commented:
Thanks all, I guess it's time to dive into the API :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.