Creating a scalable, changeable background with Instagram isn’t as difficult as you might imagine.
Step 1: Brain dump in PHP

All that is needed is to construct an Instagram request, request data, save an image, display the image. Since Instagram uses the OAuth 2.0 protocol and all I really want is a background image, the best approach is using the “tags” endpoint with a “ClientID”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// static background from instagram
$settings = array( 'tag' => '## Your Instagram tag ##','clientId' =>; '## Your Instagram Client ID ##' );
function composeRequestURL( $settings )
{
// Instagram API
$url = "https://api.instagram.com/v1";
if( $settings[ 'hash' ] != "" ) {
$url .= "/tags/" . $settings[ 'tag' ] . "/media/recent";
}
if( $settings[ 'clientId' ] != "" ) {
$url .= "?client_id=" . $settings[ 'clientId' ];
}
return $url;
}
function grabJSON( $settings )
{
$url = composeRequestURL( $settings );
$curl_handle=curl_init();
curl_setopt( $curl_handle,CURLOPT_RETURNTRANSFER,1 );
curl_setopt( $curl_handle,CURLOPT_URL,$url );
$url_json = curl_exec( $curl_handle );
curl_close( $curl_handle );
// Some backward compatibility
if ( !function_exists( 'json_decode' ) ) {
$json_instance = new Services_JSON();
$url_array = $json_instance->decode( $url_json );
}
else {
$url_array = json_decode( $url_json,true );
}
return $url_array;
}
function setPhoto( $settings )
{
// default image
$local_photo = "/gfx/bg.jpg";
$photo = $photo[ 'images' ][ 'standard_resolution' ][ 'url' ];
if ( empty( $url_long ) ) {
return $photo;
}
return $local_photo;
}
// Main entry point
$instagram_array = grabJSON( $settings );
if( count( $instagram_array ) > 0 ) {
// photos only array
$photos = array();
$photos_temp = $instagram_array[ 'data' ];
for( $i=0; $i < count( $photos_temp ) + 1; $i++ )
{
$photos[ $i ] = $photos_temp[ $i ][ 'images' ][ 'standard_resolution' ][ 'url' ];
}
// grab a random entry
// TODO: This sux
$key = array_rand( $photos );
$photo = $photos[ $key ];
if( $photo == '' ) {
$photo = "/gfx/bg.jpg";
}
echo "<style>";
// CSS3
$style = "#mast {";
$style .= "background: url('" . $photo . "') no-repeat center center fixed;";
$style .= "-webkit-background-size: cover;";
$style .= "-moz-background-size: cover;";
$style .= "-o-background-size: cover;";
$style .= "background-size: cover;";
// IE work around
$style .= "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='." . $photo . "', sizingMethod='scale');";
$style .= "-ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" . $photo . "', sizingMethod='scale')';";
echo $style;
echo "</style>";
}

This works well but there is a lot of lag while the image is downloaded. I plan to remedy this in the future.

Want to work with me?

Let's Talk!

Recently I've worked with ...