Adding comment and like count to WordPress plugin Simple Instagram

This is really not a proper way of doing it, but I did it anyway.

I have this WordPress plugin for Instagram, Simple Instagram its called. I thought it would be nice to have the comment count and like count when hovering over the images. So, just for fun I tried to edit the existing plugin to make it work. Here are my notes on how I did it.

Alla data is already available within the plugin. The data is downloaded from Instagram so I just need to use it, wrap it within some HTML and add some style.

In the file plugins/simple-instagram/inc/shortcodes.php I added the following code to get the counts and prepare some HTML of it. I’m using FontAwesome to get the “images” looking like a heart and a chatt box. So, you’ll need FontAwesome to make this work.

$likes = $image->likes->count; 
$comments = $image->comments->count; 
$return .= "<span class='si_overlay'><span class='si_likes'><i class='fa fa-heart'></i> $likes</span><br/><span class='si_comments'><i class='fa fa-weixin'></i> $comments</span></span>";

I inserted the rows right before this line, line 212.

$return .= '<img alt="' . $image_caption. '" src="' . $url . '" ' . $w_param . ' >';

It’s near the bottom of this function.

    private function get_image_markup( $feed, $width, $size, $wrapper, $link ) {

Nice. I then added some LESS (CSS) to make it invisible at a start and visible when hovering it.

/** ------------------------------------------
* Simple Instagram with comment and like count
*
*/
.si_item {
  position: relative;
  border: 1px solid #eee;
  display: inline-block;

  .si_overlay {
      position: absolute;
      top: 40%;
      left: 40%;
      z-index: 2;
      visibility: hidden;
      color: #000;
  }

  a:hover {
      img {
          opacity: 0.5;
      }
      
      .si_overlay {
          visibility: visible;
      }
  }
}

Or, if you rather use the CSS code.

.si_item {
    position: relative;
    display: inline-block;
    border: 1px solid #eee;
    padding: 8px;
    margin: 4px;
    border-radius: 4px;
}

.si_overlay {
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 2;
    visibility: hidden;
    color: #000;
}

.si_item a:hover img {
    opacity: .5;
}

.si_item a:hover .si_overlay {
    visibility: visible;
}

Done. Now Simple Instagram plugin has counts for comments and likes.

Rather hardcoded, yea, I know. But still, it was all for the fun of it.