FaceBook Service Into UWP App Using UWP Community Toolkit

Introduction

This article is divided into three sections, the first two sections explain about the installation of the Facebook application and install the UWP service tool kit and final part explains integration into the application,

1. Install the UWP toolkit
2. Create Facebook Service
3. Integrate Facebook into main application

Install the UWP Toolkit

UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps.

More info available here.

For our application to implement face book integration ,there is no need to write the code from scratch, the UWP toolkit helper class is available, we just add the helper reference into our application.

Adding helper reference into our project.

Steps

1. Create a new project (ex: FacebookService)
2. right click -> Manage NuGet Packages
3. Search “Microsoft.Toolkit. Uwp”
4. Select the “Microsoft.Toolkit. Uwp. Services” & Install

UWP Tool kit has installed into our application.

Create Facebook Service

We have to create a Facebook Service App to interact with our application into Facebook, first we will see how to create Facebook Service

Note - Create Facebook Service -- first we need our application Windows store App Id, let us create a Windows store App Id

1. Create a new Universal Windows Program project (ex: Facebook Service).
2. Call FacebookService.Instance. WindowsStoreId, it generates the Windows Store Id.

Steps

1. Goto the site & Register,
   
   
   
   
2. Create a App Id,
   
   
   
   
3. Goto Settings -> Basic -> Add Platform -> Select the Windows App,
   
   
   
   
4. Enter the Windows Store SID which we have created in the Note section,
   
   
   
   
5. Add product & Login, select below option has enable or not, if not please enable it,
   
   
   
   

Facebook service application has been created.

Integrated Facebook service into main application

Add the namespace and initialize the service (same project which has created in the previous section)

1. using Microsoft.Toolkit.Uwp.Services.Facebook.
2. FacebookService.Instance.Initialize(FaceBookAddId).

To Initialize the Facebook service , Facebook App Id is required , this App Id is available in the Facebook service application which we have created in the previous section,



First time we Initialize the service (running the app) a Facebook login and password is required. Enter the login and password to connect the facebook service,



Below is the sample Code to Initialize fb Service and load the Tagged information

1. FacebookService.Instance.GetUserPictureInfoAsync(); get facebook profile picture
2. FacebookService.Instance.RequestAsync(FacebookDataConfig.MyTagged, 10); -> Facebook tagged information

FacebookDataConfig class is use to get the user Feed , Posts , Tagged information,

private void LoadFaceBookService() {
        FacebookService.Instance.WindowsStoreId;
        FacebookService.Instance.Initialize(FaceBookAddId);
        LoadFaceBookInfo();
    }
    .
public ObservableCollection < FaceBookInfo > Fbcollection = new ObservableCollection < FaceBookInfo > ();

private async void LoadFaceBookInfo() {
    if (!await FacebookService.Instance.LoginAsync()) {
        return;
    }

    var fbItem = await FacebookService.Instance.GetUserPictureInfoAsync();
    ImageSource imgSource = new BitmapImage(new Uri(fbItem.Url));
    Img.Source = imgSource;
    await LoadFbItems();

}

private async Task LoadFbItems() {
    var lstFbItems = await FacebookService.Instance.RequestAsync(FacebookDataConfig.MyTagged, 10);
    Fbcollection = new ObservableCollection < FaceBookInfo > ();

    foreach(var eachItem in lstFbItems) {
        var fbItem = new FaceBookInfo {
            TextInfo = eachItem.Message,
                CreateDate = eachItem.Created_Time.ToString(CultureInfo.InvariantCulture)
        };
        Fbcollection.Add(fbItem);
    }

    LstView.ItemsSource = Fbcollection;

}

Sample output



Post the Tag from our Application

FacebookService.Instance.PostToFeedWithDialogAsync -> This function is use to post the information in our facebook page via facebook dialog,

private async void BtnNewPost_OnClick(object sender, RoutedEventArgs e)
{
await FacebookService.Instance.PostToFeedWithDialogAsync("UWP Facebook Service", "PostToFeedWithDialog",
"http://www.c-sharpcorner.com/article/twitter-service-into-uwp-app-using-uwp-community-toolkit/");
}

Xaml code sample

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="25*" />
        <RowDefinition Height="75*" />
    </Grid.RowDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <StackPanel>
                <Image x:Name="Img" Stretch="Uniform" Width="100" Height="100"></Image>
                <Button x:Name="BtnNewPost" Content="New Post" Click="BtnNewPost_OnClick"></Button>
            </StackPanel>
        </StackPanel>
    </Grid>

    <ListView x:Name="LstView" Grid.Row="1" Margin="10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1">
                        <TextBlock Text="{Binding TextInfo}" />
                        <TextBlock Text="{Binding CreateDate}" Foreground="Blue" FontWeight="Bold" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    </Grid>

Our FacebookInfo define class

public class FaceBookInfo: INotifyPropertyChanged {
    public string TextInfo {
        get {
            return _textInfo;
        }
        set {
            _textInfo = value;
            OnPropertyChanged();
        }
    }

    private string _textInfo;

    public string ImgSource {
        get {
            return _imgSource;
        }
        set {
            _imgSource = value;
            OnPropertyChanged();
        }
    }

    private string _imgSource;

    private string _createDate;

    public string CreateDate {
        get {
            return _createDate;
        }
        set {
            createDate = value;
            OnPropertyChanged();
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
        PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Above code is just an example of how to integrate Facebook into our application. Hope you enjoy and understand it.