Re-Scraping Instagram

Back when Instagram’s API rules didn’t completely suck, I wrote a few posts on scraping it so that some of our faculty could use those data in their research.

Then all their rules changed and everything broke. That’s their prerogative but it’s also my option to complain about it.

But because I posted about it, I got a comment from raiym1 who let me know he wrote a PHP scraper that avoided the API limitations.

I’ve now got that up and running and set up a simple GET so that the URL determines the tagged content that is returned. The PHP for that page is below and allows you to replace the API URL in the old Google Scripts with a new url like http://bionicteaching.com/creations/ig/scrape.php?tag=fish

<?php

require_once 'vendor/autoload.php';

use InstagramScraper\Instagram;

error_reporting(E_ALL);
ini_set("display_errors", 1);

$tag = $_GET['tag'];

$medias = Instagram::getMediasByTag($tag, 20); //sets the number of results returned
echo json_encode($medias, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT); //the second argument doesn't do what I want
?>

You can then make your own custom displays based on that. I made a quick custom page template for the artfulness WP theme (currently showing filler data from the exciting ‘fish’ tag).

screen-shot-2016-09-15-at-10-25-12-am

This example has the tag hardcoded in but could easily use a custom field to pass the value.

<?php
/**
 * Template Name: INSTA GRAMMMMMMzzzz
 * The template for displaying something on the front page.
 *
 * This is the template that displays instagram stuff
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package H-Code
 */
get_header(); ?>

<?php
// Start the loop.
while ( have_posts() ) : the_post();

    $layout_settings = $enable_container_fluid = $class_main_section = $section_class = '';
    
    $hcode_options = get_option( 'hcode_theme_setting' );
    
    $layout_settings = hcode_option('hcode_layout_settings');
    $enable_container_fluid = hcode_option('hcode_enable_container_fluid');
    
    switch ($layout_settings) {
        case 'hcode_layout_full_screen':
            $section_class .= 'no-padding';
            if(isset($enable_container_fluid) && $enable_container_fluid == '1'){
                $class_main_section .= 'container-fluid';
            }else{
                $class_main_section .= 'container';
            }
        break;

        case 'hcode_layout_both_sidebar':
            $section_class .= '';
            $class_main_section .= 'container col3-layout';
        break;

        case 'hcode_layout_left_sidebar':
        case 'hcode_layout_right_sidebar':
            $section_class .= '';
            $class_main_section .= 'container col2-layout';
        break;

        default:
            $section_class .= '';
            $class_main_section .= 'container';
        break;
    }
    //echo $section_class.'test';
?>

<!-- THIS IS THE INSTAGRAM PART -->
<section class="parent-section <?php echo $section_class; ?>">
    <div class="<?php echo $class_main_section; ?>">
        <div class="row">
            <script type="text/javascript">                
        jQuery(document).ready(function(){ 
          console.log("ready"); //just to check in the firebug console.
          
        jQuery.ajax({
          url:'https://YOURLINKTOTHESCRIPT/extras/ig/scrape.php?tag=fish',//also could be put into theme or plugin
          jsonp:"cb",
          dataType:'json',
          success: function(data) {
            console.log(data); //dumps the data to the console to check if the callback is made successfully.
            $.each(data, function(index, item){
                           
                $('#insta').append('<figure><a href="' + item.link+ '"><div class="gram gallery-img col-md-4" style="background-image: url('+item.imageThumbnailUrl+'); height:400px;"><figcaption>' + item.caption + '</<figcaption></div></a></figure>');              
              
              }); //each
            } //success
          }); //ajax
          
        });//ready
  </script>
<div class="col-md-12 grid-gallery overflow-hidden content-section" id="insta"></div>
        </div>
    </div>
</section>
<?php 
endwhile;
// End the loop.
?>
<?php get_footer(); ?>


1 On this post. And apparently this theme doesn’t support direct links to comments. About time I wrote my own theme . . .

One thought on “Re-Scraping Instagram

Comments are closed.