Blog

Posts categorised by: "Social API's & Integration"

Get Facebook Comments For A Page Using Graph API In ASP.NET

For a site I'm working on, the Facebook's Comments plugin is being utilised on all our article pages. There was a requirement to pull in the latest comments in a listing page for each of these article pages as well as number of comments. Facebook's JavaScript library provides the ability to display a comments counter but not the ability to pull out x number of comments. So we'll have to go server-side and use Graph API to get the data we want.

In this post, I will show you how you can get back all comments for a page by it's full URL.

Prerequisites

Before we get into the main C# logic methods, you need to make sure we have a few things in place:

  • ApiWebRequestHelper Class
  • Newtonsoft Json
  • Facebook App Settings
  • Class Objects

ApiWebRequestHelper Class

Whenever I am making a call to Facebook's Graph API endpoints, I will be making references to a "ApiWebRequestHelper" helper class. This is something I developed last month to make it easier for me to deserialize XML or JSON requests to a strongly-typed class object. You can take a look at the full code here.

Newtonsoft Json

The Newtonsoft Json library is a key ingredient to any JSON web requests. I'd be surprised if you've never heard or used it. :-) Nevertheless, you can get it here: http://www.newtonsoft.com/json.

Facebook App Settings

I haven't created a Facebook App for quite some time and things have changed very slightly in terms of the interface and options presented. The key things you need to get out of your created App is:

  • Application ID
  • Application Secret
  • Client Token

I set the security settings with the following modes, which can be found in Settings > Advanced >  Security.

Facebook App Advanced API Settings

Class Objects

The following class objects will be used to deserialize Graph API requests into class objects.

The FacebookPageInfo, FacebookPage and FacebookPageShare objects will get the core information about the queried page, such as the Title and Description, as well as the comments and share counts.

namespace Site.BusinessObjects.Facebook
{
    public class FacebookPageInfo
    {
        [JsonProperty("id")]
        public string Id { get; set; }

        [JsonProperty("og_object")]
        public FacebookPage Page { get; set; }

        [JsonProperty("share")]
        public FacebookPageShare Share { get; set; }
    }

    public class FacebookPage
    {
        [JsonProperty("id")]
        public string Id { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        [JsonProperty("title")]
        public string Title { get; set; }

        [JsonProperty("type")]
        public string Type { get; set; }

        [JsonProperty("updated_time")]
        public DateTime UpdatedTime { get; set; }

        [JsonProperty("url")]
        public string Url { get; set; }
    }
}
namespace Site.BusinessObjects.Facebook
{
    public class FacebookPageShare
    {
        [JsonProperty("comment_count")]
        public int CommentCount { get; set; }

        [JsonProperty("share_count")]
        public int ShareCount { get; set; }
    }
}

All comments for a page will be stored in the following objects:

namespace Site.BusinessObjects.Facebook
{
    public class FacebookPageCommentInfo
    {
        public int TotalComments { get; set; }
        public List<FacebookCommentItem> Comments { get; set; }
    }
}
namespace Site.BusinessObjects.Facebook
{
    public class FacebookCommentItem
    {
        [JsonProperty("id")]
        public string Id { get; set; }

        [JsonProperty("created_time")]
        public DateTime CreatedTime { get; set; }

        [JsonProperty("from")]
        public FacebookCommentFrom From { get; set; }

        [JsonProperty("message")]
        public string Message { get; set; }
    }

    public class FacebookCommentFrom
    {
        [JsonProperty("id")]
        public string Id { get; set; }

        [JsonProperty("name")]
        public string Name { get; set; }
    }
}

Facebook Logic Class

Now that we have the pre-requisites in place, lets get to the code that will perform the required functions:

namespace Site.BusinessLogic
{
    public class FacebookLogic
    {
        private string _accessToken;

        /// <summary>
        /// Uses default Client ID and Secret as set in the web.config.
        /// </summary>
        public FacebookLogic()
        {
            GetAccessToken(Config.Facebook.ClientId, Config.Facebook.ClientSecret);
        }

        /// <summary>
        /// Requires  Client ID and Secret.
        /// </summary>
        /// <param name="clientId"></param>
        /// <param name="clientSecret"></param>
        public FacebookLogic(string clientId, string clientSecret)
        {
            GetAccessToken(clientId, clientSecret);
        }

        /// <summary>
        /// Gets page info that has been shared to Facebook.
        /// </summary>
        /// <param name="pageUrl"></param>
        /// <returns></returns>
        public FacebookPageInfo GetPage(string pageUrl)
        {
            return ApiWebRequestHelper.GetJsonRequest<FacebookPageInfo>($"https://graph.facebook.com/{pageUrl}?access_token={_accessToken}");
        }

