Create Snapshot/Thumbnail of a blog entry using mvc

asp.net-mvc, asp.net-mvc-4, html-parsing

Solution

What i understand from your question is, you need something like the preview of a link what we get on pasting some link on facebook share area.

Facebook debug method returns an html page which has the image of your blog entry from the link given.

Use HtmlAgilityPack to parse your html returned from facebook debug

HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
        doc.LoadHtml(content);
        HtmlNode root = doc.DocumentNode;
        var imageurl = doc.DocumentNode.SelectNodes("//img/@src").LastOrDefault();
        string imagesrc = imageurl.OuterHtml.ToString();
        int start = imagesrc.IndexOf("url=");
        int to = imagesrc.IndexOf("\"", start + "url=".Length);
        string s = imagesrc.Substring(
                       start + "url=".Length,
                       to - start - "url=".Length);
        string a = Uri.UnescapeDataString(s);

and..there you have your image of the blog entry. Same function can be modified to retireve the title, description and the updated time of the blog entry.

Problem

I need to generate a snapshot from multiple links of blogs. What i have is a list of text like these "Report: Twitter Will Release Music Discovery App This Month http://on.mash.to/10L1v49 via @mashable" I want to show the links as snapshot of the blog, followed by its text in my view. Or at least i need to get the picture attached to the blog. Using facebook debug, http://developers.facebook.com/tools/debug ,i am getting this.. ``` fb:app_id: 122071082108 og:url: http://mashable.com/2013/03/13/twitter-music-app/ og:type: article og:title: Report: Twitter Will Release Music Discovery App This Month og:image: og:description: Twitter is planning to release a standalone music app for iOS called Twitter Music as soon as the end of this month, according to CNET. CNET reports that Twitter Music will help... og:site_name: Mashable og:updated_time: 1363267654 ``` I tried the same link from my c# code, accessed the link with parameter 'q' as my desired link. I got the same html as reply but i am unable to find the image associated as it is coming differently for different links. Can anyone suggest a better method to do this in mvc? My code in controller to access facebook debug : ``` var client = new RestClient { BaseUrl = "http://developers.facebook.com/tools/debug/og/object" }; var request = new RestRequest { DateFormat = DataFormat.Xml.ToString(), Resource = "Add", Method = Method.GET }; request.AddParameter("q", "http://on.mash.to/10L1v49"); IRestResponse response = client.Execute(request); var content = response.Content; // raw content as string ```

Original source