I'm trying to set up my Instagram API site so that users can click on photos and "like" them. I have a like.php to send this 'like' information to the API. I'd like to be able to click on the image, send an ajax response calling like.php, having like.php do its thing and send back an "ok" if things went well.
I'm having a problem now even getting this ajax call to like.php running right. Most of the time my page wont even load and will not give any error info in the console.
Here's my code:
on the image:
echo "<img src='like.jpg' class='like' onclick='likePic(".$picId.",".$userId.")'>"
the function in main.php
function likePic(picId, userId){
$.get('path/to/like.php?picid=' + picId + '&userid=' + userId+ "&r=" + (new Date().getTime()), function(data) {
if (data != "ok") {
}
}
}
and lastly, like.php
<?php
require 'instagram.class.php';
$instagram = new Instagram(array(
'apiKey' => '******************',
'apiSecret' => '******************',
'apiCallback' => '*******************'
));
$token = userId;
$instagram->setAccessToken($token);
$id = $_GET['pic'];
$instagram->likeMedia($id);
if ($result->meta->code === 200) {
echo 'Success! The image was added to your likes.';
} else {
echo 'Something went wrong';
}
?>
In your main.php file, the response given is either Success! The image was added to your likes.
or Something went wrong
.
However, your likePic
function is comparing the returned to the text ok
which will never be true.
As for debugging your page load and AJAX issues, don't expect everything to magically show up in the console. Sometimes it's best to include console.log()
calls so you can see what code paths are actually being taken and what data is being passed around.
Lastly, it would be wise to check your PHP error log as well to ensure that all parts of your setup, including the back-end, are functioning as expected.
<?php
require 'instagram.class.php';
$instagram = new Instagram(array(
'apiKey' => '******************',
'apiSecret' => '******************',
'apiCallback' => '*******************'
));
$token = 'add your token'; // place a valid token here
$instagram->setAccessToken($token);
$id = $_GET['pic'];
$instagram->likeMedia($id);
if ($result->meta->code === 200) {
echo 'ok';
} else {
echo 'Something went wrong';
}
?>
Now should work fine
Front-end PHP/HTML/JS:
<img src="" alt="" data-pic-id="<?php echo $picId; ?>" data-user-id="<?php echo $userId; ?>">
<script>
// listens for a click event on all <img> elements
$('img').click(onImageClicked);
// the function to handle the click event
function onImageClicked() {
var picId = $(this).attr('data-pic-id');
var userId = $(this).attr('data-user-id');
$.get('path/to/like.php?pic=' + picId + '&userid=' + userId+ "&r=" + (new Date().getTime()), function(data) {
if (data != "ok") {
// failed
}
});
}
</script>
like.php:
<?php
$id = (isset($_GET['pic'])) ? $_GET['pic'] : null;
if ($id)
{
// do instagram stuff
// initialize $result;
}
if (empty($result) || $result->meta->code !== 200)
{
echo 'error';
}
else
{
echo 'ok';
}
Notice in your example JS sends picid
but PHP looks for pic
.
It's probably better to put the userId
elsewhere than on the photo, unless it will be different per photo.
Personally when responding to AJAX calls I prefer to use JSON but that's up to you.