In this part, we will be looking at how to add image based social networks to your application, how to add content from YouTube and how to collate data into a collection.

This tutorial has been split up into multiple parts to make it easier for you to jump in and out of sections without too much information being thrown at you at once. Choose from the selection below to get yourself started or if you’re new, stick around and you’ll be moved onto the next part at the end of each chapter:

  1. Part 1 – Creating a social menu and adding customizing a Facebook section
  2. Part 2 – Add more social media, YouTube videos and collection based data
  3. Part 3 – Adding RSS, custom HTML and Bing News

Connecting image based sites

Image based social networking sites are becoming increasingly popular and connecting them into your application will offer a great way to reach more people. We will first take a look at connecting Instagram in your social section.

Connecting Instagram

As App Studio is in a Beta form, you can’t connect your Instragram account directly using the platform. The current configuration for your section will use hashtags to get relevant pictures. The best way to aggregate your own content is to create a hashtag that is unique to you, such as your username, and pull in the content using that hashtag with App Studio.

Instagram Hashtag

Choose your Instagram hashtag

Like with configuring the Facebook section, we will go into the Edit Section page for Instagram to give this a different layout and feel to other social media pages as the main content from Instagram is a picture reel.

When editing the layout for Instagram, you want to be looking at the last 7 options which give more focus to the image than text. If you want to be displaying just the image, then the last 3 are your best options, while if you want to be showing the text provided with your Instagram picture, you’re going to be looking at the others.

Instagram Bindings

Choose a layout, icon, and don’t forget your bindings

Again, like Facebook, we are also going to edit the Details page for Instagram. The details page is shown when you click on an image in the scroll view to show you more details about the image and gives the user a way to share it with their social networks. Once you’ve made all the changes you’re wanting to make with your Instagram section, hit the Save button in the top right corner and make your way back to your app’s homepage by clicking the back button at the top of the page.

Getting videos from YouTube

For our YouTube videos, we’re going to add the section to the home page of the application so we can add some more content there. When you’re planning out the organization of your application, you need to make sure you know where you want all of your content to be and not have everything bundled into a menu collection.

YouTube videos come in three flavors; search, user or playlist. Search is a generic YouTube search and will pull back the videos that you would normally find when providing a search term on the website. User will pull back the latest videos from a specific user which is great if you’re using your own videos to promote in your app. Playlist will pull back videos from a pre-defined playlist either on your own YouTube account or from another which is good for providing aggregated content from multiple sources.

Choosing a YouTube option

Choosing a YouTube option

YouTube Preview

You should now see a YouTube preview

Again, like the earlier sections we have added, we can delve into the YouTube section and customize the way that it looks and shows the content it pulls by clicking Edit. When you’ve played with the layout and settings for the main view of the YouTube section, you may notice that the detail view is minimal in what can be changed unlike other sections. With the YouTube detail view, you can’t change the layout but it defaults to showing the video and having text underneath which is more than enough for details. You can however change the bindings for the text so you can display the Title, description or other information pulled for the video.

YouTube video detail view

Modifying the YouTube video detail view

Creating data collections based on models


Static and Dynamic collections

A collection within an app is a collection of data based on a model that you can customize and store either within the app or in the cloud. The collections are made up of columns, like a table, and your data is inserted in rows. To give context to collections, when you’re creating a Facebook section and you change the bindings of the data to the layout, the bindings are the columns of a data collection. This means that you can add custom data to your application based on whatever model you like. This can be a collection of dogs, planes, or cars you have for sale. If the App Studio doesn’t provide it, you can create it yourself.

When choosing which data configuration you would like, you can choose static and have the resources embedded within your app. This means that you cannot change the data without having to push the app out to the Store again, or you can choose dynamic which will store the information in the cloud meaning that you can edit the data and add more at any time without affecting the application. The application itself will just pull the new information down and display it for all of your users.

For this demo, I will show you how I would set up a collection of my projects that I have developed using a dynamic collection. So, the first thing you want to do is set up your data columns.

Custom collection

Designing a custom collection


Project Collection

Inserting data into your collection

Once you’re happy with your columns and you’ve added some new data to your collection, head back to configure the layout and bindings so that you’re happy with the way that your new collection of data looks. Don’t forget to save before heading back though otherwise you might lose your data. Again, like many of the sections, you can edit the main list view and the detail view for your new collection type. Make sure that when you’re creating the layout that you pick the best for the content you’re trying to display. If it is imagery, go for the image based layouts.

Now that you have new content in your application, we will look at RSS, Custom HTML and Bing Search next time before wrapping up with creating a theme, Live Tiles and publishing your application to your phone and Store!

Leave a comment