Live Demo – WP function – DSM Facebook Videos WP Plugin

The following videos are displayed using our DSM Facebook Videos WordPress Plugin. Videos below were pulled from this Facebook page videos.

DSM Facebook Video WordPress Plugin – Customize Facebook Videos Display

dsm-facebook-videos-wordpress-plugin
In this post, you will learn how to use the DSM Facebook Video WordPress Plugin. In other words, we will pull the list of videos from your Facebook page and display it to your website. It can be your WordPress site or your client’s WordPress site. Our WordPress plugin will be used to achieve this output.

The WP plugin’s source code is based on one of our popular blog post: How To Display Facebook VIDEOS on Website? I decided to make a WordPress plugin version of that code because many people are requesting it. So here’s what I came up with.

Contents of this post include:

1.0 Overview
2.0 Feature Details & Download
3.0 Feature Screenshots
4.0 How To Use?
5.0 Live Demos
6.0 What People Say
7.0 Related WordPress Plugins
8.0 Some Notes

1.0 Overview

You or your client is using Videos on Facebook? Don’t miss the opportunity to display it on your WordPress site! Our WordPress plugin can help you with that.

Through our WordPress plugin, we can display your videos from a Facebook page to your website. Automatically. In real-time. Your site will have an ‘instant’ videos for your customers or audience.

Once you create, edit or delete a video on Facebook, your website will be updated as well. Facebook videos will be displayed as grid items with thumbnails. How cool is that?

On more thing, did you know that your can control the look & feel of your Facebook videos on your website? You surely can! Our WordPress plugin has this settings dashboard where you can control colors like background colors, button color, font color and more!

On the next section, let’s take a closer look at the feature details of our DSM Facebook Videos WordPress Plugin – PRO Version!

2.0 Feature Details & Download

FEATURES OUR WORDPRESS PLUGIN CAN DO IT
Save Your Precious Time
Manage videos for both of your Facebook Page and website – only once! YES
Save time figuring out and coding these features on your website YES
Display Videos
Display thumbnails of each video YES
Display title or description of each video YES
Display number of likes of each video YES
Display number of comments of each video YES
Display clickable link to actual video on Facebook YES
Display icons for number of likes, comments and link. YES
Display same width and height of each video thumbnail (grid style) YES
Display play button on top of each video thumbnail YES
Responsive video list – viewable in mobile, tablet and desktop YES
Clickable grid items to play video and show related data YES
Load more videos without page refresh (infinite scroll) YES
Display loading animation while loading more videos YES
Display One Video
Display back to videos button YES
Display video with clickable controls such as play, pause, volume, full-screen, etc. YES
Display video title (if available) YES
Display video’s number of likes YES
Display video’s number of comments YES
Display when the video was posted (time ago format) YES
Display clickable link to actual album on Facebook YES
Display video description YES
Display some liker’s name YES
Display icons for likes, comments, link and description. YES
Make links clickable YES
Display comments YES
Display commentator’s name with link to their Facebook account YES
Display each comment’s number of likes YES
Load and display more comments without page refresh YES
Display comment replies or respondents YES
Display respondent’s name with link to their Facebook account YES
Display each reply’s number of likes YES
Load and display more replies without page refresh YES
Responsive video – viewable in mobile, tablet and desktop YES
Look & Feel Customization
Our plugin’s settings can be found in WordPress Settings > DSM Facebook Videos YES
Specify Facebook page name or ID YES
Specify number of videos shown by default YES
Specify excluded videos by video ID YES
Choose background color YES
Choose text color YES
Choose icon color YES
Choose link color YES
Choose button background color YES
Choose button text color YES
Easily choose colors with color picker YES
Specify umber of comments shown by default YES
Specify number of replies shown by default YES
Show or hide like count YES
Show or hide comment count YES
Show or hide link to Facebook YES
Show or hide link comments YES
Updates and Support
Free plugin updates for 2 years YES
Fast and friendly email support for 1 year YES
DSM FACEBOOK VIDEOS WORDPRESS PLUGIN
BUY TO DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

Do you need more reasons to download our WordPress plugin?

MORE REASONS TO GET DSM FACEBOOK VIDEOS WORDPRESS PLUGIN
Buy only once, use up to 3 websites and Facebook pages! YES
No different kind of licenses. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Facebook videos. YES
No need for codes from other websites. YES
Completely customizable. YES

