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 customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


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

      AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

      Comment

      Working...
      X