Question

Is there any extension or widget like the above image which i saw in http://www.news.yahoo.com for Facebook connectivity ? I want to include the same in my asp.net website too…

Functionality : 

Your Activity : Shows the News that has been read after logged in.

                It Posts in Face Book activities.

Social ON : To allow the script to post in FB

Social OFF : To not allow the script to post in FB

When i used Firebug to investigate what yahoo has used, i could see this…

<div id="mediasocialchromelogin" class="yom-mod yom-socialchrome-login">
<h4 class="login_title">You on Yahoo! News</h4>
<a class="img" role="button" href="#" id="yui_3_5_1_1_1339394442690_1094">
<img width="50" height="50" data="{"username":"George","userid":"131343507"}" src="https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v2/yo/r/UlIqmHJn-SK.gif">
<div class="fb_icon" data="{"username":"George","userid":"131343507"}"></div>
</a>
<div id="yui_3_5_1_1_1339394442690_851" class="txt">
<span class="user_name">George</span>
<div id="yui_3_5_1_1_1339394442690_950" class="desc">
<ul id="yui_3_5_1_1_1339394442690_750" class="func_bar">
</div>
</div>

Answer 1

Yahoo! have created this widget themselves; there’s no off-the-shelf way to get this functionality for your site. The good news is that it’s relatively easy to replicate the features as long as you have some knowledge of the Facebook APIs.

First up, to do the authentication, take a look at the client-side authentication flow, which will allow you to check the status of the user each time the page loads, and handle the changes appropriately. You can use the auth.statusChange event to display the correct UI based on whether the user is authenticated already or not.

Next, the ‘Social’ control. This essentially toggles the publishing of read actions from your app for the logged-in user. You can manage this client-side, by checking the value of the toggle control before doing an Open Graph read action post. Store the value in a cookie so it persists between pages. If you haven’t started publishing actions from your app, have a look at the Open Graph Tutorial, specifically around the ‘Publishing’ section.

Finally, for the ‘Your Activity’ control, there’s some more good news. You can use the ‘Activity Feed’ social plugin to get the activity of you and your friends on the site, without having to write it yourself. The look and feel of this plugin may not suit your needs, so you can use the Graph API to get the activity stories for your app. If you’re working through the tutorial linked above, you’ll come across the example for doing this.