Friday, June 15, 2012

Getting started with the Facebook API

I'm developing a site that requires users to log in, but I've opted to only allow access from Facebook users for now.  I need the user to grant access for Facebook to give me access to their profile, and then I need to actually get their profile.  The Facebook API documentation is thorough, but still wouldn't work without a few experiments and changes, so I figured this might be useful for someone else.

The code will present a button for the user to Login to Facebook, which will request access from Facebook.  The user will get a window asking for permission.  This only occurs once per user, or if they're not logged into Facebook.

The code will then grab the user's Facebook profile details, such as their name.

Don't forget to change <MY APP ID> to the app id given to you by the Facebook Developer site when you create your app.

// Initialise the Facebook API - note that the API itself is loaded
        // further down in the code
        window.fbAsyncInit = function() {
            appId      : '<MY APP ID>',
            status     : true,
            cookie     : true,
            xfbml      : true,
            oauth      : true,
        // Subscribe to an event in the Facebook API - this event
        // will fire whenever a change in authorisation status occurs.
        // This will happen when the user's Facebook account is
        // connected (essentially, authorised), or if the access token
        // expires.
        FB.Event.subscribe('auth.statusChange', function(response) {
            if(response.status == "connected") {
                // Logging lots of stuff to the console - you won't need all of this
                // Facebook account connected successfully - can now do things
                // with the Facebook API. First we really need the access token.
                useraccesstoken = response.authResponse.accessToken;
                // I'm taking the userID but only because I'm keeping a record
                // of who's connected. You might not need this.
                fbuid = response.authResponse.userID;
                // Let's get the user's Facebook profile information, by passing
                // the useraccesstoken to prove that we have access.
                FB.api('/me?access_token=' + useraccesstoken, function(response) {
                    // Log the user's Facebook profile data object to the console,
                    // using the useraccesstoken taken from the auth.statusChange

            } else {
                // If status changes to anything other than "connected",
                // it's assumed the connection has been lost or there is
                // an error.
                console.log("Facebook login lost.");

        // Load the Facebook API
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); = id; js.async = true;
           js.src = "//";
<div id="fb-root"></div>
<div class="fb-login-button">Login with Facebook</div>

Friday, June 8, 2012

Why is Microsoft still using spacer img to pad out their elements?

I truly hope this practice ends by the time the next version of SharePoint is released...
<td class="ms-descriptiontext" height="10px" colspan="2">
<img width="1" height="10" alt="" src="/_layouts/images/blank.gif">

Thursday, June 7, 2012

Viewing all user alerts on a SharePoint site

I find the User Alerts page in SharePoint 2007 and 2010 (viewable at http://sitename/_layouts/sitesubs.aspx) absolutely horrible to work with.  I don't want to click through every single user to see what alerts they have.  I'm amazed that Microsoft have still yet to improve this.

In the meantime, there are other alternatives.  There is a paid software option by Bamboo Solutions which looks very nice (at  Or if you, like me, can't justify the cost of this application for the sake of getting this information once in a blue moon (and don't want to exploit the Free Trial), there is an SQL alternative, as detailed on the Just Geeks blog post here:  Might not be as pretty as Bamboo Alerts Administrator but was perfectly fine for what I needed.

Using left navigation on a SharePoint Web Part Page

Standard Web Part Pages in SharePoint 2010, by default, don't have the left navigation bar visible, for some reason.  Not sure why yet.  But I found this post quite helpful for putting the navigation bar back.

To automate the process a little, I added this line to my style sheet -

#s4-leftpanel { display:inherit; }

So all you need to do in SharePoint Designer is comment (or delete) the two content placeholders:

<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>

Friday, June 1, 2012

Navigation dropdowns in SharePoint 2010 using jQuery

I've been looking for a way to create dynamic top navigation dropdowns in SharePoint 2010.  I'd managed to create the dropdowns but only using fixed code, so if a subsite was created, the code would have to be changed too.

I found a few helpful resources online, but the best for me was  I've included my code below.

SharePoint 2010


$(document).ready(function() { 
 //Hide all submenus - this should probably be done in CSS
 $('.menu-horizontal ul ul').hide(); 
 //If a child is selected, I also want the parent to be selected
 $('.menu-horizontal ul ul li.selected').parent().parent().addClass('selected');
 //When the mouse hovers over a parent:
 $('.menu-horizontal ul li').hover(function() {
  //Show the first (and only) child ul, containing a li for each subsite
 }, function(){
  //Hide the child ul after the mouse has left


This is all very customised to my SharePoint 2010 environment - the above should work out of the box.