        /// <summary>
        /// Gets comments for a page based on its absolute URL.
        /// </summary>
        /// <param name="pageUrl"></param>
        /// <param name="maxComments"></param>
        public FacebookPageCommentInfo GetPageComments(string pageUrl, int maxComments)
        {
            try
            {
                // Get page information in order to retrieve page ID to pass to commenting.
                FacebookPageInfo facebookPage = GetPage(pageUrl);

                if (facebookPage.Page != null)
                {
                    return new FacebookPageCommentInfo
                    {
                        TotalComments = facebookPage.Share.CommentCount,
                        Comments = GetCommentsByPageId(facebookPage.Page.Id, maxComments).Comments
                    };
                }
                else
                {
                    return null;
                }
            }
            catch (Exception ex)
            {
                // NOTE: Log exception here...

                return null;
            }
        }

        /// <summary>
        /// Gets comments by Facebook's Page ID.
        /// </summary>
        /// <param name="fbPageId"></param>
        /// <param name="max"></param>
        /// <returns></returns>
        public FacebookCommentInfo GetCommentsByPageId(string fbPageId, int max = 10)
        {
            return ApiWebRequestHelper.GetJsonRequest<FacebookCommentInfo>($"https://graph.facebook.com/comments?id={fbPageId}&access_token={_accessToken}&limit={max}");
        }

        /// <summary>
        /// Retrieves Access Token from Facebook App.
        /// </summary>
        /// <param name="clientId"></param>
        /// <param name="clientSecret"></param>
        private void GetAccessToken(string clientId, string clientSecret)
        {
            UriBuilder builder = new UriBuilder($"https://graph.facebook.com/oauth/access_token?client_id={Config.Facebook.ClientId}&client_secret={Config.Facebook.ClientSecret}&grant_type=client_credentials");

            try
            {
                using (WebClient client = new WebClient())
                {
                    // Get Access Token from incoming response.
                    string data = client.DownloadString(builder.Uri);

                    NameValueCollection parsedQueryString = HttpUtility.ParseQueryString(data);

                    _accessToken = parsedQueryString["access_token"];
                }
            }
            catch (Exception ex)
            {
                // NOTE: Log exception here...
            }
        }
    }
}

By default, on initiation of the FacebookLogic class, the Application ID and Secret values will be inherited from the web.config, or you can pass in these values directly with the class overload parameters.

Out of all the methods used here, we're interested in only using one: GetPageComments(). What you will notice from this method is that we cannot get the comments from one API call alone. We first have to make an extra API call to get the ID of the page. This ID is passed to the GetCommentsByPageId() method, to return all comments.

Usage

Comments for a page can be returned by adding the following in your code, where you will then be able to access properties to iterate through the comments:

FacebookLogic fbl = new FacebookLogic();

// Pass in the page URL and number of comments to be returned.
var pageComments = fbl.GetPageComments("https://www.surinderbhomra.com/", 2);

Whenever you call this piece of code, I would make sure you cache the results for 5 - 10 minutes, so you do not use up your API request limits.

Resize An Instagram Image Using A Media Query Parameter

This is something I have been meaning to post for quite some time, ever since I first started working on integrating Instagram's API in web applications from 2013. - The ability to resize an image from Instagram without having to deal with registering for an API key and worrying about request limits.

This approach is ideal if you have no requirement to get further information about an image, such as description, comments, likes etc.

Believe it or not, Instagram contains quite a neat (somewhat hidden) feature that gives you the ability to output three different sized images directly into a webpage, by constructing the path to an image as so: https://www.instagram.com/p/<image-id>/media/?size=<size-parameter>.

The supported "size parameters" are:

