Tutorial: Google Plus

<b>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+.</b><br /><br /><br /><div style="clear: both;"></div><a name="more"></a><br />Recently, Google+ <a href="http://googleplusplatform.blogspot.ie/2013/09/google-attribution-and-embedded-posts.html" target="_blank">announced</a> a couple of new features.   One of them, embeddable posts, has a lot of potential for bloggers.<br /><br /><br /><h2>Look what s/he said on Google+</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl6lNxaO4Pi6aaZYemX6VSY4pkmj59toSVqMQIzm5UbiyNTLLA0EVmPCp_7_zvgTi2ISVo0418wyBddfx9kCwgVgjqXwBwz909-uD6hg50CYGoxROMxjdKj2dnRovg_CzS6Ve1koJDEajt/s604/embed-google-plus-post-on-blogger-easy-code-insertion.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl6lNxaO4Pi6aaZYemX6VSY4pkmj59toSVqMQIzm5UbiyNTLLA0EVmPCp_7_zvgTi2ISVo0418wyBddfx9kCwgVgjqXwBwz909-uD6hg50CYGoxROMxjdKj2dnRovg_CzS6Ve1koJDEajt/s320/embed-google-plus-post-on-blogger-easy-code-insertion.png" width="280" /></a></div>Embedding a Google+ post into a blog post is an example of the "look what he/she/I said over there" approach to <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">linking blogs and social-networking sites</a>.<br /><br />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.<br /><div style="clear: both;"></div><br /><br /><h2>Why would you want to do this?</h2><h3>The short answer: </h3>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.<br /><br /><h3>The long answer: </h3>Because blogs are better than social-networking sites for developing ideas your ideas.<br /><br />Recently <a href="http://www.copyblogger.com/google-plus-sharecropping/" target="_target">CopyBlogger</a> 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.<br /><br />So - embedding a Google+ post which you're writing, rather than just describing it, makes a blog post far more interesting.<br /><br />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.<br /><br /><br /><br /><h2>How to put a Google+ post into your blog</h2><br />Log into your Google+ account - or simply follow a link that someone else gives you, and <b>view a public Google Plus post</b> - this can be from either a personal profile or a <a href="http://blogger-hints-and-tips.blogspot.com/2011/11/google-now-has-pages-letting-us-set-up.html">Google+ page</a><b>.</b><br /><br /><br />When you are looking at a G+ post that you want to put into a blog or website, click on the <b>drop-down menu</b> in the top right corner.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZCw0iBLOROZjO6Dy5BEJRLAjr-zIIekFjIDvrtASYi8DjYYMgM7Dpz6PAy4TH-rNn7LdrVp56ncCYC4FqZUbglzoRIvIhMiTo1DU_5PDGFXDPjHF74iHYAG-CS90BFBwOkESob0sDQi2/s506/google-plus-post-stream-actions-menu-choose-an-option.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZCw0iBLOROZjO6Dy5BEJRLAjr-zIIekFjIDvrtASYi8DjYYMgM7Dpz6PAy4TH-rNn7LdrVp56ncCYC4FqZUbglzoRIvIhMiTo1DU_5PDGFXDPjHF74iHYAG-CS90BFBwOkESob0sDQi2/s400/google-plus-post-stream-actions-menu-choose-an-option.png" width="357" /></a></div><br /><br /><br />If the post is public, then there will be an Embed option in the menu-list.   Choose <b>Embed</b>.<br /><br /><br /><b>Copy the code </b>that is shown, and put it into a post or gadget the same way you would <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">install any other 3rd party code</a>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFPMBX1zqyAS3rLX3jGIl6Mt953yWxHVaEusLpW-YPozTL0kqCYXqnzNcK7WBMK5gop9p195uw8Yb08O7B4jJPYR3h33-l7g3tqUuy1FH5V9KFJS5tPJH_D-_ZOAow66ClntPIg0WvRq8/s665/code-copy-window-google-plus-embed-request.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFPMBX1zqyAS3rLX3jGIl6Mt953yWxHVaEusLpW-YPozTL0kqCYXqnzNcK7WBMK5gop9p195uw8Yb08O7B4jJPYR3h33-l7g3tqUuy1FH5V9KFJS5tPJH_D-_ZOAow66ClntPIg0WvRq8/s640/code-copy-window-google-plus-embed-request.png" width="640" /></a></div><br /><br /><b>OPTIONAL:</b><br />If you have already got a plus+1 button anywhere on your blog, you can leave out the first part of the code, ie:<br /><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;"><br /><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></span></blockquote><div>However it doesn't hurt (except very slightly in terms of speed page-load speed) to leave it in.</div><br /><br /><h2>Customizing the code:</h2>The code that Google give you looks like this:<br /><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;"><br /><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /><br /><div class="g-post" data-href="https://plus.google.com/116176459448466735273/posts/cFPSW8FgZ7U"></div></span></blockquote><br />Obviously there's not a lot you can change.<br /><br />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.<br /><br />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:<br /><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;"><div style="clear: both; <b>margin-left: auto; margin-right: auto; text-align: center;</b>"><br />PUT THE CODE FROM GOOGLE+ HERE<br /></div></span> </blockquote><br /><br /><h2>Embedded Google+ posts and the Blogger post-editor</h2>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.<br /><br />Instead, you see a gap like this:<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK5LIQ4fHAsR_J6c75Ecsrp2J03MvvYwz8GcFayKZTWrxJJj7QLo7Rdi5fSVOIdcMAit6txZa6EoiWAVTzWTv6FdLYp8xy6_FAjaeVky0V0Yarx9nLzEbbhoYEj2jdc8Mt2MLVIgP3U_V/s626/embedded-html-item-within-blogger-post-editor-shows-as-blank-space.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK5LIQ4fHAsR_J6c75Ecsrp2J03MvvYwz8GcFayKZTWrxJJj7QLo7Rdi5fSVOIdcMAit6txZa6EoiWAVTzWTv6FdLYp8xy6_FAjaeVky0V0Yarx9nLzEbbhoYEj2jdc8Mt2MLVIgP3U_V/s640/embedded-html-item-within-blogger-post-editor-shows-as-blank-space.png" width="640" /></a></div><br /><br />And you simply have to be carefully not to accidentally delete the embedded item by typing in the gad or deleting it.   <br /><br />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<br /><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;"><div style="clear: both; margin-left: auto; margin-right: auto; text-align: center; <b>border: 1px dotted black;</b>"></span><span style="font-family: Courier New, Courier, monospace;">PUT THE CODE FROM GOOGLE+ HERE</span><span style="font-family: Courier New, Courier, monospace;"></div></span> </blockquote><br /><br /><h2>What do your readers see</h2><br /><h3>Browser-based visitors</h3>People who see your blog or website in a regular browser will see an embedded Google Plus post looking like this:<br /><br /><div style="border: 1px dotted black; clear: both; margin-left: auto; margin-right: auto; text-align: center;"><br /><div class="g-post" data-href="https://plus.google.com/116176459448466735273/posts/9Apb3WLT8bE"></div></div><br /><br />But what they see is not just an image:  it's a fully-functional Google Plus post, where they can:<br /><ul><li>Plus-one the original post, and see the faces of (some) others who've +1'd it.</li><li>Follow or un-follow the poster themselves</li><li>Expand / Collapse the comments.</li><li>Add to the comments.</li><li>+1 individual comments</li></ul><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWd-u2_Ijl07GyZNcYdcwL3iWJG6SZCwbr-MrQ5fCr-zUfOYt3AFq00DWzGMa7pEbAaZSQIpR-qc0HwhkxG4k-UWBfHy5gAqckvYrZICNNNBzo_F9aiN_Utly_QQKXWCRxHtdo5VZ9yYUu/s468/comment-on-or-plus-one-right-inside-embedded-google-plus-posts-inside-blogs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWd-u2_Ijl07GyZNcYdcwL3iWJG6SZCwbr-MrQ5fCr-zUfOYt3AFq00DWzGMa7pEbAaZSQIpR-qc0HwhkxG4k-UWBfHy5gAqckvYrZICNNNBzo_F9aiN_Utly_QQKXWCRxHtdo5VZ9yYUu/s640/comment-on-or-plus-one-right-inside-embedded-google-plus-posts-inside-blogs.png" width="640" /></a></div><br /><br />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.<br /><br /><br /><h3>Readers who subscribe to your blog using RSS</h3>The experience for people who follow your blog via RSS partly depends on what RSS reader they use.<br /><br />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.<br /><br /><br /><h3>Readers who follow-by-email</h3>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.<br /><br /><br /><br /><h2>What are the terms and conditions</h2>Every time you get Goolge+ post embed code, there is a reminder that "By embedding Google+ posts, you agree to our policies."<br /><br />It's possible that these rules will change over time. But you can read today's version <a href="https://www.google.com/intl/en-GB/+/policy/embedded-content.html" target="_blank">here</a>. <br /><br />And I'm no lawyer, this isn't legal advice - but my interpretation of the current version is:<br /><ul><li>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.</li></ul><ul><li>You must not put Google+ content in ways that amount to bad behaviour, eg bullying or harassment.</li></ul><ul><li>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?</li></ul><ul><li>You cannot change the Google+ content or the stuff that Google+ puts around it.</li></ul><ul><li>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.</li></ul><ul><li>You cannot use, sell or give other people any data from embedded Google+ content, including any use of pixels, cookies,</li></ul><ul><li>You give Google permission to review and analyze your website by putting Google+ content on it.</li></ul><br />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.)<br /><br /><br /><h2>Final thoughts</h2>The elephant in the terms-and-conditions room is, of course, <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">copyright</a>.   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.<br /><br /><br /><b>What do you think:  would you be annoyed if I embedded your Google Plus post on my website? </b><br /><b><br /></b> <b>And is this a feature you will use on your blog?   </b><br /><b><br /></b> <br /><hr /><h2>Related Articles:</h2><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">Ways of linking your blog and the social networks</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">How to put 3rd-party HTML/Javascript into Blogger</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/11/google-now-has-pages-letting-us-set-up.html">Introducing Google+ Pages</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/03/centering-gadgets-on-on-your-blog.html">How to center items in Blogger</a>

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