3.0 Feature Screenshots

The following are some of the features in screenshot with small descriptions. Aside from this, you can always view the live demo of our output in section 5.0 below.

Please note that the following are just output preview. New features might be added or released already – the very moment you read this.

3.1 Show List Of Videos From A Facebook Page

List the videos from your Facebook page in grid view. This is responsive.
dsm facebook videos wordpress plugin display list of videos

3.2 Display One Video With Its Details

Details include number of likes and comments, comments, comment replies and more.
dsm facebook videos wordpress plugin display single video with details

3.3 Control The Look & Feel Of You Facebook Videos

This is where you control the look and feel of your Facebook videos on your website.
dsm facebook videos wordpress plugin admin dashbaord control look and fee

4.0 How To Use?

How to use DSM Facebook Videos WordPress Plugin? You only need 5 easy steps.

4.1 Basic Use

1. Download our plugin.
2. Upload our plugin to your WordPress site.
3. Go to WordPress Settings > DSM Facebook Videos to Customize settings.
4. Put shortcode to your Facebook page, post or widget. The shortcode is:

[[dsm_facebook_videos]]

5. Hit save button.

4.2 How to display only one video from Facebook?

1. Go to the album your desire in Facebook.
2. Take a look at the URL in your browser, it looks like the following.

https://www.facebook.com/katyperry/videos/10153630739701466/

3. Get the album ID from that URL. Looking at the example URL above, it is 10153630739701466
4. Use the shortcode in the following format.

[[dsm_facebook_videos single_video="yes" video_id="10153630739701466"]]

As you can see, we added some parameters:

single_video=”yes”
video_id=”1220347914657493″ (the album_id we got earlier)

Congratulations! You just displayed videos from Facebook to your website.

5.0 Live Demos

Enjoy the following live demo of our DSM Facebook Videos WordPress plugin.

6.0 What People Say?

Here’s what people say on our social media products.

★★★★★ “Hi Mr. Dalisay, My name is Clinton and I’m a front end designer. I purchased two (Facebook) scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects.”

Clinton Moore
Web Developer & Owner, Netchanics

★★★★★ “This guy is the best. There was a small issue and he helped me right away. I recommend this (Facebook Feed) script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time.”

Aykun Cetinkaya
Media Representative, LinkedIn Profile

★★★★★ “Just wanted to say thank you. Just purchased the (Social) Script PRO Pack today not too long ago and modified it a bit to make it a dark theme and it’s working great. It saved me A LOT of time! Thank you!!!!!!!”

Daniel Mort
Web Developer & Owner, Morthub

7.0 Related WordPress Plugins

8.0 Some Notes

Need support? Have a feature request? Don’t hesitate to send me an email about it. My email address is mike@codeofaninja.com.

Live Demo – Display Facebook Video on WordPress Post – DSM Facebook Video WordPress Plugin

The following videos were displayed using our DSM Facebook Videos WordPress Plugin. Videos below were pulled from this Facebook page videos.

[dsm_facebook_videos]

Live Demo – WP Post – DSM Facebook Events WordPress Plugin

The following Facebook events are from this Facebook page. It was displayed in this WordPress post using our DSM Facebook Events WordPress Plugin

Shortcode used:

[[dsm_facebook_events page=”CelebrityTheatre”]]

[dsm_facebook_events page=”CelebrityTheatre”]

How to Show Facebook Photos on WordPress Site?

dsm-facebook-photos-wordpress-plugin

In this post, you will learn how to show Facebook photo gallery on WordPress site. It can be your WordPress site or your client’s WordPress site. Our WordPress plugin will be used to achieve this output.

The WP plugin’s source code is based on one of our most popular blog post: How To Display Facebook PHOTOS on Website? I decided to make a WordPress plugin version of that code because many people are requesting it. So here’s what I came up with.

Contents of this post include:

1.0 Overview
2.0 Feature Details & Download
3.0 Feature Screenshots
4.0 How To Use?
5.0 Live Demos
6.0 What People Say
7.0 Related WordPress Plugins
8.0 Some Notes

1.0 Overview

You or your client is using Photos on Facebook? Don’t miss the opportunity to display it on your WordPress site! Our WordPress plugin can help you with that.

