Embed Google+ Button

Posted by Helmuti_pdorf on 14 Dec 2011 18:45, last edited by Helmuti_pdorf on 14 Dec 2011 18:50

Tags: google+

rating: 0+x

It is a good idea to insert a button for "google+" on your pages… but this works only in general on a "_template" page of your category.

Lets have a look on our blog:_template here on our Wiki how we have done it with google plus button:

This _template page is a layout builder for all blog: pages we have written.

You will see on the source code of this page these important lines :

+++ %%title%%
[!-- Should be identical to include:Latest-Community-News --]
[[size smaller]]By %%author%% on %%date|%e %b %Y|agohover%%, last edit by %%author_edited%% on %%date_edited|%e %b %Y, %H:%M|agohover%%[[/size]]

%%content%%
[[div style="overflow:hidden"]]
[[div style="float: left; width: 100px"]]

[[html]]
<span id="tweet-button" style="display: block; text-align: left;"><a href="http://twitter.com/share" class="twitter-share-button" data-url="%%link%%" data-text="%%title%%" data-via="wikidot" data-count="horizontal">Tweet</a></span><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
[[/html]]

[[/div]]
[[div style="float: left; width: 100px"]]
[[html]]
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" href="%%link%%"></g:plusone>

<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
[[/html]]
[[/div]]
[[/div]]

Explainations
a) The "%%title%%" is the place holder of the Page title

b) the "%%content%%" is the placeholder of teh complete page - source content - which will be inserted here at this place

c) the "include :snippets:tweet-button" is the call of the Twitter button and

d) the "html" until "/html" codes is the neccessary part for the google+ button.

e) the "%%lnk%%" in the line
@g:plusone size="medium" href="%%link%%"></g:plusone@ is replaced with the url of your page - transporting the url to google plus.

Notice:

The "google+" buton insert is done with a html window inside a ([[div]]) calling a javascript part and
f) is not viewable on the _template page itself… only on the rendered pages of the category !

Other(!) HowTos posted by Helmuti_pdorf

Page tags: google+
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.