-1

This question already has an answer here:

I made an instagram widget on codepen. It works great and it functions. However, when I try adding it to my site it does not show up. Does anyone have any suggestions for how I could get this instagram widget to work?

codepen - https://codepen.io/elle343/pen/owBoyE

my html

<ul id="rudr_instafeed"></ul>

my css

#rudr_instafeed{
   margin: 42px 0 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  text-align: center; 
  list-style:none;
}
#rudr_instafeed li{
display: inline-block;
    vertical-align: middle;
    position: relative;
}
#rudr_instafeed li img{
max-height: 260px;
      position: relative;
      z-index: 0;
}

instagram-footer.js

var token = '5219525.f0b48c7.17327f93adbe4fbb89ccd13a1a226a33',
    num_photos = 20;

$.ajax({
    url: 'https://api.instagram.com/v1/users/self/media/recent',
    dataType: 'jsonp',
    type: 'GET',
    data: {access_token: token, count: num_photos},
    success: function(data){
        console.log(data);
        for( x in data.data ){
            $('ul').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');
        }
    },
    error: function(data){
        console.log(data);
    }
});

functions.php

function instagramfooter() {
 wp_enqueue_script( 'instagramfooter', get_stylesheet_directory_uri() . '/js/instagram-footer.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-2.2.4', get_template_directory_uri() . '/js/jquery-2.2.4.min.js', array( 'jquery' ), '2.2.4', true );

}
 add_action( 'wp_enqueue_scripts', 'instagramfooter' );

In my JS folder /js/jquery-2.2.4.min.js (from here - https://code.jquery.com/jquery-2.2.4.min.js)

marked as duplicate by fuxia Jun 17 '17 at 18:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Do not add your own version of jQuery, use the built-in version you are already referring to in your enqueue- array( 'jquery' ) – Milo Jun 17 '17 at 16:38
2

To avoid conflict, WordPress requires you to use jQuery instead of $. So, in your code, you should replace $.ajax() with jQuery.ajax() and $('ul') with jQuery('ul').

You can notice there are syntax errors in your browser's console, such as:

Error: $.ajax is not defined

  • Thanks for the help, however there still seems to be a problem. As soon as you load the page all of the image pop up scattered on the screen. However, as I look in the background of all of these images the widget is showing up in the correct spot. – user7548188 Jun 17 '17 at 16:47
  • @user7548188 You're welcome. Can you please provide a screenshot, an error log, a link , etc. It's not easy to solve the issue just by knowing that something is wrong. – Jack Johansson Jun 17 '17 at 16:48
  • My site is on a local host. I checked the error log, and it doesen't list any errors. I've added a screenshot of what my screen looks like. As you can see there are images scattered everywhere that are fixed to the page, but in the background you can see the widget is working – user7548188 Jun 17 '17 at 16:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.