Through our WordPress plugin, we can display your Photo albums and photos from a Facebook page to your website. Automatically. In real-time. Your site will have an ‘instant’ photos for your customers.

Once you create, edit or delete a photo album or photo on Facebook, your website will be updated as well. Facebook photo gallery will be displayed as grid items with thumbnails. How cool is that?

On more thing, did you know that your can control the look & feel of your Facebook photo gallery on your website? You surely can! Our WordPress plugin has this settings dashboard where you can control colors like background colors, button color, font color and more!

On the next section, let’s take a closer look at the feature details of our DSM Facebook Photos WordPress Plugin – PRO Version!

2.0 Feature Details & Download

FEATURES OUR WORDPRESS PLUGIN CAN DO IT
Save Your Precious Time
Manage photo albums and photos for your Facebook Page and website once YES
Save time figuring out and coding these features on your website YES
Display Photo Albums
Display cover photo of each album YES
Display photo album title YES
Display number of photos in each album YES
Display number of likes in each album YES
Display number of comments YES
Display clickable link to actual album on Facebook YES
Display icons for number of photos, likes, comments and link. YES
Display same width and height of each photo album (grid style) YES
Responsive photo albums – viewable in mobile, tablet and desktop YES
Clickable grid items to show photos inside that clicked photo album YES
Load more photo albums without page refresh (infinite scroll) YES
Display loading animation while loading more photo albums YES
Display Photos Inside An Album
Display back to albums button YES
Display photo album title YES
Display number of photos in the album YES
Display number of likes in the album YES
Display number of comments in the album YES
Display clickable link to actual album on Facebook YES
Display album description YES
Clickable Facebook mentions YES
Make links clickable YES
Display icons for number of photos, likes, comments, link and description. YES
Display share buttons: Facebook, Twitter, Google+ YES
Display photo’s thumbnails YES
Display same width and height of each photos (grid style) YES
Responsive photo albums – viewable in mobile, tablet and desktop YES
Display photo’s number of likes YES
Display photo’s number of comments YES
Display photo’s clickable link to actual photo on Facebook YES
Clickable photo thumbnail to show full image in a lightbox YES
Display photo’s number of likes, comments, Facebook link and description in lightbox. YES
Load more photos without page refresh (infinite scroll) YES
Display loading animation while loading more photos YES
Display photos from one album only, audience won’t see other albums. YES
Look & Feel Customization
Our plugin’s settings can be found in WordPress Settings > DSM Facebook Photos YES
Specify Facebook page name or ID YES
Choose photo size (small, medium or large) YES
Specify number of grid items shown by default YES
Specify excluded albums or albums you don’t want to be displayed YES
Choose background color YES
Choose text color YES
Choose icon color YES
Choose button background color YES
Choose button text color YES
Easily choose colors with color picker YES
Updates and Support
Free plugin updates for 2 years YES
Fast and friendly email support for 1 year YES
DSM FACEBOOK PHOTOS WORDPRESS PLUGIN
BUY TO DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

Do you need more reasons to download our WordPress plugin?

MORE REASONS TO GET DSM FACEBOOK PHOTOS WORDPRESS PLUGIN
Buy only once, use up to 3 websites and Facebook pages! YES
No different kind of licenses. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Facebook photos. YES
No need for codes from other websites. YES
Completely customizable. YES

3.0 Feature Screenshots

The following are some of the features in screenshot with small descriptions. Aside from this, you can always view the live demo of our output in section 7.0 below.

3.1 Show Photo Albums From Facebook

dsm-fb-photos-photo-albums

3.2 Display Photos Inside An Album

dsm-fb-photos-photos-inside-an-album

3.3 Display Full Image When A Photo Was Clicked

dsm-fb-photos-lightbox

3.4 Settings Dashboard

This is where you control the look and feel of your Facebook photos on your website.

dsm-fb-photos-pro-settings

4.0 How To Use?

How to use DSM Facebook Photos WordPress Plugin? You only need 5 easy steps.

4.1 Basic Use

1. Download our plugin.
2. Upload our plugin to your WordPress site.
3. Go to WordPress Settings > DSM Facebook Photos to Customize settings.
4. Put shortcode to your Facebook page, post or widget. The shortcode is:

[[dsm_facebook_photos]]

