{"id":5861,"date":"2015-09-21T11:07:48","date_gmt":"2015-09-21T11:07:48","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2015\/09\/21\/integrating-with-instagram-using-asp-net-webhooks-preview\/"},"modified":"2023-09-19T11:07:45","modified_gmt":"2023-09-19T18:07:45","slug":"integrating-with-instagram-using-asp-net-webhooks-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/integrating-with-instagram-using-asp-net-webhooks-preview\/","title":{"rendered":"Integrating with Instagram using ASP.NET WebHooks Preview"},"content":{"rendered":"<p>In the blog <a href=\"http:\/\/blogs.msdn.com\/b\/webdev\/archive\/2015\/09\/04\/introducing-microsoft-asp-net-webhooks-preview.aspx\">Introducing Microsoft ASP.NET WebHooks Preview<\/a>, we gave an overview of how to work with Microsoft ASP.NET WebHooks. We described how you get out-of-the-box support for a variety of WebHooks providers such as <a href=\"http:\/\/dropbox.com\/\">Dropbox<\/a>, <a href=\"http:\/\/www.github.com\/\">GitHub<\/a>, <a href=\"http:\/\/www.mailchimp.com\/\">MailChimp<\/a>, <a href=\"http:\/\/www.paypal.com\/\">PayPal<\/a>, <a href=\"http:\/\/http\/\/www.slack.com\">Slack<\/a>, <a href=\"http:\/\/www.salesforce.com\/\">Salesforce<\/a>, <a href=\"http:\/\/www.trello.com\/\">Trello<\/a>, as well as being able to write your own.<\/p>\n<p>In this blog we describe integrating with <a href=\"http:\/\/www.instagram.com\">Instagram<\/a> which enables you to get notified as new images and videos are posted to their service. <a href=\"https:\/\/instagram.com\/developer\/realtime\/\">Instagram WebHooks<\/a> support four kinds of subscriptions:<\/p>\n<ul>\n<li><strong>Users<\/strong>: receive notifications when users registered with your application post new photos. <\/li>\n<li><strong>Tags<\/strong>: receive notifications when a new photo is tagged with specific tags. <\/li>\n<li><strong>Locations<\/strong>: receive notifications when new photos are posted and tagged with a specific location. <\/li>\n<li><strong>Geographies<\/strong>: receive notifications when new photos are posted in a given geo location defined by a center point and radius. <\/li>\n<\/ul>\n<p>The last one is my personal favorite as it is very easy to use and provides great opportunities for integration. In this blog we show how to subscribe using a geo location and receive updates as new images are posted.<\/p>\n<p><strong>Note:<\/strong> You can access the <a href=\"http:\/\/docs.asp.net\/projects\/aspnetwebhooks\/en\/latest\/\">latest ASP.NET WebHooks online documentation<\/a> for updates as well.<\/p>\n<h3>Configuring an Instagram Client<\/h3>\n<p>Assuming you have an Instagram account, go to their <a href=\"https:\/\/instagram.com\/developer\/clients\/manage\/\">developer portal<\/a> and define a Client which we will use for setting up the subscriptions. It should look something like this:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/6180.InstagramCreateClient_thumb_6F751763.png\"><img decoding=\"async\" title=\"InstagramCreateClient\" style=\"border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;float: none;padding-top: 0px;padding-left: 0px;margin-left: auto;padding-right: 0px;border-top-width: 0px;margin-right: auto\" border=\"0\" alt=\"InstagramCreateClient\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/6180.InstagramCreateClient_thumb_6F751763.png\" width=\"600\" height=\"412\" \/><\/a><\/p>\n<p>Note the <strong>Client ID<\/strong> and <strong>Client Secret<\/strong> \u2013 you will need these later. Also note that we don\u2019t provide any subscription information here such as the WebHook URI or the kind of subscription. Rather, Instagram supports managing subscriptions through a REST API enabling you to list, create, and delete subscriptions for a given client.<\/p>\n<h3>Configuring Receiver<\/h3>\n<p align=\"left\">Before we go through the subscription process, let\u2019s create a new Web Application project \u2013 a straight up Web API project will do:<\/p>\n<p align=\"left\"><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/6518.NewProject_thumb_389AC31D.png\"><img decoding=\"async\" title=\"NewProject\" style=\"border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;float: none;padding-top: 0px;padding-left: 0px;margin-left: auto;padding-right: 0px;border-top-width: 0px;margin-right: auto\" border=\"0\" alt=\"NewProject\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/6518.NewProject_thumb_389AC31D.png\" width=\"500\" height=\"390\" \/><\/a><\/p>\n<p align=\"left\">Let\u2019s set up the ASP.NET WebHook Receiver. First make sure you install the <b><a href=\"https:\/\/www.nuget.org\/packages?q=Microsoft.AspNet.WebHooks.Receivers.Instagram\">Microsoft.AspNet.WebHooks.Receivers.Instagram<\/a><\/b> Nuget package into your ASP.NET application. Then the registration happens exactly like in the blog <a href=\"http:\/\/blogs.msdn.com\/b\/webdev\/archive\/2015\/09\/04\/introducing-microsoft-asp-net-webhooks-preview.aspx\">Introducing Microsoft ASP.NET WebHooks Preview<\/a> by adding <font style=\"background-color: #ffff00\">this line<\/font> to the <strong>WebApiConfig.Register<\/strong> method:<\/p>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><span style=\"color: #0000ff\">namespace<\/span> WebHookReceivers<br \/>{<br \/>    <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">class<\/span> WebApiConfig<br \/>    {<br \/>        <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">void<\/span> Register(HttpConfiguration config)<br \/>        {<br \/>            <span style=\"color: #008000\">\/\/ Web API configuration and services<\/span><br \/><br \/>            <span style=\"color: #008000\">\/\/ Web API routes<\/span><br \/>            config.MapHttpAttributeRoutes();<br \/><br \/>            config.Routes.MapHttpRoute(<br \/>                name: <span style=\"color: #006080\">&quot;DefaultApi&quot;<\/span>,<br \/>                routeTemplate: <span style=\"color: #006080\">&quot;api\/{controller}\/{id}&quot;<\/span>,<br \/>                defaults: <span style=\"color: #0000ff\">new<\/span> { id = RouteParameter.Optional }<br \/>            );<br \/><br \/>            <span style=\"color: #008000\">\/\/ Load receivers<\/span><br \/>            <font style=\"background-color: #ffff00\">config.InitializeReceiveInstagramWebHooks();<\/font><br \/>        }<br \/>    }<br \/>}<\/pre>\n<p><\/div>\n<p>This time we set two application settings using the Instagram Client ID and Secret from before. As stated in the blog <a href=\"http:\/\/blogs.msdn.com\/b\/webdev\/archive\/2015\/09\/04\/introducing-microsoft-asp-net-webhooks-preview.aspx\">Introducing Microsoft ASP.NET WebHooks Preview<\/a>, the preferred way to do this is to set it in the <a href=\"https:\/\/portal.azure.com\">Azure Portal<\/a>:<\/p>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">appSettings<\/span><span style=\"color: #0000ff\">&gt;<\/span><br \/>  <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">add<\/span> <span style=\"color: #ff0000\">key<\/span><span style=\"color: #0000ff\">=&quot;MS_WebHookReceiverSecret_InstagramId&quot;<\/span> <span style=\"color: #ff0000\">value<\/span><span style=\"color: #0000ff\">=&quot;Instagram Client ID&quot;<\/span> <span style=\"color: #0000ff\">\/&gt;<\/span>    <br \/>  <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">add<\/span> <span style=\"color: #ff0000\">key<\/span><span style=\"color: #0000ff\">=&quot;MS_WebHookReceiverSecret_Instagram&quot;<\/span> <span style=\"color: #ff0000\">value<\/span><span style=\"color: #0000ff\">=&quot;Instagram Client Secret&quot;<\/span> <span style=\"color: #0000ff\">\/&gt;<\/span><br \/><span style=\"color: #0000ff\">&lt;\/<\/span><span style=\"color: #800000\">appSettings<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<p><\/div>\n<h3>Configuring Instagram WebHook Client<\/h3>\n<div>The <strong>InstagramWebHookClient<\/strong> class makes it easier to talk to the Instagram subscription API as well as to retrieve information about images. It exposes methods for subscribing to any of the four mechanisms provided by Instagram as well as unsubscribing, and for getting additional information about posted images.<\/div>\n<div>&#160;<\/div>\n<div>To wire it up, create a new class called <strong>Dependencies.cs<\/strong> (or if you want to be fancy, use a Dependency Injection Engine with ASP.NET Web API of your choice): <\/div>\n<div>&#160;<\/div>\n<div>\n<div id=\"codeSnippetWrapper\">\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">class<\/span> Dependencies<br \/>{<br \/>    <span style=\"color: #0000ff\">private<\/span> <span style=\"color: #0000ff\">static<\/span> InstagramWebHookClient _client;<br \/><br \/> <br \/>    <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">void<\/span> Initialize(HttpConfiguration config)<br \/>    {<br \/>        _client = <span style=\"color: #0000ff\">new<\/span> InstagramWebHookClient(config);<br \/>    }<br \/><br \/> <br \/>    <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> InstagramWebHookClient Client<br \/>    {<br \/>        get { <span style=\"color: #0000ff\">return<\/span> _client; }<br \/>    }<br \/>}<\/pre>\n<p><\/div>\n<div>Now wire this up in the <strong>WebApiConfig.Register<\/strong> method by adding <font style=\"background-color: #ffff00\">this<\/font> line:<\/div>\n<div>&#160;<\/div>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">class<\/span> WebApiConfig<br \/>{<br \/>    <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">static<\/span> <span style=\"color: #0000ff\">void<\/span> Register(HttpConfiguration config)<br \/>    {<br \/>        <span style=\"color: #008000\">\/\/ Web API configuration and services<\/span><br \/><br \/>        <span style=\"color: #008000\">\/\/ Web API routes<\/span><br \/>        config.MapHttpAttributeRoutes();<br \/> <br \/>        config.Routes.MapHttpRoute(<br \/>            name: <span style=\"color: #006080\">&quot;DefaultApi&quot;<\/span>,<br \/>            routeTemplate: <span style=\"color: #006080\">&quot;api\/{controller}\/{id}&quot;<\/span>,<br \/>            defaults: <span style=\"color: #0000ff\">new<\/span> { id = RouteParameter.Optional }<br \/>        );<br \/> <br \/>        <span style=\"color: #008000\">\/\/ Wire up dependencies<\/span><br \/>        <font style=\"background-color: #ffff00\">Dependencies.Initialize(config);<\/font><br \/> <br \/>        <span style=\"color: #008000\">\/\/ Load receivers<\/span><br \/>        config.InitializeReceiveInstagramWebHooks();<br \/>    }<br \/>}<\/pre>\n<p><\/div>\n<div>The first place we will use the <strong>InstagramWebHookClient<\/strong> is in the WebHook Handler. The reason for this is that Instagram doesn\u2019t include information about the posted media directly in the WebHook so we have to go get it separately. An example of a WebHook notification from Instagram looks like this:<\/div>\n<div>&#160;<\/div>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\">[<br \/>    {<br \/>        <span style=\"color: #006080\">&quot;subscription_id&quot;<\/span>: <span style=\"color: #006080\">&quot;1&quot;<\/span>,<br \/>        <span style=\"color: #006080\">&quot;object&quot;<\/span>: <span style=\"color: #006080\">&quot;geography&quot;<\/span>,<br \/>        <span style=\"color: #006080\">&quot;object_id&quot;<\/span>: <span style=\"color: #006080\">&quot;12345678&quot;<\/span>,<br \/>        <span style=\"color: #006080\">&quot;changed_aspect&quot;<\/span>: <span style=\"color: #006080\">&quot;media&quot;<\/span>,<br \/>        <span style=\"color: #006080\">&quot;time&quot;<\/span>: 1297286541<br \/>    }<br \/>    ...<br \/>]<\/pre>\n<p><\/div>\n<div>This means that we have to look up information about what media was actually posted as a second step. In the case of a geo location subscription, this can be done simply using the Client ID and Client Secret which we already have. For most other Instagram requests you need an OAuth token which takes more steps to obtain so here we will focus on images posted within a geo location. <\/div>\n<h3>Adding WebHook Handler<\/h3>\n<div>Now lets put together the WebHooks handler. For geo location subscriptions we simply use the <strong>InstagramWebHookClient<\/strong> for retrieving additional data and then extract information about the images posted:<\/div>\n<div>&#160;<\/div>\n<div id=\"codeSnippetWrapper\">\n<div id=\"codeSnippetWrapper\">\n<div id=\"codeSnippetWrapper\">\n<div>\n<pre id=\"codeSnippet\"><span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">class<\/span> InstagramWebHookHandler : WebHookHandler<br \/>{<br \/>    <span style=\"color: #0000ff\">public<\/span> InstagramWebHookHandler()<br \/>    {<br \/>        <span style=\"color: #0000ff\">this<\/span>.Receiver = <span style=\"color: #006080\">&quot;instagram&quot;<\/span>;<br \/>    }<br \/> <br \/>    <span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">override<\/span> async Task ExecuteAsync(<span style=\"color: #0000ff\">string<\/span> generator, WebHookHandlerContext context)<br \/>    {<br \/>        <span style=\"color: #008000\">\/\/ Get the WebHook client<\/span><br \/>        InstagramWebHookClient client = Dependencies.Client;<br \/> <br \/>        <span style=\"color: #008000\">\/\/ Convert the incoming data to a collection of InstagramNotifications<\/span><br \/>        var notifications = context.GetDataOrDefault&lt;IEnumerable&lt;InstagramNotification&gt;&gt;();<br \/>        <span style=\"color: #0000ff\">foreach<\/span> (var notification <span style=\"color: #0000ff\">in<\/span> notifications)<br \/>        {<br \/>            <span style=\"color: #008000\">\/\/ Use WebHook client to get detailed information about the posted media<\/span><br \/>            var entries = await client.GetRecentGeoMedia(context.Id, notification.ObjectId);<br \/>            <span style=\"color: #0000ff\">foreach<\/span> (JToken entry <span style=\"color: #0000ff\">in<\/span> entries)<br \/>            {<br \/>                <span style=\"color: #008000\">\/\/ Get direct links and sizes of media<\/span><br \/>                var thumbnail = entry[<span style=\"color: #006080\">&quot;images&quot;<\/span>][<span style=\"color: #006080\">&quot;thumbnail&quot;<\/span>].ToObject&lt;InstagramMedia&gt;();<br \/>                var lowres = entry[<span style=\"color: #006080\">&quot;images&quot;<\/span>][<span style=\"color: #006080\">&quot;low_resolution&quot;<\/span>].ToObject&lt;InstagramMedia&gt;();<br \/>                var std = entry[<span style=\"color: #006080\">&quot;images&quot;<\/span>][<span style=\"color: #006080\">&quot;standard_resolution&quot;<\/span>].ToObject&lt;InstagramMedia&gt;();<br \/>            }<br \/>        }<br \/>    }<br \/>}<\/pre>\n<\/p><\/div>\n<div>&#160;<\/div>\n<div>The <strong>GetRecentGeoMedia<\/strong> method automatically keeps track of where it is so you only see the same image information once as long as you use the same InstagramWebHookClient instance. In the case above we extract information about three different image resolutions (thumbnail, low resolution, and standard resolution). However, the information provide by Instagram is very rich and we can extract much other information as well. Here are some examples what you can get from the <strong>entry<\/strong> above:<\/div>\n<div>&#160;<\/div>\n<div id=\"codeSnippetWrapper\">\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><span style=\"color: #008000\">\/\/ Get link to the media on the Instagram website<\/span><br \/><span style=\"color: #0000ff\">string<\/span> link = entry.Value&lt;<span style=\"color: #0000ff\">string<\/span>&gt;(<span style=\"color: #006080\">&quot;link&quot;<\/span>);<br \/> <br \/><span style=\"color: #008000\">\/\/ Get caption for the media<\/span><br \/>var caption = entry[<span style=\"color: #006080\">&quot;caption&quot;<\/span>].ToObject&lt;InstagramCaption&gt;();<br \/> <br \/><span style=\"color: #008000\">\/\/ Get information about the user posting the media<\/span><br \/>var user = entry[<span style=\"color: #006080\">&quot;user&quot;<\/span>].ToObject&lt;InstagramUser&gt;();<br \/> <br \/><span style=\"color: #008000\">\/\/ Get location information about where the media was recorded.<\/span><br \/>var location = entry[<span style=\"color: #006080\">&quot;location&quot;<\/span>].ToObject&lt;InstagramLocation&gt;();<br \/><\/pre>\n<\/p><\/div>\n<div>&#160;<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h3>Subscribing to Instagram<\/h3>\n<div>The last piece missing is subscribing to Instagram so that we can start receive notifications. To subscribe to a geo location, we need three parameters: The latitude and longitude as well as a radius defining the area we are looking for. The radius is described in meters and must be less than 5000 meters. I have had luck using the latitude and longitude of <a href=\"http:\/\/binged.it\/1iqKSc9\">Times Square in New York<\/a> and a radius of 5000 meters but it depends on the time of day. You can get the latitude and longitude using either Bing Maps or Google Maps. Using the former you create a push pin which will show you the coordinates:<\/div>\n<div>&#160;<\/div>\n<div><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/5468.TimesSquare_thumb_68586B9C.png\"><img decoding=\"async\" title=\"TimesSquare\" style=\"border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;float: none;padding-top: 0px;padding-left: 0px;margin-left: auto;padding-right: 0px;border-top-width: 0px;margin-right: auto\" border=\"0\" alt=\"TimesSquare\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/5468.TimesSquare_thumb_68586B9C.png\" width=\"600\" height=\"468\" \/><\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p>Subscriptions are persisted by Instagram so we only have to subscribe once in order to receive notifications for a long time. You can imagine this being wired up in a variety of ways but here we use a simple controller exposing three actions for subscribing and unsubscribing. Create a new empty Web API controller class called <strong>InstagramSubscriptionController<\/strong> and fill it in as follows:<\/p>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\">[RoutePrefix(<span style=\"color: #006080\">&quot;api\/instagram&quot;<\/span>)]<br \/><span style=\"color: #0000ff\">public<\/span> <span style=\"color: #0000ff\">class<\/span> InstagramSubscriptionController : ApiController<br \/>{<br \/>    [Route(<span style=\"color: #006080\">&quot;subscribe&quot;<\/span>)]<br \/>    <span style=\"color: #0000ff\">public<\/span> async Task&lt;IHttpActionResult&gt; PostSubscribe()<br \/>    {<br \/>        <span style=\"color: #008000\">\/\/ Get our WebHook Client<\/span><br \/>        InstagramWebHookClient client = Dependencies.Client;<br \/> <br \/>        <span style=\"color: #008000\">\/\/ Subscribe to a geo location, in this case within 5000 meters of Times Square in NY<\/span><br \/>        <span style=\"color: #0000ff\">var<\/span> sub = await client.SubscribeAsync(<span style=\"color: #0000ff\">string<\/span>.Empty, Url, 40.757626, -73.985794, 5000);<br \/> <br \/>        <span style=\"color: #0000ff\">return<\/span> Ok(sub);<br \/>    }<br \/> <br \/>    [Route(<span style=\"color: #006080\">&quot;unsubscribe&quot;<\/span>)]<br \/>    <span style=\"color: #0000ff\">public<\/span> async Task PostUnsubscribeAll()<br \/>    {<br \/>        <span style=\"color: #008000\">\/\/ Get our WebHook Client<\/span><br \/>        InstagramWebHookClient client = Dependencies.Client;<br \/> <br \/>        <span style=\"color: #008000\">\/\/ Unsubscribe from all subscriptions for the client configuration with id=&quot;&quot;.<\/span><br \/>        await client.UnsubscribeAsync(<span style=\"color: #006080\">&quot;&quot;<\/span>);<br \/>    }<br \/> <br \/>    [Route(<span style=\"color: #006080\">&quot;unsubscribe\/{subId}&quot;<\/span>)]<br \/>    <span style=\"color: #0000ff\">public<\/span> async Task PostUnsubscribe(<span style=\"color: #0000ff\">string<\/span> subId)<br \/>    {<br \/>        <span style=\"color: #008000\">\/\/ Get our WebHook Client<\/span><br \/>        InstagramWebHookClient client = Dependencies.Client;<br \/> <br \/>        <span style=\"color: #008000\">\/\/ Unsubscribe from the given subscription using client configuration with id=&quot;&quot;.<\/span><br \/>        await client.UnsubscribeAsync(<span style=\"color: #006080\">&quot;&quot;<\/span>, subId);<br \/>    }<br \/>}<br \/><\/pre>\n<p><\/div>\n<h3>Trying it Out!<\/h3>\n<p>Once you have deployed the project, you can attach the debugger to it and wait for somebody to post a picture within the geo location area. Of course, if you pick your own current location then you can post something to Instagram yourself as well.<\/p>\n<p>To <strong>subscribe<\/strong>, send an empty <strong><font style=\"background-color: #ffff00\">https<\/font><\/strong> POST request using Fiddler or similar to a URI like below. Make sure that it is <strong>https<\/strong> as this is required by Instagram:<\/p>\n<div>\n<pre id=\"codeSnippet\"><a href=\"https:\/\/&lt;host&gt;\/api\/instagram\/subscribe\">https:\/\/&lt;host&gt;\/api\/instagram\/subscribe<\/a><\/pre>\n<\/div>\n<div>&#160;<\/div>\n<div>The result should look something like this:<\/div>\n<div>&#160;<\/div>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\">{<br \/>    <span style=\"color: #006080\">&quot;id&quot;<\/span>: <span style=\"color: #006080\">&quot;20048438&quot;<\/span>,<br \/>    <span style=\"color: #006080\">&quot;object&quot;<\/span>: <span style=\"color: #006080\">&quot;geography&quot;<\/span>,<br \/>    <span style=\"color: #006080\">&quot;object_id&quot;<\/span>: <span style=\"color: #006080\">&quot;11286394&quot;<\/span>,<br \/>    <span style=\"color: #006080\">&quot;callback_url&quot;<\/span>: <span style=\"color: #006080\">&quot;https:\/\/&lt;host&gt;.net\/api\/webhooks\/incoming\/instagram&quot;<\/span><br \/>}<\/pre>\n<p><\/div>\n<div>Depending on the location you subscribed to and the time of day you will of course get different results in how frequent images are posted. However, you should see something like this:<\/div>\n<div>&#160;<\/div>\n<div><a href=\"https:\/\/devblogs.microsoft.com\/00\/00\/00\/63\/56\/metablogapi\/2337.InstagramDebug_6F0B751F.png\"><img decoding=\"async\" title=\"InstagramDebug\" style=\"border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;float: none;padding-top: 0px;padding-left: 0px;margin-left: auto;padding-right: 0px;border-top-width: 0px;margin-right: auto\" border=\"0\" alt=\"InstagramDebug\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2015\/09\/1754.InstagramDebug_thumb_47D12BEA.png\" width=\"600\" height=\"290\" \/><\/a><\/div>\n<div>&#160;<\/div>\n<div>Once the notifications start flowing there is no end to what you may do with them. You could for example save the links to a data base and show them as part of your Web UI, or kick off some additional processing \u2013 the opportunities are open!<\/div>\n<p>To <strong>unsubscribe<\/strong>, send an empty POST request to a URI like this:<\/p>\n<div id=\"codeSnippetWrapper\">\n<pre id=\"codeSnippet\"><a href=\"https:\/\/&lt;host&gt;\/api\/instagram\/unsubscribe\">https:\/\/&lt;host&gt;\/api\/instagram\/unsubscribe<\/a><\/pre>\n<\/div>\n<div>&#160;<\/div>\n<div>Ok, that\u2019s it \u2013 you can now subscribe to Instagram asking for notifications when images are posted within a specific geo location and use ASP.NET WebHooks to easily get the information about the posted images so that you can use them in your Web application.<\/div>\n<div>&#160;<\/div>\n<p>Have fun! <\/p>\n<p>Henrik<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the blog Introducing Microsoft ASP.NET WebHooks Preview, we gave an overview of how to work with Microsoft ASP.NET WebHooks. We described how you get out-of-the-box support for a variety of WebHooks providers such as Dropbox, GitHub, MailChimp, PayPal, Slack, Salesforce, Trello, as well as being able to write your own. In this blog we [&hellip;]<\/p>\n","protected":false},"author":403,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[31,34,7505,7506],"class_list":["post-5861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net","tag-asp-net-web-api","tag-asp-net-webhooks","tag-webhooks"],"acf":[],"blog_post_summary":"<p>In the blog Introducing Microsoft ASP.NET WebHooks Preview, we gave an overview of how to work with Microsoft ASP.NET WebHooks. We described how you get out-of-the-box support for a variety of WebHooks providers such as Dropbox, GitHub, MailChimp, PayPal, Slack, Salesforce, Trello, as well as being able to write your own. In this blog we [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/5861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/403"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=5861"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/5861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=5861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=5861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=5861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}