How To Display Google Plus Posts On Website? 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, orYES
✔ 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 The LEVEL 1 Source Code

FEATURESLEVEL 1
Works with Google+ page or profileYES
Specify Google+ ID where to get postsYES
Show Google+ profile pic in postsYES
Show Google+ profile name in postsYES
Google+ profile name has link to Google+ profileYES
Show post dateYES
Show photo thumbnails in albums object typeYES
Links in posts are clickableYES
Hashtags in posts are clickableYES
Identify if a post is a share or reshareYES
Bootstrap enabledYES
Show post annotation and object contentYES
Show +1s countYES
Show comments countYES
Bootstrap enabledYES
Mobile friendlyYES
LEVEL 1: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

18.2 Download The LEVEL 2 Source Code

FEATURESLEVEL 2
All features of the LEVEL 1 source codeYES
Show post date in “Time ago” formatYES
+1, comment and re-share counts has comma-separated formatYES
Show reshare countYES
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 viewYES
Different icons for each object types in timeline viewYES
LEVEL 2: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

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
ITEMOriginal CostLEVEL 3 PRO PACK
Display Facebook EVENTS on Website$49.99YES
Display Facebook PHOTOS on Website$49.99YES
Display Facebook VIDEOS on Website$49.99YES
Display Facebook FEED on Website$49.99YES
Display Instagram FEED On Your Website$49.99YES
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.99YES
Display Google+ FEED on Website$29.99YES
BUY TO DOWNLOAD LEVEL 3 PRO PACK NOW USING
Read more about this package. * You can use your debit or credit card with PayPal.

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!