  • t - for thumbnail (150px x 150px)
  • m - for medium (306px x 306px)
  • l - for large (640px x 640px) 

The great thing about using the media parameter is that the requested image size is served up immediately. For example, we could embed an Instagram image directly into our HTML markup as so:

<p style="text-align: center;">
  <img alt="Mr. Brown - The Office Dog" src="https://www.instagram.com/p/uz_8x2qW6E/media/?size=m">
</p>

Which will render the following output:

Mr. Brown - The Office Dog

In this case, this is a picture of Mr. Brown (the office dog) from my Instagram profile in medium size.

Detecting Facebook In-App Browser

It seems there is going to be a growing trend where apps on our mobile devices will open webpages whilst you are inside the app itself instead of using the devices' native browser. A prime example of this is Facebook. In recent updates during the tail end of last year, both their iOS and Android offerings open webpages from within the application.

This isn't a bad thing. In fact I quite like having webpages opening within the application, since this creates a nice seamless experience. However, the Facebook in-app browser doesn't seem to render a webpage in the same manner as the devices' own native browser (Safari/Chrome). I started noticing this whilst working on a complex website that was very much custom JavaScript driven.

The only thing I could do is modify specific mark-up or features that affected my website negatively when opened from within Facebook by detecting the user-agent. In my code (using ASP.NET C#), I was required to carry out additional browser checks:

//User is within Facebook browser.
if (Request.UserAgent.IndexOf("FBAN") > -1)
{
    if (Request.UserAgent.Contains("iPhone OS 8_0_2"))
    {
        //You are using iPhone version 8.0.2.
    }
    
    if (Request.UserAgent.Contains("Chrome"))
    {
        //You are in the Facebook App in Android.
    }
}
else
{
    //You are not in Facebook App.
}

You can modify the code above to create a nice self-contained method to return an enumeration as I ended up doing to be used when required.

Instagram API: Get Access Token In ASP.NET

I've written some code that outputs images using Instagram's Developer API. The code can either output images based on a user's profile or via search term.

As you may already know, in order to get any form of information from any external API an access token is required. Before we dive into some code, the first thing that we need to do is register ourselves as an Instagram Developer by going to: http://instagram.com/developer/.

Next, we need to register a new client specifically for our intended use. In my case, all I want to do is to get all image information from my own Instagram profile.

Instagram API - Register New Client

Here, you will be supplied with Client ID and Client Secret codes. But most importantly, you will need to set an OAuth Redirect URL (or Callback URL) for user's to authenticate your application.

The strange thing I've noticed about the Instagram API is that a callback page is a compulsory requirement. Even if you are planning on carrying out something as simple as listing some images from your own profile where a public users intervention is not required.

I'm not interested in their images, I'm interested in my own. I hope Instagram changes this soon. If Twitter can allow you to retrieve tweets by simply registering your application, why can't Instagram?

From what I've read on Instagram's Google Group's is that an access token needs to only be generated once and they don't expire. But of course Instagram have stated:

"These tokens are unique to a user and should be stored securely. Access tokens may expire at any time in the future."

Just make sure you have some fail safe's in your code that carries out the re-authentication process within your application on the event access token has expired. In my own implementation, I've kept the callback page secret and new access token requests can be made within an Administration interface.

So lets get to the code.

Step 1: Authentication Request Classes

These strongly-typed classes mirror the exact structure of the JSON returned from our authentication request. Even though we only require the "access_token" property, I've added additional information, such as details on the Instagram user making the request.

public class AuthToken
{
    [JsonProperty("access_token")]
    public string AccessToken { get; set; }

    [JsonProperty("user")]
    public InstagramUser User { get; set; }
}
public class InstagramUser
{
    [JsonProperty("id")]
    public string ID { get; set; }

    [JsonProperty("username")]
    public string Username { get; set; }

    [JsonProperty("full_name")]
    public string FullName { get; set; }

    [JsonProperty("profile_picture")]
    public string ProfilePicture { get; set; }
}

It's worth noting at this point that I'm using Newtonsoft.Json framework.

Step 2: Callback Page

protected void Page_Load(object sender, EventArgs e)
{
    if (!String.IsNullOrEmpty(Request["code"]) && !Page.IsPostBack)
    {
        try
        {
            string code = Request["code"].ToString();

            NameValueCollection parameters = new NameValueCollection();
            parameters.Add("client_id", ConfigurationManager.AppSettings["instagram.clientid"].ToString());
            parameters.Add("client_secret", ConfigurationManager.AppSettings["instagram.clientsecret"].ToString());
            parameters.Add("grant_type", "authorization_code");
            parameters.Add("redirect_uri", ConfigurationManager.AppSettings["instagram.redirecturi"].ToString());
            parameters.Add("code", code);

            WebClient client = new WebClient();
            var result = client.UploadValues("https://api.instagram.com/oauth/access_token", "POST", parameters);

            var response = System.Text.Encoding.Default.GetString(result);

            var jsResult = JsonConvert.DeserializeObject(response);

            //Store Access token in database
            InstagramAPI.StoreAccessToken(jsResult.AccessToken);

            Response.Redirect("/CallbackSummary.aspx?status=success", false);
        }
        catch (Exception ex)
        {  
            EventLogProvider.LogException("Instagram - Generate Authentication Key", "INSTAGRAM", ex);

            Response.Redirect("/CallbackSummary.aspx?status=error");
        }
    }
}

As you can see, I'm redirecting the user to a "CallbackSummary" page to show if the authentication request was either a success or failure. (Remember, the page is secured within my own Administration interface.)

If the request is successful, the access token is stored.

Step 3: Request Callback Page

The last piece of the puzzle is to actually request our callback page by authorizing ourselves via Instagram API. In this case, I just have a simple page with the following mark up:

<p>If Instagram fails to output images to the page, this maybe because a new Authorisation key needs to be generated.</p>
<p>To generate a new key, press the button below and follow the required steps.</p>
<a onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=<%=ConfigurationManager.AppSettings["instagram.clientid"].ToString() %>&redirect_uri=<%=ConfigurationManager.AppSettings["instagram.redirecturi"].ToString() %>&response_type=code', 'newwindow', config='height=476,width=641,toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no,directories=no, status=no'); return false;" href="#" target="_parent">Generate</a>

If all goes to plan, you should have successfully recieved the access token.

I will post more Instagram code in future posts.

Twitter OAuth Authentication Without Third Party Libraries

Ever since Twitter ditched version 1 of their API to version 1.1, an additional hurdle created when attempting to get any data from Twitter. Authentication (using OAuth) is now required on all API request endpoints. I can see why Twitter decided to go down this route but it does add a little headache when carrying out the most simplest requests.

In all the sites I have worked on, I've always relied on third party libraries to help me interact with Twitter, such as Twitterizer (no v1.1 support) and TweetSharp. But due to the increased complexity on some of the sites I've been working on, third party libraries don't seem to cut the mustard any more. A more scalable solution is required...

I came across a really simple and expandable class library called OAuthTwitterWrapper that stemmed from a StackOverflow question I found. Out-of-the-box, this library contains calls required to retrieve a user's timeline and return searches which is great to get you up and running quickly.

The OAuthTwitterWrapper provided me a really good basis to add further Twitter features, for example a list of users favourite tweets.

If you don't plan on doing anything too complex when interacting with the Twitter API, third party libraries such as TweetSharp will meet your everyday needs. However, if you want more control over how you make requests, the OAuthTwitterWrapper provides a good foundation.

Create A Custom YouTube Form Control In Kentico

It seems that I have a tendency to blog more about YouTube then any other Social API on this site. So here we go again... This time I want to show how to easily integrate a YouTube CMS Form Control within a Custom Table or Document Type within Kentico.

As far as I'm aware, Kentico only allows you to insert YouTube markup into their HTML Editable Regions via the CKEditor. But what if you wanted to take things a step further and have the ability to return a video Title, Description and Thumbnail within the comfort of the Form tab?

YouTube Custom CMS Form Control

As you can see from my custom form control, a user would paste the URL of a YouTube video and press the "Lookup Video" button that will return basic information about that video, ready for the user to carry out any further copy changes they require.

So let's get to it.

Step 1: Create A New User Control

I have created a user control in "/CMSFormControls/Surinder/" of my Kentico installation. I have named the user control: YouTubeLookup.ascx.

HTML

<table>
	<tbody>
		<tr>
			<td class="TextColumn">
				<label for="<%=YouTubeUrl.ClientID >">URL:</label> <asp:textbox id="YouTubeUrl" runat="server"></asp:textbox> <asp:button cssclass="ContentButton" id="LookupVideoDetail" onclick="LookupVideoDetail_Click" runat="server" text="Lookup Video"> </asp:button></td>
		</tr>
		<tr>
			<td class="TextColumn">
				<label for="<%=YouTubeTitle.ClientID >">Title:</label> <asp:textbox id="YouTubeTitle" runat="server" width="500"></asp:textbox></td>
		</tr>
		<tr>
			<td class="TextColumn">
				<label for="<%=YouTubeDescription.ClientID >">Description:</label> <asp:textbox height="100" id="YouTubeDescription" runat="server" textmode="MultiLine" width="500"></asp:textbox></td>
		</tr>
		<tr>
			<td class="TextColumn">
				<asp:image id="YouTubeThumbnail" runat="server"></asp:image></td>
		</tr>
	</tbody>
</table>

Code-behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CMS.FormControls;
using CMS.GlobalHelper;
using System.Web.Script.Serialization;

public partial class CMSFormControls_Surinder_YouTubeLookup : FormEngineUserControl
{
    private string _jsonValue;

    public override Object Value
    {
        get
        {
            return GetJsonMarkup();
        }
        set
        {
            _jsonValue = System.Convert.ToString(value);
        }
    }

    private string GetJsonMarkup()
    {
        //Pass all user entered form values to the YouTubeDetail class for serialization in the JavaScriptSerializer
        if (!String.IsNullOrEmpty(YouTubeUrl.Text))
        {
            YouTubeDetail yt = new YouTubeDetail();
            yt.ID = YouTubeHelper.GetVideoID(YouTubeUrl.Text);
            yt.Title = YouTubeTitle.Text;
            yt.Description = YouTubeDescription.Text;
            yt.Url = YouTubeUrl.Text;
            yt.ImageUrl = YouTubeThumbnail.ImageUrl;

            JavaScriptSerializer jsSerialize = new JavaScriptSerializer();

            return jsSerialize.Serialize(yt);
        }
        else
        {
            return String.Empty;
        }
    }

    public override bool IsValid()
    {
        JavaScriptSerializer jsSerialize = new JavaScriptSerializer();
        var jsResult = jsSerialize.Deserialize<YoutubeDetail>(_jsonValue);

        if (jsResult != null && !String.IsNullOrEmpty(jsResult.ToString()))
        {
            if (String.IsNullOrEmpty(jsResult.Url))
                return false;
            else
                return true;
        }
        else
        {
            return true;
        }
    }

    protected void EnsureItems()
    {
        PopulateControls();
    }

    private void PopulateControls()
    {
        JavaScriptSerializer jsSerialize = new JavaScriptSerializer();
        var jsResult = jsSerialize.Deserialize<YoutubeDetail>(_jsonValue);

        //Check there if JSON is present to populate form controls
        if (jsResult != null && !String.IsNullOrEmpty(jsResult.ToString()))
        {
            if (!String.IsNullOrEmpty(jsResult.Url))
                YouTubeUrl.Text = jsResult.Url;

            if (!String.IsNullOrEmpty(jsResult.Title))
                YouTubeTitle.Text = jsResult.Title;

            if (!String.IsNullOrEmpty(jsResult.Description))
                YouTubeDescription.Text = jsResult.Description;

            if (!String.IsNullOrEmpty(jsResult.ImageUrl))
                YouTubeThumbnail.ImageUrl = jsResult.ImageUrl;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            EnsureItems();
    }

    protected void LookupVideoDetail_Click(object sender, EventArgs e)
    {
        //If YouTube URL is present, get the information
        if (!String.IsNullOrEmpty(YouTubeUrl.Text))
        {
            YouTubeDetail yt = YouTubeHelper.GetVideoInformation(YouTubeUrl.Text);

            if (yt != null)
            {
                YouTubeTitle.Text = yt.Title;
                YouTubeDescription.Text = yt.Description;
                YouTubeThumbnail.ImageUrl = yt.ImageUrl;
            }
        }
    }
}

From looking at my code, you've probably noticed I'm actively using a "JavaScriptSerializer" to pass all my form values as JSON. I find this is the most straight-forward way to store multiple form values in a custom control. In this case, our values will be stored within a Kentico table column in the following format:

{
    "ID":"fLyoog562x4",
    "Title":"How The Dark Knight Rises Should Have Ended",
    "Description":"Check out HISHE\u0027s spin on the epic conclusion to The Dark Knight Trilogy: How The Dark Knight Rises Should Have Ended.",
    "Url":"http://www.youtube.com/watch?v=fLyoog562x4",
    "ImageUrl":"http://i1.ytimg.com/vi/fLyoog562x4/hqdefault.jpg"
}

Whenever I need to get those values back, all I need to do is call the JavaScriptSerializer.Deserialize method.

NOTE: If what I have shown doesn't make any sense, it'll be useful to take a look at an in-depth tutorial on how to create a Custom Form Control in Kentico: http://devnet.kentico.com/docs/devguide/index.html?developing_form_controls.htm

Step 2: Create YouTubeDetail Class

In order to serialize and deserialize values when using the JavaScriptSerializer, we need to create a class object with a number of properties to interpret the JSON structure.

public class YouTubeDetail
{
    public string ID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string Url { get; set; }
    public string ImageUrl { get; set; }
}

Step 3: YouTube Methods

This is the part when we start using Google's YouTube API and in order for this class to work, you will need to download the necessary DLL's. I suggest you take a gander at a post I wrote a while back called "Dynamically Output A List of YouTube Videos In ASP.NET" to get an in-depth introduction into using the YouTube API.

To get data back from YouTube you will need as a minimum requirement the DLL's and register your application in order to pass an Application Name, Developer Key and Client ID values to your application.

public class YouTubeHelper
{
    private static string YouTubeDeveloperKey = WebConfigurationManager.AppSettings["YouTubeDeveloperKey"].ToString();
    private static string YouTubeAppName = WebConfigurationManager.AppSettings["YouTubeAppName"].ToString();
    private static string YouTubeClientID = WebConfigurationManager.AppSettings["YouTubeClientID"].ToString();
 
    //Get YouTube video
    public static Video YouTubeVideoEntry(string videoID)
    {
        YouTubeRequestSettings settings = new YouTubeRequestSettings(YouTubeAppName, YouTubeClientID, YouTubeDeveloperKey);
        YouTubeRequest request = new YouTubeRequest(settings);
 
        //Link to the feed we wish to read from
        string feedUrl = String.Format("http://gdata.youtube.com/feeds/api/videos/{0}", videoID);
 
        Feed<Video> videoFeed = request.Get<Video>(new Uri(feedUrl));
 
        return videoFeed.Entries.SingleOrDefault();
    }
 
    //Extract the YouTube ID from the web address.
    public static string GetVideoID(string videoUrl)
    {
        Uri tempUri = new Uri(videoUrl);
 
        string sQuery = tempUri.Query;
 
        return System.Web.HttpUtility.ParseQueryString(sQuery).Get("v");
    }
 
    //Get required YouTube video information
    public static YouTubeDetail GetVideoInformation(string url)
    {
        Video v = YouTubeVideoEntry(GetVideoID(url));
 
        //Pass required YouTube information to custom class called YouTubeDetail
        YouTubeDetail vDetail = new YouTubeDetail();
        vDetail.ID = v.VideoId;
        vDetail.Title = v.Title;
        vDetail.Description = v.Description;
        vDetail.ImageUrl = v.Thumbnails[2].Url;

        return vDetail;
    }

    //Output YouTube property within a document by passing the Document ID
    public static YouTubeDetail GetDocumentYouTubeValue(int docID)
    {
        TreeProvider tree = new TreeProvider();
        TreeNode tn = tree.SelectSingleDocument(docID);

        if (tn.GetValue("YouTube") != null && !String.IsNullOrEmpty(tn.GetValue("YouTube").ToString()))
        {
            JavaScriptSerializer jsSerialize = new JavaScriptSerializer();
            var jsResult = jsSerialize.Deserialize<YouTubeDetail>(tn.GetValue("YouTube").ToString());

            if (jsResult != null && !String.IsNullOrEmpty(jsResult.ToString()))
            {
                return jsResult;
            }
            else
            {
                return null;
            }
        }
        else
        {
            return null;
        }
    }
}

Step 4: Add New Control Into Kentico

Please refer to the Kentico Development Guide (as referenced in Step 1). The main thing you need to ensure is that the control can only be used as a "Long text" type.

YouTube Kentico Control Settings

Step 5: Outputting The YouTube Values To A Page

Since we have stored all our YouTube fields in a JSON string, we can get those values out by carrying out a deserialization on our document type property.

if (CMSContext.CurrentDocument.GetStringValue("YouTubeVideo", String.Empty) != String.Empty)
{
    JavaScriptSerializer jsSerialize = new JavaScriptSerializer();
    YouTubeDetail yt = jsSerialize.Deserialize<YouTubeDetail>(CMSContext.CurrentDocument.GetStringValue("YouTubeVideo", String.Empty));

    YouTubeTitle.Text = yt.Title;
    YouTubeDescription.Text = yt.Description;
    YouTubeUrl.Text = yt.Url;
}

You may think I have slightly over-engineered the process to store YouTube video's. But if you have a website that is trying to push video content along with its META data, I believe this is the way to go.

Beginner’s Guide To Using Google Plus .NET API Part 2: User Posts

Ok I’ll admit Part 2 to my “Beginner’s Guide To Using Google Plus .NET API” has been on the back-burner for some time (or maybe it’s because I completely forgot). After getting quite a few email recently on the subject, I thought now would be the best time to continue with Part 2.

It’s recommended you take a gander at Part 1 before proceeding to this post.

As the title suggests, I will be showing how to output user’s publicly view posts. The final output of what my code will produce can be seen on my homepage under the “Google+ Posts” section.

Create Class Object

We will create a class called “GooglePlusPost" to allow us to easily store each item of post data within a Generic List.

public class GooglePlusPost
{
    public string Title { get; set; }
    public string Text { get; set; }
    public string PostType { get; set; }
    public string Url { get; set; }
}

 

Let’s Get The Posts!

I have created a method called “GetPosts” that accepts a parameter to select the number of posts of your choice.

public class GooglePlus
{
    private static string ProfileID = ConfigurationManager.AppSettings["googleplus.profileid"].ToString();
    
    public static List<GooglePlusPost> GetPosts(int max)
    {
        try
        {
            var service = new PlusService();
            service.Key = GoogleKey;
            var profile = service.People.Get(ProfileID).Fetch();

            var posts = service.Activities.List(ProfileID, ActivitiesResource.Collection.Public);
            posts.MaxResults = max;

            List<GooglePlusPost> postList = new List<GooglePlusPost>();

            foreach (Activity a in posts.Fetch().Items)
            {
                GooglePlusPost gp = new GooglePlusPost();

                //If the post contains your own text, use this otherwise look for
                //text contained in the post attachment.
                if (!String.IsNullOrEmpty(a.Title))
                {
                    gp.Title = a.Title;
                }
                else
                {
                    //Check if post contains an attachment
                    if (a.Object.Attachments != null)
                    {
                        gp.Title = a.Object.Attachments[0].DisplayName;
                    }
                }

                gp.PostType = a.Object.ObjectType; //Type of post
                gp.Text = a.Verb;
                gp.Url = a.Url; //Post URL

                postList.Add(gp);
            }

            return postList;
        }
        catch
        {
            return new List<GooglePlusPost>();
        }
    }
}

By default, I have ensured that my own post comment takes precedence over the contents of the attachment (see lines 24-35). If I decided to just share an attachment without a comment, the display text from the attachment will be used instead.

There are quite a few facets of information an attachment contains and this only becomes apparent when you add a breakpoint and debug line 33. For example, if the attachment had an object of type “video”, you will get a wealth of information to embed a YouTube video along with its thumbnails and description.

Attachment Debug View

So there is room to make your Google+ feed much more intelligent. You just have to make sure you cater for every event to ensure your feed displays something useful without breaking. I’m in the process myself of displaying redoing my own Google+ feed to allow full access to content directly from my site.

Recommendation

It is recommended that you cache your collection of posts so you are not making constantly making request to Google+. You don’t want to exceed your daily request limit now do you.

I’ve set my cache duration to refresh every three hours.

.NET Library To Retrieve Twitpic Images

I’ve been working on a .NET library to retrieve all images from a users Twitpic account. I thought it would be quite a useful .NET library to have since there have been some users requesting one (including me) on some websites and forums.

I will note that this is NOT a completely functioning Twitpic library that makes use of all API requests that have been listed on Twitpic’s developer site. Currently, the library only contains core integration on returning information of a specified user (users/show), enough to create a nice picture gallery.

My Twitpic .NET library will return the following information:

  • ID
  • Twitter ID
  • Location
  • Website
  • Biography
  • Avatar URL
  • Image Timestamp
  • Photo Count
  • Images

Code Example:

private void PopulateGallery()
{
    var hasMoreRecords = false;

    //Twitpic.Get(<username>, <page-number>)
    TwitpicUser tu = Twitpic.Get("sbhomra", 1);

    if (tu != null)
    {
        if (tu.PhotoCount > 20)
            hasMoreRecords = true;

        if (tu.Images != null && tu.Images.Count > 0)
        {
            //Bind Images to Repeater
            TwitPicImages.DataSource = tu.Images;
            TwitPicImages.DataBind();
        }
        else
        {
            TwitPicImages.Visible = false;
        }
    }
    else
    {
        TwitPicImages.Visible = false;
    }
}

From using the code above as a basis, I managed to create a simple Photo Gallery of my own: /Photos.aspx

If you experience any errors or issues, please leave a comment.

Download: iSurinder.TwitPic.zip (5.15 kb)

Simple Way To Integrate Facebook Connect Using ASP.NET

Facebook ConnectIf I need to login and authenticate a Facebook user in my ASP.NET website, I either use the Facebook Connect's JavaScript library or SocialAuth.NET. Even though these two methods are sufficient for the purpose, I don't think it's the most ideal or efficient way.

The Facebook Connect JavaScript library is quite basic and doesn't have the flexibility required for full .NET integration through FormsAuthentication. Whereas SocialAuth.NET provides full .NET integration and all authentication is done server-side with minimal development.

I'd say if you are looking for a straight-forward way to integrate social site authentication, SocialAuth.NET is the way to go. It's API can communicate with other social sites such as Twitter, LinkedIn and Gmail.

Recently, I found a better and more efficient way to authenticate Facebook users on my site using Graph API and Hammock.

Hammock is a C# a REST library for .NET that greatly simplifies consuming and wrapping RESTful services. This allows us to embrace the social site’s core technology instead of using varied SDK's or API's. There are many community driven frameworks and API's readily available on the Internet, but they can really cause problems if they evolve too quickly or haven’t been thoroughly tested.

Suddenelfilio, has written a useful blog post on connecting Facebook using Hammock. You will see by his example that you can interact with Facebook anyway you want.

The same principle could also be applied to other website API's that use REST based services, such as Twitter.

Beginner’s Guide To Using Google Plus .NET API Part 1: Profile Data

Google has always impressed me with the quality of their API libraries allowing us to interface with their products in a somewhat straight-forward manner. In the past, I’ve used a couple of Google’s API’s for implementing YouTube video’s or Checkout merchant within my own sites. What makes life even easier is that the API’s are available in my native programming framework - .NET.

Google were quite slow in launching an official API upon Google Plus’s initial release and even though unofficial API’s were available, I thought it would be best to wait until an official release was made. I’ve been playing around with Google’s .NET API for a couple weeks now and only just had the time to blog about it.

I am hoping to make this beginners guide a three part series:

  1. Profile Data
  2. User Posts
  3. User’s +1’s

So let’s get to it!

Today, I shall be showing you the basic API principles to get you started in retrieving data from your own Google+ profile.

Prerequisites

Before we can start thinking about coding our page to retrieve profile information, it’s a requirement to register your application by going to: https://code.google.com/apis/console. Providing you already have an account with Google (and who hasn’t?), this shouldn’t be a problem. If you don’t see the page (below), a new API Project needs to be created.

Google Plus API - Console

Only the Client ID, Client Secret and API Key will be used in our code allowing us to carry our API requests from our custom application.

Next, download the Google Plus .NET Client. My own preference is to use the Binary release containing compiled .NET Google Client API and all dll's for all supported services.

Building A Custom Profile Page

1) Create a new Visual Studio Web Application.

2) Unzip the Binary Zip file containing all Google service DLL’s. Find and reference the following DLL’s in your project:

