Copied to clipboard

Flag this post as spam?

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


  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Jun 05, 2015 @ 17:31
    Owain Williams
    0

    Instagram help.

    Hi, I'm new to umbraco and also to SkyBrud.Social.

    I'm currently trying to work my way through the online examples to pull in 9 of my latest photos from Instagram.

    I have created a partial view in Umbraco, using the cshtml provided on the wiki. That is through up errors on the line:

    InstagramRecentMediaResponse recent = service.Users.GetRecentMedia(self.Data.Id);
    

    I'm getting an error at the end, under Data. (...does not contain a definition for Data and no extension method....)

    What am I missing?

    I've installed SkyBurd.Social package in to Umbraco and I have entered in my client ID etc in to the newly created datatype.

    Would someone be kind enough to share their partial class and front-end solution?

    Thanks,

  • Anders Bjerner 393 posts 2192 karma points MVP 2x admin c-trib
    Jun 05, 2015 @ 18:26
    Anders Bjerner
    0

    Hi Owain,

    Sorry for the Razor examples being a bit out of date. I thought for sure I had updated them with the latest release.

    Here is an updated example:

    @using Skybrud.Social.Instagram
    @using Skybrud.Social.Instagram.Objects
    @using Skybrud.Social.Instagram.Responses
    @using Skybrud.Social.Umbraco.Instagram.PropertyEditors.OAuth
    @inherits Umbraco.Web.Mvc.UmbracoViewPage
    @{
    
        // Get the OAuth information stored in the property
        InstagramOAuthData instagram = Model.GetPropertyValue("instagram") as InstagramOAuthData;
    
        // Check whether the OAuth data is valid
        if (instagram != null && instagram.IsValid) {
    
            // Gets an instance of InstagramService based on the OAuth data
            InstagramService service = instagram.GetService();
    
            // Gets information about the authenticated user
            InstagramUserResponse self = service.Users.GetSelf();
    
            // Get recent media from the authenticated user
            InstagramRecentMediaResponse recent = service.Users.GetRecentMedia(self.Body.Data.Id);
    
            <fieldset>
                <legend>Instagram</legend>
                <p>@(self.Body.Data.FullName ?? self.Body.Data.Username) (ID: @self.Body.Data.Id)</p>
                <hr />
                @foreach (InstagramMedia media in recent.Body.Data) {
                    <img src="@media.Thumbnail" alt="@media.CaptionText" />
                }
            </fieldset>
    
        }
    
    }
    
  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Jun 06, 2015 @ 19:22
    Owain Williams
    0

    Thanks Anders,

    I've placed the partial view within the Views\Partials folder is that correct?

    Then on my homepage masterpage I have put @Html.Partial("instagram") but nothing is showing on my site - obviously I've made a mistake somwhere!

    I've also installed the Skybrud package and created the new document type and entered all my instagram developer details.

    if (instagram != null && instagram.IsValid)
    

    Is returning null, so this is obviously where it's failing, what could cause this?

  • Anders Bjerner 393 posts 2192 karma points MVP 2x admin c-trib
    Jun 07, 2015 @ 00:15
    Anders Bjerner
    0

    Hi again,

    That seems right. Actually when writing @Html.Partial("instagram"), ASP.NET will look for an instagram.cshtml in a number of folders, where ~/Views/Partials/ is one of them. So that part should be okay.

    Just to rule things out, I have a few questions to your solution/site:

    • What is the alias of your property? If you call Model.GetPropertyValue("instagram"), the alias of your property should be instagram.

    • Is the page you're viewing the same as the page the property has been added on? Depending on your use case, you may have added the property to the root page, but trying to use it on a sub page. My example just assumes the property has been added to the page being viewed, so if that this isn't the case, you should adjust the example a bit.

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Jun 07, 2015 @ 22:41
    Owain Williams
    1

    Thanks for your continued help with this!

    I'll try and explain my setup.

    I have a master.cshtml, a homepage.cshtml and the instagram.cshtml

    Views

    • Homepage.cshtml
    • master.cshtml

    Partials

    • instagram.cshtml

    In my master, I call

    @Html.Partial("instagram")
    

    and this successfully finds my instagram.cshtml file within the partials folder. I know this because I put a breakpoint in and stepped through the process.

    I think I must be missing a fundamental thing here. I am trying to run it on localhost, would that be a problem? I've called the datatype instagram.

    Sorry about this!

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Jun 08, 2015 @ 11:22
    Owain Williams
    0

    Think I have found the issue. I hadn't added the instagram property to my homepage!

    If I get a chance, I'll put some instructions together to help others in the future. :)

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Jun 08, 2015 @ 12:15
    Owain Williams
    101

    Here are the steps I took to get an instagram feed working on my site.

    1. Download the instagram package from https://our.umbraco.org/projects/website-utilities/skybrudsocial-for-umbraco-7 and installed it on my site.

    2. In the admin area, go to developer tab and create a new data type. I called mine instagram and then entered in my instagram developer credentials which you find at https://instagram.com/developer/clients/manage/

    3. In the admin area, go to settings tab and create a new partial view, I called mine instagram and paste the following code in.

      @using Skybrud.Social.Instagram
      @using Skybrud.Social.Instagram.Objects
      @using Skybrud.Social.Instagram.Responses
      @using Skybrud.Social.Umbraco.Instagram.PropertyEditors.OAuth
      @inherits Umbraco.Web.Mvc.UmbracoViewPage
      @{

      // Get the OAuth information stored in the property InstagramOAuthData instagram = Model.GetPropertyValue("instagram") as InstagramOAuthData;

      // Check whether the OAuth data is valid if (instagram != null && instagram.IsValid) {

      // Gets an instance of InstagramService based on the OAuth data
      InstagramService service = instagram.GetService();
      
      // Gets information about the authenticated user
      InstagramUserResponse self = service.Users.GetSelf();
      
      // Get recent media from the authenticated user
      InstagramRecentMediaResponse recent = service.Users.GetRecentMedia(self.Body.Data.Id);
      
      <fieldset>
          <legend>Instagram</legend>
          <p>@(self.Body.Data.FullName ?? self.Body.Data.Username) (ID: @self.Body.Data.Id)</p>
          <hr />
          @foreach (InstagramMedia media in recent.Body.Data) {
              <img src="@media.Thumbnail" alt="@media.CaptionText" />
          }
      </fieldset>}}
      
    4. Go to settings tab, expand Document type and find the document type you would like to add the instagram feed to. I put mine on the homepage. Click on the document type, then click on the Generic Properties tab. Click 'Add new property', give it a name but make sure the alias is instagram. In the Type dropdown menu, select instagram. I put this in the Generic Properties tab. Save.

    5. Go to the Content tab, click on the page you have placed the type on, in my example, Homepage. Click the properties tab, scroll down until you see your property, there should be an authorize button showing. Click it. This will authroize your site to communicate with instagram. If successful, you should see your instagram avatar and username.

    6. Go to the page template that you want your feed to display on and enter

      @Html.Partial("instagram")

      Where you want the feed to display.

    Hope this helps others to get this working.

  • dipanwita das 15 posts 96 karma points
    19 days ago
    dipanwita das
    0

    Hi Williams,

    I followed the steps but when i create a partial view "instagram.cshtml" in umbraco backoffice, automatically "_InstagramPartialView.cshtml" gets created in Views/PartialView and when i click on the page i get an error message " The Item doesnt exist in the project Directory. It may be moved, renamed or deleted ." Please let me the issue.

    the error is Could not load type 'Skybrud.Social.Umbraco.App_Plugins.Skybrud.Social.Dialogs.InstagramOAuth'. when i click the authorize button

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    19 days ago
    Owain Williams
    0

    Hi, Do you have the Skybrud.Social package installed in Umbraco?

    You can find it here: https://our.umbraco.com/packages/website-utilities/skybrudsocial-for-umbraco-7/

    Owain.

  • dipanwita das 15 posts 96 karma points
    15 days ago
    dipanwita das
    0

    Hi Williams,

    i already have installed Skybrud.Social for Umbraco 7 in my visual studio. Still i am facing the error.

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    15 days ago
    Owain Williams
    0

    Hi, Could you share your code so that I can see what might be causing the error?

    Thanks, Owain.

  • dipanwita das 15 posts 96 karma points
    15 days ago
    dipanwita das
    0

    Hi Williams,

    My bad I didnt install the package in umbraco Backoffice. But now when i have installed and click Authorize button as mentioned in the above process i get a message "Hold on now! The options of the underlying prevalue editor isn't valid." in a new pop up window.

  • Anders Bjerner 393 posts 2192 karma points MVP 2x admin c-trib
    15 days ago
    Anders Bjerner
    0

    When you have come to the point where you're able to click the Authorize button, you should already have an Instagram data type in Umbraco.

    The error message you're seeing is probably because you haven't yet entered the necessary about your Instagram app. Could that be the issue?

  • Biagio Paruolo 1438 posts 1556 karma points c-trib
    Sep 20, 2015 @ 09:59
    Biagio Paruolo
    0

    I made the same steps, but I've always a null value from this:

    InstagramOAuthData instagram = CurrentPage.GetPropertyValue<InstagramOAuthData>("instagramStream");
    

    I'm sure 100% that field and alias are correct and in the page. The code is into a partial view.

  • Owain Williams 338 posts 1004 karma points MVP c-trib
    Sep 24, 2015 @ 14:21
    Owain Williams
    1

    Hi, Did you use the code exactly as it is above?

    I have a different version now as well which runs fine on my live site:

       @using Skybrud.Social.Instagram
    @using Skybrud.Social.Instagram.Objects
    @using Skybrud.Social.Instagram.Responses
    @using Skybrud.Social.Umbraco.Instagram.PropertyEditors.OAuth
    @inherits Umbraco.Web.Mvc.UmbracoViewPage
    
    
    @{
    
        // Get the OAuth information stored in the property
    
    
            var currentContent = Umbraco.TypedContent(UmbracoContext.PageId.Value);
            var rootNode = currentContent.AncestorOrSelf(1);
    
            var instagram = rootNode.GetPropertyValue<InstagramOAuthData>("instagram");
    
        // Check whether the OAuth data is valid
        if (instagram != null && instagram.IsValid) {
    
            // Gets an instance of InstagramService based on the OAuth data
            InstagramService service = instagram.GetService();
    
            // Gets information about the authenticated user
            InstagramUserResponse self = service.Users.GetSelf();
    
            // Get recent media from the authenticated user
            InstagramRecentMediaResponse recent = service.Users.GetRecentMedia(self.Body.Data.Id, 4);
    
    
    
            <fieldset>
                @foreach (InstagramMedia media in recent.Body.Data) {
                <a href="@Umbraco.Field("instagramSocial")"><img src="@media.Thumbnail" alt="@media.CaptionText" height="110px" width="110px" /></a>
                }
            </fieldset>
    
        }
    
    }
    
  • dipanwita das 15 posts 96 karma points
    7 days ago
    dipanwita das
    0

    Hi,

    var instagram = rootNode.GetPropertyValue

    This instagram is always null. I tried including "\App_Plugins\Skybrud.Social" into the project and i am getting compile time errors . Should it be included in the project ??

    So can you help me with this ??

  • Anders Bjerner 393 posts 2192 karma points MVP 2x admin c-trib
    6 days ago
    Anders Bjerner
    0

    Hi again,

    As this appears to be another issue that the one Owain originally described in this thread, could you create a new thread with your issue? Then I'd be happy to have another look at it ;)

  • dipanwita das 15 posts 96 karma points
    4 days ago
    dipanwita das
    0

    Thanks for the reply.

    I have created a new thread of my issue . Please find the link below:

    https://our.umbraco.com/forum/templates-partial-views-and-macros//95370-skybrudsocialinstagram-help

Please Sign in or register to post replies

Write your reply to:

Draft