5. Hit save button.

4.2 How to display photos from single photo album?

1. Go to the album your desire in Facebook.
2. Take a look at the URL in your browser, it looks like the following.

https://www.facebook.com/Lamborghini/photos/?tab=album&album_id=1220347914657493

3. Get the album_id from that URL. Looking at the example URL above, it is 1220347914657493
4. Use the shortcode in the following format.

[[dsm_facebook_photos single_album="yes" album_id="1220347914657493"]]

As you can see, we added some parameters:

single_album=”yes”
album_id=”1220347914657493″ (the album_id we got earlier)

Congratulations! You just displayed photos from Facebook to your website.

5.0 Live Demos

Enjoy the following live demo of our DSM Facebook Photos WordPress plugin.

6.0 What People Say?

Here’s what people say on our social media products.

★★★★★ “Hi Mr. Dalisay, My name is Clinton and I’m a front end designer. I purchased two (Facebook) scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects.”

Clinton Moore
Web Developer & Owner, Netchanics

★★★★★ “This guy is the best. There was a small issue and he helped me right away. I recommend this (Facebook Feed) script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time.”

Aykun Cetinkaya
Media Representative, LinkedIn Profile

★★★★★ “Just wanted to say thank you. Just purchased the (Social) Script PRO Pack today not too long ago and modified it a bit to make it a dark theme and it’s working great. It saved me A LOT of time! Thank you!!!!!!!”

Daniel Mort
Web Developer & Owner, Morthub

7.0 Related WordPress Plugins

8.0 Some Notes

Need support? Have a feature request? Don’t hesitate to send me an email about it. My email address is mike@codeofaninja.com.

Download The Social Media Scripts – LEVEL 3 – PRO PACK

social media script level 3 pro pack
Here in codeofaninja.com, we work hard to produce scripts that works – scripts that are truly useful for your projects or business.

Downloading this LEVEL 3 PRO PACK now will give you the same features and quality support as if you buy them one by one. The only difference is you get a huge discount.

This pack contains five LEVEL 3 social media scripts we have. If you will buy them all one by one, it will cost you $249.95.

But, if you will download this pack, it will be $198 only. You just saved $51.95!

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
BUY LEVEL 3 PRO PACK NOW USING
* You can use your debit or credit card with PayPal.

Not convinced?

If you will buy our LEVEL 3 PRO PACK now, you will get two LEVEL 2 scripts as well! These scripts are worth another $59.98 and you get it at no extra cost!

This time, instead of spending $309.93, you still get it for $198. You just saved $111.93!

Get these scripts as well!
ITEM Original Cost LEVEL 3 PRO PACK
Display Twitter FEED on Website $29.99 YES
Display Google+ FEED on Website $29.99 YES
BUY LEVEL 3 PRO PACK NOW USING
* You can use your debit or credit card with PayPal.

What People Say About Our Social Media Scripts?

★★★★★ “Hi Mr. Dalisay, My name is Clinton and I’m a front end designer. I purchased two (Facebook) scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects.”

Clinton Moore
Web Developer & Owner, Netchanics

★★★★★ “This guy is the best. There was a small issue and he helped me right away. I recommend this (Facebook Feed) script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time.”

Aykun Cetinkaya
Media Representative, LinkedIn Profile

★★★★★ “Just wanted to say thank you. Just purchased the (Social) Script PRO Pack today not too long ago and modified it a bit to make it a dark theme and it’s working great. It saved me A LOT of time! Thank you!!!!!!!”

Daniel Mort
Web Developer & Owner, Morthub

Are you a previous buyer?

If you previously bought any scripts here in codeofaninja.com, we’ll give you another 15% off today!

Just send me an email (mike@codeofaninja.com) with a subject “DISCOUNT REQUEST: Social Media Scripts – LEVEL 3 – PRO PACK” and I’ll reply with the discount code.

You don’t like to code? No problem!

You demanded it, we built it. A lot of people requested a website plugin version of our social media scripts. Now it is available. It works no matter what website platform you use. We have tried it in WordPress, Squarespace, Wix and more. 

Thank you for supporting codeofaninja.com!

If you have any questions or if there’s anything else I can help you with, please do not hesitate to send me an email. My email address is mike@codeofaninja.com

You can use the comment box below as well.