  • Google.Apis.dll
  • Google.Apis.Authentication.OAuth2.dll
  • Google.Apis.Plus.v1.dll

3) Copy and paste the following front-end HTML code:

<h2>
    About Me
</h2>
<br />
<table>
    <tr>
        <td valign="top">
            <asp:Image ID="ProfileImage" runat="server"></asp:Image>
        </td>
        <td valign="top">
            <strong>Name:</strong> <asp:Label ID="DisplayName" runat="server"></asp:Label>
            <br /><br />
            <strong>About Me:</strong> <asp:Label ID="AboutMe" runat="server"></asp:Label>
            <br />
            <strong>Gender:</strong> <asp:Label ID="Gender" runat="server"></asp:Label>
            <br /><br />
            <strong>Education/Employment:</strong> <asp:Literal ID="Work" runat="server"></asp:Literal>
        </td>
    </tr>
    <tr>
        <td colspan="2" valign="middle">
            <asp:HyperLink ID="GotoProfileButton" runat="server">Go to my Google+ profile</asp:HyperLink>
        </td>
    </tr>
</table>

4) Copy and paste the following C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using Google.Apis.Authentication.OAuth2.DotNetOpenAuth;
using Google.Apis.Authentication.OAuth2;
using Google.Apis.Plus.v1;
using Google.Apis.Plus.v1.Data;

