How To Display Google Plus Posts On Website Using PHP? Step By Step Guide!

display-google-plus-posts-on-website
Millions of people still use Google+ because of its search engine optimization benefits and additional traffic for their websites.

Do you use Google+ profile or page for your brand or products? Does your client use it?

If you use it for your brands or products and you have your own website, it will be a great feature if you can display your Google+ feed or posts on your website.

Our script for today will allow you to customize the look and feel of your Google+ posts.

Don’t get me wrong, it looks good!

But sometimes, our design scheme or our clients have a different requirement, they want the Google+ feed to look different.

The good news is, our code for today will help you do it!

Today’s post will cover the following content:

1.0 Source Code Overview
2.0 Final Output Demo
3.0 Obtain an API Key From Google
4.0 Create The index.php File
5.0 Activate Error Reporting And Put Page Title
6.0 Put Container Tags
7.0 Get Google+ ID
8.0 Require Google Libraries and Instantiate Classes
9.0 Retrieve Google+ Posts
10.0 Create items_template.php
11.0 Set Needed Variables
12.0 Format And Show Values To User
13.0 Show Profile Info
14.0 Show Post Message
15.0 Show Post Content
16.0 Show +1 & Comments Count
17.0 Put Custom CSS
18.0 Download The Source Code
19.0 Do You Want a Demo?
20.0 Social Media Scripts – LEVEL 3 – PRO PACK
21.0 Related Source Code
22.0 Some Notes

Let’s get started!

1.0 SOURCE CODE OVERVIEW

Here’s an overview of what our code does:

1.1 It gets a Google+ information and posts from a specified Google+ profile or page. We’ll try Taylor Swift’s Google+ page in the demo.

1.2 Display these Google+ data to a webpage (assuming it is your WordPress or PHP website.)

1.3 Show some awesome UI powered by Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

2.0 FINAL OUTPUT DEMO

2.1 LEVEL 1 Source Code Output

We have to know where we are going, if we’re done with the code tutorial in this post, we will achieve this output:

2.2 LEVEL 2 Source Code Output

3.0 Obtain an API Key From Google

3.1 Go to https://console.developers.google.com

3.2 Click the “Credentials” tab on the left menu.

3.3 Click the blue “Create Credentials” button

3.4 On the dropdown, click “API Key”

3.5 On the pop up, click the “Browser Key” button. It should look like the following.

create-google-api-key

3.6 Enter your browser API key name and click “Create”.

3.7 You should be able to view and copy your API key on the list.

google-api-key-list

4.0 Create The index.php File

We will make index.php Bootstrap ready. For those not familiar with the CSS framework Bootstrap, please refer to our step by step tutorial here:

Step by Step Bootstrap Tutorial for Beginners

The index.php file will have the following code.

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title><?php echo $page_title; ?></title>

        <!-- Bootstrap CSS -->
	<link href="libs/js/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>

<!-- PAGE CONTENT and PHP CODE WILL BE HERE -->

<!-- jQuery library -->
<script src="libs/js/jquery.js"></script>

<!-- bootstrap JavaScript -->
<script src="libs/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/js/bootstrap/docs-assets/js/holder.js"></script>
 
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</body>
</html>

5.0 Activate Error Reporting And Put Page Title

At the top of our index.php file, put the following code.

<?php
// show any kind or errors
error_reporting(E_ALL);
ini_set('display_errors', 1);

// page title
$page_title = "Display Google Plus Feed - LEVEL 1 - Live Demo";
?>

6.0 Put Container Tags

We will have the following code inside the “body” tag of our code in section 4.0

<div class="container">
	<div class='col-lg-12'>
	<?php echo "<h1 class='page-header'>{$page_title}</h1>"; ?>
	</div>
</div>

7.0 Get Google+ ID

This defines which Google+ page of profile the data will come from. Put the following code inside the col-lg-12 div tag on section 6.0.

$gplus_id=isset($_GET['gplus_id']) ? $_GET['gplus_id'] : "GooglePlusDevelopers";

8.0 Require Google Libraries and Instantiate Classes

Create “libs/php/” directory. Download the Google APIs Client Library for PHP. Extract and copy the files to your “libs/php/” directory. Put the following code below section 7.0 code.

require_once 'libs/php/google-api-php-client/src/Google/autoload.php';
require_once 'libs/php/google-api-php-client/src/Google/Service/Plus.php';

$client = new Google_Client();
$client->setDeveloperKey("CHANGE_TO_YOUR_KEY");

$plus = new Google_Service_Plus($client);
$activities = $plus->activities->listActivities("+".$gplus_id, "public");

9.0 Retrieve Google+ Posts

$items=$activities['modelData']['items'];
include_once "items_template.php";

