In this post I’m going to show you how to scrape google+ with PHP (in lieu of a google+ api) and create a simple contact card / badge / widget thing for your site or blog.
(top) unformatted (bottom) google+ card
The googleCard scraper class currently outputs the target user’s name, profile image, google+ url and the number of people who have them in circles (are following their posts).
The full php code for the google+ scraper is available at github, so if you know what you’re doing you can just skip the blurb and download it from there.
Include the class
The first thing you need to do is grab the googleCard code from github.
This snippet is the bare-bones needed to use the class. It includes the class and sets an id to scrape.
The id in this example is for Larry Page, all you need to do to make it grab your details instead of his is to change $plus_id to equal your google+ id. You can find your google+ id by going to your profile, it is the 21 digit integer after plus.google.com
01
02
03
04
05
06
07
08
09
10
11
// put your google+ id here :
$plus_id = ‘106189723444098348646’;
// include our scraper class
include_once(‘googleCard.php’);
// initiate an instance of our scraper class
$plus = new googleCard($plus_id);
// do the scrape
$data = $plus->googleCard();
The googleCard class has some simple file caching built in.
If you would like to use caching you can just set :
1
$plus->cache_data = 0;
in between initialising the class and calling the googleCard(); method.
The cache uses a file at ‘cache/plus_cards.txt’ by default, you can change this easily in the googleCard class. If you decide to use caching, make sure you create the cache folder and give the web server permission to write to it.
Sample implementation
The implementation below uses the class to output the data in two ways.
The basic implementation just echoes out the user’s name, the amount of people following them and their google+ profile image.
The second implementation formats the data and creates a card that looks similar to the one seen when hovering over a user’s name on google+. It also allows you to click through to the user’s profile.
01
02
03
04
05
06
07
08
09
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
<!DOCTYPE html>
<html dir=”ltr” lang=”en-US”>
<head>
<meta charset=”UTF-8″ />
<title>Google+ cards</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />
</head>
<body>
<?php
// put your google+ id here :
$plus_id = ‘106189723444098348646’;
// include our scraper class
include_once(‘googleCard.php’);
// initiate an instance of our scraper class
$plus = new googleCard($plus_id);
// enable caching (off by default)
$plus->cache_data = 0;
// do the scrape
$data = $plus->googleCard();
// if we have data, show the output
if (isset($data) && !empty($data[‘name’]) && !empty($data[‘count’]) && !empty($data[‘img’]))
{
echo $data[‘name’] . ‘ is followed by ‘ . $data[‘count’] . ‘ people <br />’;
echo ‘<img src=”‘ . $data[‘img’] . ‘” width=”80″ height=”80″ />’;
echo ‘<br /><br />’;
?>
<div id=”plus_card”>
<div id=”plus_card_image”>
<a href=”<?php echo $data[‘url’]; ?>”>
<?php echo ‘<img src=”‘ . $data[‘img’] . ‘” width=”80″ height=”80″ />’; ?>
</a>
</div>
<div id=”plus_card_name”>
<a href=”<?php echo $data[‘url’]; ?>”><?php echo $data[‘name’] ?></a>
</div>
<span id=”plus_card_add”>
<a href=”<?php echo $data[‘url’]; ?>”>Add to circles</a>
</span>
<div id=”plus_card_count”>
<p>In <?php echo $data[‘count’]; ?> people’s circles</p>
</div>
</div>
<?php
}
// else show an error
else
{
echo ‘Couldn\’t get data from google+’;
}
?>
CSS
Finally, here’s the CSS I created to style the above into the look of a hovercard :
01
02
03
04
05
06
07
08
09
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
body {
background: #ccc;
font: 13px arial, sans-serif;
}
a {
color: #3366CC;
text-decoration: none;
font-weight: bold;
}
#plus_card {
width: 200px;
min-width: 200px;
max-width: 290px;
height: 116px;
position: relative;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
border: 1px solid #888;
}
#plus_card_image, #plus_card_name, #plus_card_add { float: left;}
#plus_card_image {
width: 80px;
height: 80px;
padding: 8px;
}
#plus_card_name {
font-size: 15px;
color: #3366CC;
padding: 8px 8px 8px 0;
}
#plus_card_add {
background: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#F2F2F2′, endColorstr=’EAEAEA’);
background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#EAEAEA));
background: -moz-linear-gradient(top, #F6F6F6, #E9E9E9);
padding: 6px 8px;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#plus_card_add a {
color: #666;
font-size: 12px;
}
#plus_card_count {
width: 100%;
position: absolute;
bottom: 0;
height: 20px;
background: #eee;
}
#plus_card_count p {
padding-left: 8px;
margin: 3px 0 0;
font-size: 12px;
color: #444;
}
Well that’s all for today, I’ll probably try to throw this all into a wordpress plugin at some point, but for now I hope you enjoyed this google+ api-less hack and that it can be of some use to someone.