How to Show Facebook Events on WordPress Site?

dsm-facebook-events-wordpress-plugin
In this post, you will learn how to show Facebook events on WordPress site. Our WordPress plugin will be used to achieve this output.

The WP plugin’s source code is based on one of our most popular blog post: How To Display Facebook EVENTS on Website? I decided to make a WordPress plugin version of that code because many people are requesting it. So here’s what I came up with.

Contents of this post include:

1.0 Overview
2.0 Feature Details & Download
3.0 Feature Screenshots
4.0 How To Use?
5.0 Live Demos
6.0 What People Say
7.0 Related WordPress Plugins
8.0 Some Notes

1.0 Overview

You or your client is using Events on Facebook? Don’t miss the opportunity to display it on your WordPress site! Our WordPress plugin can help you with that.

Through our WordPress plugin, we can display your Events from Facebook to your website. Automatically. In real-time. Your site will have an ‘instant’ events information for your customers.

Once you create or edit an event on Facebook, your website will be updated as well. Facebook events will be displayed as list view and calendar view. How cool is that?

On more thing, did you know that your can control the look & feel of Facebook events on your website? You surely can! Our WordPress plugin has this settings dashboard where you can control colors like background colors, button color, font color and more!

On the next section, let’s take a closer look at the feature details of our DSM Facebook events WordPress Plugin – PRO Version!

2.0 Feature Details & Download

FEATURES OUR WORDPRESS PLUGIN CAN DO IT
Save Your Precious Time
Manage events for your Facebook Page and website once YES
Save time figuring out and coding these features on your website YES
Display events from multiple Facebook pages YES
Display events by date YES
Display List of Upcoming Events
Display event cover photo (profile picture if none) YES
Display event title YES
Display event location YES
Display link to view full map YES
Display event date and time YES
Display button to read ‘More Details’ about the event YES
Display button link to ‘Get Tickets’ (if set) YES
Display events from multiple Facebook pages in one feed YES
When ‘More Details’ Button Was Clicked
Load more details about the event without page refresh YES
Display loading animation while loading more details of event YES
Display loaded event details below the clicked event YES
Display full image of event YES
Display full title of event YES
Display host of event, with link to its Facebook page YES
Display date and time of event YES
Display location of event with Google map YES
Display description of event YES
Display link of event to Facebook YES
Display each event section with font-awesome icons YES
‘More Details’ button becomes ‘Close Details’ button with (x) icon YES
Clicking ‘Close Details’ button will hide event ‘more details’ YES
No need to reload event ‘more details’ again when it was already loaded YES
No need to reload list when ‘Upcoming’ tab was clicked again YES
Display List of Past Events
Display loading animation when ‘Past’ tab was clicked YES
All display features above of upcoming events are the same with past events YES
No need to reload list when ‘Past’ tab was clicked again YES
Calendar View
Display loading animation when ‘Calendar’ tab was clicked YES
Display current month by default YES
Display previous month button with icon YES
Display loading animation when previous month button was clicked YES
Display previous month events YES
Display next month button with icon YES
Display loading animation when next month button was clicked YES
Display next month events YES
Display calendar of events from multiple Facebook pages YES
Highlight calendar dates with Facebook events YES
Clicking a calendar event will display loading animation below the calendar YES
Display event details of clicked calendar date YES
Can display event details of one or more in one calendar date YES
Display features of calendar event details are the same with upcoming events above YES
No need to reload calendar view when ‘Calendar’ tab was clicked again YES
Responsive
Changes tabs to drop down options when viewed on mobile YES
Changes layout of upcoming and past event items on mobile YES
Calendar still viewable and clickable in mobile YES
Customize Look & Feel of your Facebook Events
Our plugin’s settings can be found in WordPress Settings > DSM Facebook Events YES
Choose your event background color YES
Choose your event text color YES
Choose your highlight background color YES
Choose your highlight text color YES
Choose your button background color YES
Choose your button text color YES
Choose your border color YES
Easily choose colors with color picker YES
Updates and Support
Free plugin updates for 2 years YES
Fast and friendly email support for 1 year YES
DSM FACEBOOK EVENTS WORDPRESS PLUGIN
BUY TO DOWNLOAD NOW!
Use for up to 3 websites or projects.
Use for up to 10 websites or projects.
Use for UNLIMITED websites or projects.
* You can use your debit or credit card with PayPal.