10.0 Create items_template.php

Section 9.0 will not work without items_template.php, create this file. It will have the following code.

foreach($items as $item){

}

11.0 Set Needed Variables

Inside the foreach loop of section 10.0, put the following code.

$profile_photo=$item['actor']['image']['url'];
$profile_link=$item['actor']['url'];
$page_name=$item['actor']['displayName'];
$verb=$item['verb'];
$link=$item['url'];
$content=$item['object']['content'];
$object_type=isset($item['object']['attachments'][0]['objectType']) ? $item['object']['attachments'][0]['objectType'] : "";
$object_display_name=isset($item['object']['attachments'][0]['displayName']) ? $item['object']['attachments'][0]['displayName'] : "";

$content_image=isset($item['object']['attachments'][0]['fullImage']['url']) ? $item['object']['attachments'][0]['fullImage']['url'] : "";

$replies_count=$item['object']['replies']['totalItems'];
$plusoners_count=$item['object']['plusoners']['totalItems'];

$created_time=$item['published'];
$converted_date_time = date( 'Y-m-d H:i:s', strtotime($created_time));

12.0 Format And Show Values To User

Put the following code below the code on section 11.0, this will show the formatted values of a Google+ post.

echo "<div class='item_box'>";
	echo "<div class='row'>";
	
		// left side
		echo "<div class='col-md-4'>";
			echo "<div class='profile-info'>";
				// SHOW PROFILE INFO HERE
			echo "</div>"; // end 'profile-info'
			
			echo "<p class='profile-message'>";
				// SHOW POST MESSAGE
			echo "</p>";
		echo "</div>"; // end left side 'col-md-4'
		
		// right side
		echo "<div class='col-md-8'>";
		
			echo "<a href='{$link}' target='_blank' class='post-link'>";
				
				echo "<div class='post-content'>";
					// SHOW POST CONTENT
				echo "</div>"; // end 'post-content'
			echo "</a>"; // end 'post-link'
			
			
			echo "<div class='like-count-sum post-content' style='padding:.3em; margin:1em 0; background-color:#eeeeee;'>";
				// SHOW +1 & COMMENTS COUNT
			echo "</div>"; // end 'like-count-sum'
			
			
		echo "</div>"; // end right side 'col-md-8'
		
	echo "</div>"; // end 'row'
	
	echo "<hr />";
echo "</div>"; // end 'item_box'

13.0 Show Profile Info

Replace // SHOW PROFILE INFO HERE comment (in section 12.0) with the following code.

echo "<div class='profile-photo'>";
	echo "<img src='{$profile_photo}' />";
echo "</div>"; // end 'profile-photo'

echo "<div class='profile-name'>";
	echo "<div>";
		echo "<a href='{$profile_link}' target='_blank' style='font-weight:bold; color:#000000;'>{$page_name}</a> ";
		if($verb=="post"){ 
			echo "shared a post";
		}
		
		// it is a reshare
		if($verb=="share"){ 
			echo "reshared a <a href='{$link}' target='_blank'>post</a>";
		}							
	echo "</div>";
	echo "<div class='time-ago'>{$converted_date_time}</div>";
echo "</div>"; // end 'profile-name'

14.0 Show Post Message

Replace // SHOW POST MESSAGE comment (in section 12.0) with the following code.

echo isset($item['annotation']) ? "<div class='post-message'>{$item['annotation']}</div><hr />" : "";
echo isset($item['object']['content']) ? "<div class='post-message'>{$item['object']['content']}</div>" : "";

15.0 Show Post Content

Replace // SHOW POST CONTENT comment (in section 12.0) with the following code.


// normal post
if(!empty($content_image)){
	echo "<img src='{$content_image}' />";
}

// if content is an album
if($object_type=="album"){
	foreach($item['object']['attachments'][0]['thumbnails'] as $thumbnail){
		echo "<img src='{$thumbnail['image']['url']}' style='width:49%; float:left; margin:2px;' />";
	}
}

// if content is a video
if($object_type=="video"){
	echo "<img src='{$item['object']['attachments'][0]['image']['url']}' />";
}

// if content is an event
if($object_type=="event"){
	echo "<div class='post-status'>View on Google+</div>";
}

// if content is an activity
if($object_type=="article"){
	echo "<div class='post-status'>{$object_display_name}</div>";
}

// if not attachments was set
if(!isset($item['object']['attachments'])){
	echo "<div class='post-status'>View on Google+</div>";
}

16.0 Show +1 & Comments Count

Replace // SHOW +1 & COMMENTS COUNT comment (in section 12.0) with the following code.

echo "<div style='float:left; margin:0 .6em 0 0;'>";
	echo "<span class='glyphicon glyphicon-thumbs-up'></span> {$plusoners_count}";