<b>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.</b><br /><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><h2>Sharing a photo album from Google+ Photos</h2><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ibcNJAo0LR6eZCTvz8xDUZXq0ckNnTyWVljy26zEZpDo_SMhBaWBOIZQffl-pLVpAMC2wGM3H6YDgcHR3w_DBTiBNALY0LTV5iSvYi7tcCgzNvDVBbgrira_LfCqLY0trLJdMJLPk7A/s1600/make-embeddable-slideshow-from-google-picture-album.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ibcNJAo0LR6eZCTvz8xDUZXq0ckNnTyWVljy26zEZpDo_SMhBaWBOIZQffl-pLVpAMC2wGM3H6YDgcHR3w_DBTiBNALY0LTV5iSvYi7tcCgzNvDVBbgrira_LfCqLY0trLJdMJLPk7A/s320/make-embeddable-slideshow-from-google-picture-album.png" width="320" /></a></div>Google's <a href="https://support.google.com/plus/answer/1407859?hl=en-GB&ref_topic=3187068" target="_blank">help-pages</a> 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+.<br /><br />But what are the options if you want to show a Google Photos album, not just an individual picture, in your blog or website?<br /><ul><li>Put the link in your website. But that just gives bland, boring text, like <a href="https://plus.google.com/photos/109182189073554820102/albums/5492333477871131809?authkey=CO6_1rjCve2TfQ" target="_blank">click here</a> to see my photos.</li></ul><ul><li>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.</li></ul><ul><li>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!</li></ul><br />A better option is to use an <b>embedded slideshow</b>.<br /><br />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).<br /><br />Unfortunately there is no tool to make this type of slideshow code in Google Plus Photos at the moment.<br /><br />But there <strike>is</strike> was a very simple work-around which gives you get the code that you need, using existing Google tools. <br /><br /><h2>Using Picasa-web-albums to get the slideshow code</h2>If you have loaded pictures into Google Photos, then you can manage them using either Picasa-web-albums (ref: <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/what-is-picasa-very-basic-introduction.html">What is Picasa vs PWA</a>?) <b>or</b> Google Photos.<br /><br />So, to get the embeddable slideshow display code for a photo album:<br /><ul><li><b>Log in</b> to Google with your <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google+ account</a></li></ul><ul><li>Go to <b>Picasa-web-albums</b> using the do-not-redirect link:  <a href="https://picasaweb.google.com/lh/myphotos?noredirect=1" target="_blank">https://picasaweb.google.com/lh/myphotos?noredirect=1</a>   (<a href="http://blogger-hints-and-tips.blogspot.com/2013/07/start-picasa-web-without-redirection-to-googlePlus-photos.html">more about this link</a>)</li></ul><ul><li>Navigate to the <b>album</b> that you want to make a slideshow for.<br />NB  you need to be viewing the album, not the page of all albums, to get the correct code.</li></ul><ul><li>Make sure that the security for this album is set to at least <b>"anyone with the link"</b>.</li></ul><ul><li>Choose <b>Link to this Slideshow</b> and then <b>Embed album</b> from the right side bar</li></ul><ul><li>Set the <b>options</b> you want for your slideshow.<br />The alternatives explained in detail in <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-4-putting-slideshow.html" target="">How to make a slideshow of from Picasa-web-albums</a></li></ul><ul><li><b>Copy</b> the HTML code that is provided</li></ul><ul><li><b>Install</b> it into your blog or website in the usual way <br />(Ref:  <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">options for installing 3rd party code in Blogger</a>).</li></ul><br /><h2>What your readers see</h2>Readers using a regular web-browser with Flash enabled should see a slideshow of your pictures.<br /><div style="text-align: center;"><embed flashvars="host=picasaweb.google.com&hl=en_GB&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F109182189073554820102%2Falbumid%2F5492333477871131809%3Falt%3Drss%26kind%3Dphoto%26authkey%3DGv1sRgCO6_1rjCve2TfQ%26hl%3Den_GB" height="267" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://static.googleusercontent.com/external_content/picasaweb.googleusercontent.com/slideshow.swf" type="application/x-shockwave-flash" width="400"></embed> </div><br />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.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/what-is-picasa-very-basic-introduction.html">What are Picsasa and Picasa-web-albums</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">How to put 3rd party HTML or Javascript into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Understanding Google accounts</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-4-putting-slideshow.html">Putting a Picasa-web-albums slideshow into a blog post or website</a>

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

Tutorial

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

How to show pictures from Google Plus in any website

Popular Posts

Blog Archive

Labels