Do you need more reasons to download our WordPress plugin?

MORE REASONS TO GET DSM FACEBOOK EVENTS WORDPRESS PLUGIN
No different kind of licenses. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Facebook events. YES
No need for codes from other websites. YES
Completely customizable. YES

3.0 Feature Screenshots

The following are some of the features in screenshot with small descriptions. Aside from this, you can always view the live demo of our output in section 7.0 below.

3.1 Show Upcoming Events

Our WordPress plugin can show list of upcoming events. Clicking the ‘More Details’ button will show you more details above the event.

dsm-facebook-events-upcoming-events-wordpress-plugin

3.2 Show Past Events

Our WordPress plugin can show list of past events.

dsm-facebook-events-past-events-wordpress-plugin

3.3 Responsive Layout Of Events

Events are still viewable even in mobile.

dsm-facebook-events-wordpress-plugin-responsive-cards

3.4 Calendar Of Events

Your customers can easily know your events on the current month, next month and even previous months! Clicking a date will show you more details about the event.

dsm-facebook-events-calendar-of-events-wordpress-plugin

3.5 Responsive Tabs

Tabs becomes drop down in mobile view.

dsm-facebook-events-wordpress-plugin-responsive-tabs

3.6 Settings Dashboard

This is where you control the look and feel of your Facebook events on your website.

dsm-facebook-events-wordpress-plugin-settings-dashboard

4.0 How To Use?

4.1 How to use DSM Facebook Events WordPress Plugin? You only need 5 easy steps.

1. Download our plugin.
2. Upload our plugin to your WordPress site.
3. Go to WordPress Settings > DSM Facebook Events to Customize settings.
4. Put shortcode to your Facebook page, post or widget. The shortcode is:

[[dsm_facebook_events]]

5. Hit save button.

4.2 How to display events from multiple Facebook pages? Your shortcode will look like the following.

[[dsm_facebook_events page="Museums.Sheffield,Echostage"]]

4.3 How to display events from multiple Facebook pages and by date? Your shortcode will look like the following.

[[dsm_facebook_events page="Museums.Sheffield,Echostage" date="2016-10-20"]]

4.4 How to display only one event from Facebook?
1. Get the event’s ID. How? Go to the Facebook event link and get the number part on the URL.

For example:

https://www.facebook.com/events/1586444591653799/

2. Use the shortcode that looks like the following.

[[dsm_facebook_events event_id="1586444591653799"]]

4.5 How to display calendar view by default?
Use the shortcode that looks like the following.

[[dsm_facebook_events page="CelebrityTheatre" view="calendar"]]

4.6 How to display past events by default?
Use the shortcode that looks like the following.

[[dsm_facebook_events page="CelebrityTheatre" view="past"]]

 

4.7 How to display upcoming events with simple layout?
If you want the upcoming events to be shown in a simple view, use the shortcode that looks like the following.

[[dsm_facebook_events layout="simple" tabs="no" all_events_link="https://www.yourwebsite.com/events/"]]

The “all_events_link” parameter is used to render an “All Events” link at the end of the events list.

Congratulations! You just displayed Facebook events to your website.

7.0 Live Demos

Enjoy the following live demo of our DSM Facebook Events WordPress plugin.

6.0 What People Say?

Here’s what people say on our social media products.

★★★★★ “Hi Mr. Dalisay, My name is Clinton and I’m a front end designer. I purchased two (Facebook) scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects.”

Clinton Moore
Web Developer & Owner, Netchanics

★★★★★ “This guy is the best. There was a small issue and he helped me right away. I recommend this (Facebook Feed) script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time.”

Aykun Cetinkaya
Media Representative, LinkedIn Profile

★★★★★ “Just wanted to say thank you. Just purchased the (Social) Script PRO Pack today not too long ago and modified it a bit to make it a dark theme and it’s working great. It saved me A LOT of time! Thank you!!!!!!!”

Daniel Mort
Web Developer & Owner, Morthub

7.0 Related WordPress Plugins

8.0 Some Notes

Need support? Have a feature request? Don’t hesitate to send me an email about it. My email address is mike@codeofaninja.com.

display-google-plus-posts-on-website

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

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
Download Now

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 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!