To adjust the Web screen to support the Facebook login process, you should make a minor change in the XAML code. Here, you add the WebBrowser control just before the closing Grid tag (after the last Border element):

<phone:WebBrowser Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
  Grid.ColumnSpan="2" Visibility="{Binding FbVisibility}"
  Source="{Binding FbUri}" Navigated="Fb_Navigated"
  x:Name="FbBrowser" />

The web browser will be used to present the Facebook login page. This control should be placed in both rows and both columns, which you set using the Grid.RowSpan and Grid.ColumnSpan properties. You also bind the Visibility and Source properties to suitable properties from the view model, as well as specify the control name (FbBrowser) and the method called when the web browser navigates to a new page (Fb_Navigated). By using the data binding mechanism in case of the Source property, you can easily change the currently presented website by modifying the value of the FbUri property in the view model.

The following part of code specifies the style of the WebBrowser control:

<phone:PhoneApplicationPage.Resources>
  <Style TargetType="phone:WebBrowser"> (...)
    <Setter Property="IsScriptEnabled" Value="True" /> (...)
  </Style>
</phone:PhoneApplicationPage.Resources>

The web browser should support scripts (IsScriptEnabled), have the white background (Background), and have a border with 2 pixels width in a suitable color (BorderThickness and BorderBrush). To place the control in a proper place on the screen, you use 10 pixels margin (Margin).

Some modifications are necessary in the code-behind file. First of all, let's modify the OnNavigatedTo method:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  base.OnNavigatedTo(e);
  this.FbBrowser.ClearCookiesAsync();
  this.m_viewModel.NavigationService = this.NavigationService;
  this.m_viewModel.OnNavigatedTo(e);
}

Here, you need to call the OnNavigatedTo method from the view model when the user navigates to the page. Furthermore, you clear cookies, thus, the current Facebook user session is terminated. By such an approach, whenever the user opens the Web screen from the main menu, the login process has to be repeated.

The Fb_Navigated method (from the view model) is called whenever the WebBrowser control navigates to some website:

private void Fb_Navigated(object sender, NavigationEventArgs e)
{
  this.m_viewModel.Fb_Navigated(e);
}

As you could see, the code-behind file contains only a very simple code, which calls suitable methods from the view model.

The last modifications are required in the view model class for the Web screen. They are related to the process of posting the message on the wall of the currently logged in user. At the beginning, you add a few constants:

private const string FB_APP_ID = "[ App ID ]";
private const string FB_PERMISSIONS = "publish_stream";
private const string FB_REDIRECT_URI = GameHelpers.PROJECT_WEBSITE;
private const string FB_RESPONSE_TYPE = "token";
private const string FB_DISPLAY = "touch";

The first constant (FB_APP_ID) stores the App ID property of your Facebook application. The second (FB_PERMISSIONS) represents required permissions. In your example, you need only publish_stream, which indicates that the application can publish something at the wall. The following three constants store other values useful while preparing the address of the login website.

Next, you add a new field that is an instance of the FacebookClient class from the Facebook namespace:

private FacebookClient m_fbClient = new FacebookClient();

The FacebookClient class makes it possible to perform various operations on the Facebook API, and is provided by the Facebook C# SDK.

As you remember, the view requires the FbVisibility and FbUri properties from the view model. The first one indicates whether the WebBrowser control is currently visible, while the other stores an address of the active website:

private Visibility m_fbVisibility = Visibility.Collapsed;
public Visibility FbVisibility { (...) }
private Uri m_fbUri = null;
public Uri FbUri { (...) }

In the constructor, you specify what method is called when the message is posted at the wall or any error (related to this operation) occurs:

public WebViewModel()
{ (...)
  this.m_fbClient.PostCompleted += this.Fb_PostCompleted;
}

You also need to ensure that the WebBrowser control is hidden after opening the Web screen. To do so, you assign a suitable value to the FbVisibility property in the OnNavigatedTo method:

public void OnNavigatedTo(NavigationEventArgs e)
{
  this.FbVisibility = Visibility.Collapsed;
}

The PublishAtWall method is called after clicking on the button in the user interface. It starts a process of posting the message on the Facebook wall:

private void PublishAtWall()
{
  if (this.m_fbClient.AccessToken == null)
  {
    var par = new Dictionary<string, object>();
    par["client_id"] = FB_APP_ID;
    par["redirect_uri"] = FB_REDIRECT_URI;
    par["response_type"] = FB_RESPONSE_TYPE;
    par["display"] = FB_DISPLAY;
    par["scope"] = FB_PERMISSIONS;
    this.FbUri = this.m_fbClient.GetLoginUrl(par);
    this.FbVisibility = Visibility.Visible;
  }
  else { this.Fb_PostMessage(); }
}

First of all, you check if the token is unavailable. In such a case, you specify parameters used to generate an address of the website for log in. You set, for example, client_id (the App ID), response_type (returning a token), as well as the scope property (additional permissions required by your application). The address is generated by the GetLoginUrl method. At the end, you set values of the FbUri and FbVisibility properties. Then, the WebBrowser control will be visible and presents the suitable Facebook login page.

If the user has been already logged in, you can directly call the Fb_PostMessage method. It is responsible for sending a suitable request to the Facebook API to post the message at the wall of the currently logged in Facebook user.

When the web browser navigates to a new page (for example, with the Facebook login form), the Fb_Navigated method is called:

public void Fb_Navigated(NavigationEventArgs e)
{
  FacebookOAuthResult authResult;
  if (this.m_fbClient.TryParseOAuthCallbackUrl(e.Uri,
    out authResult))
  {
    this.FbVisibility = Visibility.Collapsed;
    if (authResult.IsSuccess)
    {
      this.m_fbClient.AccessToken = authResult.AccessToken;
      this.Fb_PostMessage();
    }
  }
}

Here, you try to obtain the authorization result, which is represented by the FacebookOAuthResult instance. If it is obtained correctly, you hide the WebBrowser control (by setting the FbVisibility to Collapsed) and store the token. Now, you can post the message by calling the Fb_PostMessage method, whose code is as follows:

private void Fb_PostMessage()
{
  var par = new Dictionary<string, object>();
  par["message"] = AppResources.WebFbPost;
  this.m_fbClient.PostTaskAsync("me/feed", par);
}

The Fb_PostMessage method makes it possible to asynchronously send a request to post the specific message at the wall. To set the content, you specify a value for the item with the message key in the parameters dictionary. Then, such settings are passed, together with an information where the message should be posted (a wall of the currently logged in user), to the PostTaskAsync method.

The last required method is the Fb_PostCompleted:

private void Fb_PostCompleted(object sender,
  FacebookApiEventArgs e)
{
  Deployment.Current.Dispatcher.BeginInvoke(() =>
  {
    MessageBox.Show(
      e.Error != null ? AppResources.WebFbMessageFailure :
      AppResources.WebFbMessageSuccess,
      AppResources.WebFbMessageTitle, MessageBoxButton.OK);
  });
}

It is called when the operation of posting the message is finished, either successfully or unsuccessfully. This method is executed not from the UI thread, thus you need to use the Dispatcher object. Here, you present an information about the process status in the form of the message box. By using the Show method with three parameters, you can specify not only a text, but also a title and buttons that will be shown below.

You have finished the view model implementation related to the feature which posts a message at the wall of the currently logged in Facebook user. To improve a readability of the code, you can use the #region and #endregion preprocessor directives. They make it possible to extract a part of the code in the form that can be collapsed and expanded in the IDE. To do so, you should place the #region directive (with a suitable comment) before the first line of the code part, and the #endregion, after the last line, as follows:

#region Facebook support
(...)
#endregion

The IDE can then collapse and expand the code, as well as present a content preview if the mouse is over the collapsed part, as shown in the following screenshot: