embeddedmedia config for instagram

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

hd 5 posts 75 karma points

Aug 14, 2015 @ 09:18

Instagram supports oEmbed and Umbraco has a config file called EmbeddedMedia.config.

I created this xml for it to support Instagram:

  <!-- Instagram Settings -->
  <provider name="Instagram" type="Umbraco.Web.Media.EmbedProviders.OEmbedRich, umbraco">
    <urlShemeRegex><![CDATA[instagr\.?am(?:\.com)?/\S*]]></urlShemeRegex>
    <apiEndpoint><![CDATA[http://api.instagram.com/oembed]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
    </requestParams>
  </provider>

But whenever I try to embed a post it comes up with Computer Says No.

This is one for Twitter which works:

      <!-- Twitter Settings -->
  <provider name="Twitter" type="Umbraco.Web.Media.EmbedProviders.OEmbedRich, umbraco">
    <urlShemeRegex><![CDATA[twitter\.com/]]></urlShemeRegex>
    <apiEndpoint><![CDATA[https://api.twitter.com/1/statuses/oembed.xml]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
    </requestParams>
  </provider>

Can anyone see what is wrong with the Instagram one and how I can make this work?

I used a regex as IG has two types of url's and the youtube config uses regex, but I've also tried without the regex and it still came with the same error message.

Cannot figure this one out and it is driving me crazy!!!

Copy Link

Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq

Aug 14, 2015 @ 13:12

This works fine for me, I'm guessing your regex for the URL is incorrect:

  <!-- Instagram -->
  <provider name="Instagram" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco" supportsDimensions="False">
    <urlShemeRegex><![CDATA[instagram\.com/]]></urlShemeRegex>
    <apiEndpoint><![CDATA[http://api.instagram.com/oembed]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams>
  </provider>

Copy Link

hd 5 posts 75 karma points

Aug 14, 2015 @ 14:11

0

Thanks for replying.

I tried your code and it still comes up with computer says no.

I am trying to embed https://instagram.com/p/6XaqxMBQUO/?taken-by=instagram

I feel like because it is https it is coming back with some security error but I can't get any information about it apart from computer says no

Copy Link
Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq

Aug 14, 2015 @ 14:46

0

Aha! You're absolutely right, this wasn't a fair test as I was testing on 7.3.0 beta in which we fixed a few things regarding OEmbed. However, I just noticed that while the preview on my test looked fine, I was not able to make the picture show up on the site.

I'm afraid there's nothing else to do than to build a macro that uses the API of Instagram to get the picture or embed code. Alternatively you could make a textarea field in which your editors can paste the embed code and use that to display the picture.

Copy Link
hd 5 posts 75 karma points

Aug 14, 2015 @ 14:52

0

Oh I see. I haven't really used Macro's before, don't have an umbraco.tv subscription. Also we just recently upgraded to v6 and don't think we will be upgrading to 7 anytime soon.

I've tried using the embeded code but the Images doesn't appear and am not a fan of having people less tech savvy posting instagram pictures that way.

Is there any links or advice you could provide to create a macro linked to an API?

Copy Link
Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq

Aug 14, 2015 @ 14:55

0

Would recommend getting a .tv subscription then! :-)

I think v6 has partial view macros, those are the best to use: https://our.umbraco.org/documentation/reference/templating/macros/Partial-View-Macros/

Copy Link
Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq

Aug 14, 2015 @ 14:57

0

Would recommend getting a .tv subscription then! :-)

I think v6 has partial view macros, those are the best to use: https://our.umbraco.org/documentation/reference/templating/macros/Partial-View-Macros/

You could ask for the instagram ID in the paramater, or for the whole URL and in your macro parse the ID out of that (so https://instagram.com/p/6XaqxMBQUO/ would result in 6XaqxMBQUO which is what I think the instagram API needs).

Copy Link
is working on a reply...

Please Sign in or register to post replies