namespace GooglePlusAPITest
{
    public partial class About : System.Web.UI.Page
    {
        private string ProfileID = "100405991313749888253"; // My public Profile ID
        private string GoogleIdentifier = "<GoogleIdentifier>";
        private string GoogleSecret = "<GoogleSecret>";
        private string GoogleKey = "<GoogleKey>";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                GetGooglePlusProfile();
        }

        private void GetGooglePlusProfile()
        {
            var provider = new NativeApplicationClient(GoogleAuthenticationServer.Description);
            provider.ClientIdentifier = GoogleIdentifier;
            provider.ClientSecret = GoogleSecret;

            var service = new PlusService();
            service.Key = GoogleKey;

            var profile = service.People.Get(ProfileID).Fetch();

            // Profile Name
            DisplayName.Text = profile.DisplayName;

            //About me
            AboutMe.Text = profile.AboutMe;

            //Gender
            Gender.Text = profile.Gender;

            // Profile Image
            ProfileImage.ImageUrl = profile.Image.Url;

            // Education/Employment
            StringBuilder workHTML = new StringBuilder();

            workHTML.Append("<ul>");

            foreach (Person.OrganizationsData work in profile.Organizations.ToList())
            {
                workHTML.AppendFormat("<li>{0} ({1})", work.Title, work.Name);
            }

            workHTML.Append("</ul>");

            Work.Text = workHTML.ToString();

            //Link to Google+ profile
            GotoProfileButton.NavigateUrl = profile.Url;            
        }
    }
}

Once completed, the page should resemble something like this:

Google Plus Profile Page

I think you can all agree this example was pretty straight-forward. We are simply using the people.get method which translates into the following HTTP request:

https://www.googleapis.com/plus/v1/people/100405991313749888253?key=APIKey

Unless you really want to display my profile information on your site (who wouldn’t!), you can keep the code as it is. But you have the flexibility to change the “ProfileID” variable to an ID of your own choice. To find your Profile ID, read: How Do I Find My Google Plus User ID?.

;