echo "</div>";

echo "<div style='float:left; margin:0 .6em 0 0;'>";
	echo "<span class='glyphicon glyphicon-comment'></span> {$replies_count}";
echo "</div>";

17.0 Put Custom CSS

Put the following code in before the ending head tag of index.php

<style>
.profile-info{
	overflow:hidden;
}

.profile-photo{
	float:left;
	margin:0 .5em 0 0;
}

.profile-photo img{
	width:40px; height:40px;
}

.profile-name{
	float:left;
	width:85%;
}

.time-ago{
	color:#999;
}

.profile-message{
	margin:1em 0;
}

.post-link{
	text-decoration:none;
}

.post-content{
	background: #f6f7f9; border: 1px solid #d3dae8; overflow:hidden;
}

.post-content img{
	width:100%;
}

.post-status{
	margin:.5em; font-weight:bold;
}

.post-picture{
	width:25%; float:left;
}

.post-info{
	width:70%; float:left; margin:.5em;
}

.post-info-name{
	font-weight:bold;
}

.post-info-description{
	color:#999;
}
</style>

18.0 Download The Source Code

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the:

✔ Value or skill upgrade it can bring you, or YES
✔ Income you can get from your website project or business. YES
✔ Precious time you save. YES
✔ Expert advice you can get from me, just in case you have any questions with the code. YES

For a limited time, I will give you the source code for a low price. DOWNLOAD THE SOURCE CODE LEVEL you desire by clicking its the BUY button below.

18.1 Download LEVEL 1 Source Code

FEATURES LEVEL 1
Works with Google+ page or profile YES
Specify Google+ ID where to get posts YES
Show Google+ profile pic in posts YES
Show Google+ profile name in posts YES
Google+ profile name has link to Google+ profile YES
Show post date YES
Show photo thumbnails in albums object type YES
Links in posts are clickable YES
Hashtags in posts are clickable YES
Identify if a post is a share or reshare YES
Bootstrap enabled YES
Show post annotation and object content YES
Show +1s count YES
Show comments count YES
Bootstrap enabled YES
Mobile friendly YES
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

18.2 Download The LEVEL 2 Source Code

FEATURES LEVEL 2
All features of the LEVEL 1 source code YES
Show post date in “Time ago” format YES
+1, comment and re-share counts has comma-separated format YES
Show reshare count YES
Identify post object types: album, photo, video, article, event or note. YES
Show which object type was reshared: album, photo, video, article, event or note. YES
Timeline view YES
Different icons for each object types in timeline view YES
Free email support for 6 months. Yes
Free source code updates. Yes
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Do you need more reasons to download it?

MORE REASONS TO GET IT
Buy only once, use on unlimited number of websites and Google+ accounts! YES
No different kind of licenses. YES
No many different pricing schemes. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Google+ feed. YES
No need for codes from other websites. YES
You can learn more how to code, I love teaching and can give you free tips! YES
Familiarize yourself with the Google+ API. YES
Tutorial is always updated, and you get it for free. YES
Completely customizable. YES

Thank you for supporting our projects here at codeofaninja.com!

19.0 Do You Want a Demo?

If you want a demo to see if this will work with your own Google+ account, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please provide your Google+ link on the message, thanks!

20.0 Social Media Scripts – LEVEL 3 – PRO PACK

Social Media Scripts - LEVEL 3 - PRO PACK
ITEM Original Cost LEVEL 3 PRO PACK
Display Facebook EVENTS on Website $49.99 YES
Display Facebook PHOTOS on Website $49.99 YES
Display Facebook VIDEOS on Website $49.99 YES
Display Facebook FEED on Website $49.99 YES
Display Instagram FEED On Your Website $49.99 YES
BONUS! The following script does not have LEVEL 3, only LEVEL 2. We will give them to you as bonus.
Display Twitter FEED on Website $29.99 YES
Display Google+ FEED on Website $29.99 YES
BUY TO DOWNLOAD PRO PACK NOW FOR ONLY $309.93 $198

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Read more about this package.

21.0 Related Source Codes

Did you know that you can also display other social media data on your website? I’ve created tutorials on them too, see the following:

Social Media Script Tutorials
Display Facebook EVENTS on Website
Display Facebook PHOTOS on Website
Display Facebook VIDEOS on Website
Display Facebook TIMELINE on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

22.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

  • 1. Subscribe to social media scripts tutorial news and updates.
  • 2. Be updated about what works and what does not work on social media APIs.
  • 3. Be notified for any related social media API updates.
100% Privacy. We will never spam you!

#3 Thank You!

Thank you for reading our tutorial on how to display Google+ feed on website using PHP!