Showing posts with label Google Plus. Show all posts
Showing posts with label Google Plus. Show all posts

How to embed a Google+ post into your blog post or website - and what happens when you do

This article explains how you can put a Google+ post (your own or someone else's) into your blog or website, provide the post was shared publicly on Google+.



Recently, Google+ announced a couple of new features.   One of them, embeddable posts, has a lot of potential for bloggers.


Look what s/he said on Google+

Embedding a Google+ post into a blog post is an example of the "look what he/she/I said over there" approach to linking blogs and social-networking sites.

It gives people who are reading your blog up-to-date information about how many other people have plus-1'd the linked content, and an easy way to interact with it "over there" themselves - without leaving your blog.


Why would you want to do this?

The short answer: 

Because you want to write about a Google+ post, and give your readers an easy way to +1 it or comment on it without leaving your blog.

The long answer: 

Because blogs are better than social-networking sites for developing ideas your ideas.

Recently CopyBlogger described 8 reasons why blogs and social media tools (especially Google+) are complementary. He makes excellent points.  But I think he glosses over one fundamental issue: social media posts are short, and give you limited control over their formatting.   Blog posts can be (and usually are) longer, including several pictures, several ideas - and they are constructed to show the connections between the pieces.  They let you develop a case, discuss, compare and contrast - and all the other types of writing that you learned in school.    And as we all learned in school, presentation matters. Showing a picture of what you're writing about gets you better "marks" and more positive feedback.

So - embedding a Google+ post which you're writing, rather than just describing it, makes a blog post far more interesting.

And because they're embedded rather than just shown as a screenshot, these types of Google+ posts get updated +1 counts and comments, without your readers having to leave your blog.



How to put a Google+ post into your blog


Log into your Google+ account - or simply follow a link that someone else gives you, and view a public Google Plus post - this can be from either a personal profile or a Google+ page.


When you are looking at a G+ post that you want to put into a blog or website, click on the drop-down menu in the top right corner.





If the post is public, then there will be an Embed option in the menu-list.   Choose Embed.


Copy the code that is shown, and put it into a post or gadget the same way you would install any other 3rd party code.



OPTIONAL:
If you have already got a plus+1 button anywhere on your blog, you can leave out the first part of the code, ie:
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
However it doesn't hurt (except very slightly in terms of speed page-load speed) to leave it in.


Customizing the code:

The code that Google give you looks like this:
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the widget to render. -->
<div class="g-post" data-href="https://plus.google.com/116176459448466735273/posts/cFPSW8FgZ7U"></div>

Obviously there's not a lot you can change.

But it is interesting to see that you don't actually need to use the G+ embed-code-generator; if you know the Google+ ID and the post ID, then you can easily construct the embed code.

Also, provided you don't change Google's formatting of the G+ post, you are free to put the embed code inside a div statement, which lets you do certain formatting things.  For example, to centre-align the embedded post, use code like this:
<div style="clear: both; margin-left: auto; margin-right: auto; text-align: center;">
PUT THE CODE FROM GOOGLE+ HERE
</div>
 


Embedded Google+ posts and the Blogger post-editor

If you put the Google+ embed code into a blog post, the post-editor isn't able to show the Google+ item while you are editing the post.

Instead, you see a gap like this:




And you simply have to be carefully not to accidentally delete the embedded item by typing in the gad or deleting it.  

One way to make this easier is to temporarily put a border around the item's code while you're working on the post, using code like this
<div style="clear: both; margin-left: auto; margin-right: auto; text-align: center; border: 1px dotted black;">PUT THE CODE FROM GOOGLE+ HERE</div> 


What do your readers see


Browser-based visitors

People who see your blog or website in a regular browser will see an embedded Google Plus post looking like this:




But what they see is not just an image: it's a fully-functional Google Plus post, where they can:
  • Plus-one the original post, and see the faces of (some) others who've +1'd it.
  • Follow or un-follow the poster themselves
  • Expand / Collapse the comments.
  • Add to the comments.
  • +1 individual comments



Most of these features are shown even if the read isn't logged in to a Google+ account themselves at the time:   when they go to use the feature, they simply have the Google+   "log in or sign up" screen shown to them in a new page.


Readers who subscribe to your blog using RSS

The experience for people who follow your blog via RSS partly depends on what RSS reader they use.

Someone who is using The Old Reader (my current preferred RSS reader) just sees a gap - and even the dotted line that I have around the above post above isn't showing.


Readers who follow-by-email

Readers who follow your blog by email will post probably not see embedded Google+ posts. Again, I'll update this post in a day or two (after Feedburner has delivered my own subscription) with a report about how it looks in Thunderbird. Readers who use other email clients may have a different experience.



What are the terms and conditions

Every time you get Goolge+ post embed code, there is a reminder that "By embedding Google+ posts, you agree to our policies."

It's possible that these rules will change over time. But you can read today's version here.

And I'm no lawyer, this isn't legal advice - but my interpretation of the current version is:
  • You're not allowed to put Google+ posts on sites that break the Google+ User Content and Conduct Policy.   Eg pages that promote illegal things, have sexually explicit material, or includes malicious code.
  • You must not put Google+ content in ways that amount to bad behaviour, eg bullying or harassment.
  • You cannot put Google+ content inside advertisements "or for other commercial purposes" - this bit is interesting. I've put some Google+ content inside a blog that has advertisements - I wonder if this means I'm breaking the rules?
  • You cannot change the Google+ content or the stuff that Google+ puts around it.
  • You cannot try to find out the identity of users who comment on embedded Google+ content unless they agree to share their identity with you.
  • You cannot use, sell or give other people any data from embedded Google+ content, including any use of pixels, cookies,
  • You give Google permission to review and analyze your website by putting Google+ content on it.

If Google find out that you've broken the rules, they may review and take action, including blocking you from using embedded Google+ content on your website.   (And I'd guess that it won't do good things for your site's search rating either.)


