Skip to content

Commit dbedf93

Browse files
jstolpejstolpe
committed
instagram graph api pagination and cursors
1 parent b8b7473 commit dbedf93

1 file changed

Lines changed: 186 additions & 0 deletions

File tree

‎instagram_graph_api/paging.php‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<?php
2+
// include creds for api access
3+
include 'defines.php';
4+
5+
// get limit/cursor/cursor_type from url vars if they exist
6+
$limit = isset( $_GET['limit'] ) ? $_GET['limit'] : '4';
7+
$cursor = isset( $_GET['cursor'] ) ? $_GET['cursor'] : '';
8+
$cursorType = isset( $_GET['cursor_type'] ) ? $_GET['cursor_type'] : '';
9+
10+
/**
11+
* Make a a curl call to an endpoint with params
12+
*
13+
* @param string $endpoint we are hitting
14+
* @param string $type of request
15+
* @param array $params to send along with the request
16+
*
17+
* @return array with the api response
18+
*/
19+
function makeApiCall( $endpoint, $type, $params ) {
20+
// initialize curl
21+
$ch = curl_init();
22+
23+
// combine endpoint and params and set other curl options
24+
curl_setopt( $ch, CURLOPT_URL, $endpoint . '?' . http_build_query( $params ) );
25+
curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, false );
26+
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
27+
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
28+
29+
// get response
30+
$response = curl_exec( $ch );
31+
32+
// close curl
33+
curl_close( $ch );
34+
35+
// json decode and return response
36+
return json_decode( $response, true );
37+
}
38+
39+
/**
40+
* Get a page of instagram posts for a user
41+
*
42+
* @param string $instagramAccountId id of the instagram account
43+
* @param string $accessToken access token needed to validate the request
44+
* @param string $limit number of results to return
45+
* @param string $cursorType specify getting the previous or next page with (before|after)
46+
* @param string $cursor token for accessing the requested pages data
47+
*
48+
* @return array with the page of data
49+
*/
50+
function getAPage( $instagramAccountId, $accessToken, $limit, $cursorType, $cursor ) {
51+
// endpoint structure for getting users media -> https://graph.facebook.com/v5.0/{ig-account-id}/media
52+
$usersMediaEndpoint = ENDPOINT_BASE . $instagramAccountId . '/media';
53+
54+
// endpoint params required
55+
$usersMediaParams = array(
56+
'fields' => 'id,caption,media_type,media_url,permalink,thumbnail_url,timestamp,username',
57+
'limit' => $limit,
58+
'access_token' => $accessToken
59+
);
60+
61+
if ( $cursorType && $cursor ) { // if cursor and cursor type exists the add them onto the params
62+
$usersMediaParams[$cursorType] = $cursor;
63+
}
64+
65+
// make the api call
66+
$usersMedia = makeApiCall( $usersMediaEndpoint, 'GET', $usersMediaParams );
67+
68+
// return the response
69+
return $usersMedia;
70+
}
71+
72+
// get the page specifiec based on the limit, cursor type, and cursor
73+
$usersMedia = getAPage( $instagramAccountId, $accessToken, $limit, $cursorType, $cursor );
74+
?>
75+
<!DOCTYPE html>
76+
<html>
77+
<head>
78+
<title>
79+
Instagram Graph API Pagination and Cursors
80+
</title>
81+
82+
<!-- char set -->
83+
<meta charset="utf-8" />
84+
85+
<!-- set viewport -->
86+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
87+
88+
<!-- more meta data -->
89+
<meta name="title" content="Instagram Graph API Pagination and Cursors" />
90+
<meta name="description" content="Instagram Graph API Pagination and Cursors" />
91+
<meta name="keywords" content="Instagram Pagination, Instagram Cursors, Instagram Graph API, Instagram API, Graph API" />
92+
<meta name="author" content="Justin Stolpe" />
93+
<meta name="robots" content="index, follow" />
94+
95+
<style>
96+
body {
97+
font-family: 'Helvetica';
98+
}
99+
100+
.pages-list {
101+
display: block;
102+
}
103+
104+
.pages-list-item {
105+
display: inline-block;
106+
vertical-align: top;
107+
margin-top: 10px;
108+
width: 250px;
109+
border: 1px solid #333;
110+
margin-left: 10px;
111+
padding: 10px;
112+
}
113+
114+
.pages-media {
115+
width: 100%;
116+
}
117+
118+
.raw-response {
119+
width: 100%;
120+
height: 600px;
121+
}
122+
123+
.nav-container {
124+
margin-top: 20px;
125+
font-size: 20px;
126+
display: inline-block;
127+
width: 100%;
128+
}
129+
130+
.nav-next {
131+
float: right;
132+
}
133+
</style>
134+
</head>
135+
<body>
136+
<h1>
137+
Instagram Graph API Pagination and Cursors
138+
</h1>
139+
<hr />
140+
<br />
141+
<div class="nav-container">
142+
<?php if ( isset( $usersMedia['paging']['previous'] ) ) : ?>
143+
<a href="<?php $_SERVER['PHP_SELF']; ?>?cursor_type=before&cursor=<?php echo $usersMedia['paging']['cursors']['before']; ?>&limit=<?php echo $limit; ?>">
144+
< PREVIOUS
145+
</a>
146+
<?php endif; ?>
147+
<?php if ( isset( $usersMedia['paging']['next'] ) ) : ?>
148+
<a class="nav-next" href="<?php $_SERVER['PHP_SELF']; ?>?cursor_type=after&cursor=<?php echo $usersMedia['paging']['cursors']['after']; ?>&limit=<?php echo $limit; ?>">
149+
NEXT >
150+
</a>
151+
<?php endif; ?>
152+
</div>
153+
<ul class="pages-list">
154+
<?php foreach ( $usersMedia['data'] as $media ) : // loop over posts returned for the page ?>
155+
<li class="pages-list-item">
156+
<?php if ( 'IMAGE' == $media['media_type'] || 'CAROUSEL_ALBUM' == $media['media_type'] ) : // media is an image ?>
157+
<img class="pages-media" src="<?php echo $media['media_url']; ?>" />
158+
<?php else : // media is a video ?>
159+
<video class="pages-media" controls>
160+
<source src="<?php echo $media['media_url']; ?>" >
161+
</video>
162+
<?php endif; ?>
163+
<h4>
164+
<?php echo nl2br( $media['caption'] ); // display the caption preserving spaces ?>
165+
</h4>
166+
<div>
167+
Link to Post:
168+
<br />
169+
<a target="_blank" href="<?php echo $media['permalink']; ?>">
170+
<?php echo $media['permalink']; // link to media on instagram ?>
171+
</a>
172+
</div>
173+
<br />
174+
<div>
175+
Post at: <?php echo $media['timestamp']; // time the media was posted ?>
176+
</div>
177+
</li>
178+
<?php endforeach; ?>
179+
</ul>
180+
<hr />
181+
<br />
182+
<textarea class="raw-response">
183+
<?php print_r( $usersMedia ); // dump out the actual respone from the api in a textarea ?>
184+
</textarea>
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)