Announcement

Collapse
No announcement yet.

Add Instagram Photo(s) to Sidebar

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Add Instagram Photo(s) to Sidebar

    We had a need on our forum to display the latest image from our Instagram account. Not finding much online to help, I combined a few methods from other IG API integrations and came up with something that works.

    - First off, you need to generate an access token from the Instagram Developer Page. Go HERE to do so.
    - With your access token handy, go to your forum and turn on your site editor.
    - Click Edit Page and login as Admin if not already.
    - Grab a PHP module and drag it to your desired location on the sidebar.
    - Edit it and give it a name, adjust display settings and then paste the following code in the PHP code box:

    Code:
            $username = 'YOUR_USERNAME'; // your username
            $access_token = 'YOUR_ACCESS_TOKEN'; // put your access token here
            $count = 1; // number of images to show
    
        class InstaWCD{
    
    
        function userID(){
            $username = strtolower($this->username); // sanitization
            $token = $this->access_token;
            $url = "https://api.instagram.com/v1/users/search?q=".$username."&access_token=".$token;
            $get = file_get_contents($url);
            $json = json_decode($get);
    
            foreach($json->data as $user){
                if($user->username == $username){
                    return $user->id;
                }
            }
    
            return '00000000'; // return this if nothing is found
        }
    
        function userMedia(){
            $url = 'https://api.instagram.com/v1/users/'.$this->userID().'/media/recent/?access_token='.$this->access_token;
    
            $content = file_get_contents($url);
              return $json = json_decode($content, true);
        }
    
        }
        $insta = new InstaWCD();
            $insta->username = $username;
            $insta->access_token = $access_token;
    
            $ins_media = $insta->userMedia(); 
            $i = 0; 
            foreach ($ins_media['data'] as $vm): 
                if($count == $i){ break;}
                $i++;
                $img = $vm['images']['low_resolution']['url'];
                $link = $vm["link"];
    
              echo "<a href='".$link."'>" ;
              echo "<img src='".$img."'/></a>" ;
    
    
        endforeach;
    - The code above is relatively self explanatory, but you'll really only need to edit 3 things....all of which are located at the beginning of the code.

    Code:
    $username: Just erase the YOUR_USERNAME part and put in your actual username from Instagram.
    $access_token: Again, erase the YOUR_ACCESS_TOKEN part and put in your actual token from Instagram.
    $count: Change this number to set the images you want to display. For the sidebar, 1 works for me, but if you use this code elsewhere, you can make an Instagram "gallery" by changing this to....say....20 or 30.
    Hope this helps someone.

  • #2
    And what is the problem?
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      This is a tutorial forum. He's just sharing some code that's working.

      GIPHY for vB5 AutoLinker Auto-Create Flag Report INITIALS AVATAR (Better) Name Card Quote Selected Text Likes Summary Disable AJAX Pagination Stop Links in Posts...& MORE!

      Comment


      • #4
        I'm interested in adding this to my clubs test forum, but cannot find any PHP module in SiteBuilder. Is this something that is no longer available?
        Vote for Features!!
        * Member Lists in Groups *
        * Mass Private Messages to Groups and Usergroups *

        Comment


        • #5
          Originally posted by zkengle View Post
          I'm interested in adding this to my clubs test forum, but cannot find any PHP module in SiteBuilder. Is this something that is no longer available?
          php modules are not available to Cloud customers. Sorry about that.
          MARK.B | vBULLETIN SUPPORT

          TalkNewsUK - My vBulletin 5.7.1 Demo
          AdminAmmo - My Cloud Demo

          Comment


          • #6
            Originally posted by Mark.B View Post

            php modules are not available to Cloud customers. Sorry about that.
            Ok, thank you for that information. Good to know.
            Vote for Features!!
            * Member Lists in Groups *
            * Mass Private Messages to Groups and Usergroups *

            Comment


            • #7
              On Cloud, you can copy the embed code from an image and place that code within a Static HTML or Ad module. See the first section on this page: https://www.instagram.com/developer/embedding/
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment


              • #8
                The discussion about the missing PHP module has been moved to https://forum.vbulletin.com/forum/vb...ove-from-cloud
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment


                • #9
                  Sorry to drag up an older post but I am looking to do this on my site.
                  I was wondering though is there a way to make it so the module grabs pictures from certain hashtags?

                  Grab images by the hashtag then randomly show them in the sidebar?

                  Thank you.

                  Comment


                  • #10
                    There is no direct support of Instagram in vBulletin. If Instagram has made code (via HTML and Javascript) available to pull images by hashtag then you can put that code into a Static HTML Module and is should work on the page.

                    Maybe the original author will be able to post an update as well.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud demonstration site.
                    vBulletin 5 API

                    Comment


                    • #11
                      Originally posted by Wayne Luke View Post
                      There is no direct support of Instagram in vBulletin. If Instagram has made code (via HTML and Javascript) available to pull images by hashtag then you can put that code into a Static HTML Module and is should work on the page.

                      Maybe the original author will be able to post an update as well.
                      Appreciate the info, Thanks again.

                      Comment

                      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                      Working...
                      X