Final thoughts

The elephant in the terms-and-conditions room is, of course, copyright.   But for now I'm assuming that somewhere in Google+'s T&Cs they have a non-exclusive right to display things that their users post, and that this right extends to G+ content that is embedded.   Fingers crossed.


What do you think:  would you be annoyed if I embedded your Google Plus post on my website? 

And is this a feature you will use on your blog?   



Related Articles:


Ways of linking your blog and the social networks

How to put 3rd-party HTML/Javascript into Blogger

Introducing Google+ Pages

How to center items in Blogger

How to show pictures from Google Plus in any website

This article shows how you can make a slideshow of all the photos from an album in your own Google Plus Photo collection, which can be shown on a website or blog.


Sharing a photo album from Google+ Photos

Google's help-pages note that you can share a Google Photos album using a link - and is a good option for showing your photos to people who are outside of Google+.

But what are the options if you want to show a Google Photos album, not just an individual picture, in your blog or website?
  • Put the link in your website. But that just gives bland, boring text, like click here to see my photos.
  • Put one picture in your website, labelled "click this photo to see the rest", and link it to your Google Photos album. But that just shows one photo - and it takes people away from your website when they go to view your photos.
  • Load each photo from the album individually to your website. That's fine for 2-3 or even 10 photos. But what if you've got dozens or even hundreds - it could take hours!

A better option is to use an embedded slideshow.

To do this, you need to get a small piece of HTML code from Google, and put it into your site. Then when someone looks at your site, the code runs and they the see a slideshow made of the photos your album at the current time.   This means that the pictures on the other website are automatically updated when you change the album in Google Photos (eg when you add, change or remove pictures).

Unfortunately there is no tool to make this type of slideshow code in Google Plus Photos at the moment.

But there is was a very simple work-around which gives you get the code that you need, using existing Google tools.

Using Picasa-web-albums to get the slideshow code

If you have loaded pictures into Google Photos, then you can manage them using either Picasa-web-albums (ref: What is Picasa vs PWA?) or Google Photos.

So, to get the embeddable slideshow display code for a photo album:
  • Navigate to the album that you want to make a slideshow for.
    NB  you need to be viewing the album, not the page of all albums, to get the correct code.
  • Make sure that the security for this album is set to at least "anyone with the link".
  • Choose Link to this Slideshow and then Embed album from the right side bar
  • Copy the HTML code that is provided

What your readers see

Readers using a regular web-browser with Flash enabled should see a slideshow of your pictures.

Readers whose device (eg cellphone, tablet) isn't able to show Flash graphics will most likely just see a black square instead of the album - possibly with a message telling them why this is happening.



Related Articles

What are Picsasa and Picasa-web-albums

How to put 3rd party HTML or Javascript into your blog

Understanding Google accounts

Putting a Picasa-web-albums slideshow into a blog post or website