Posted by Helmut_pdorf on 14 Dec 2011 18:45, last edited by Helmut_pdorf on 14 Dec 2011 18:50
: google+
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="//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="//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 !
Related articles
Comments
Hmm, I'm also looking for a way to put a Google plus button to all pages of my wikidot, but I have no idea how to do it. :(
Wil je zelf artikelen schrijven? Bezoek: http://www.artikelwebsite.nl/
For it to be used on all pages, the the code needs to go onto your live template pages _template and category:_template for each category on your site. The code for a simple google plus button is shown below and puts the button below the other other content.:
%%content%%
[[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]]Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Hi Rob,
Thanx for this. I ́ve tried this but it didn ́t work for me yet. How do I get into Live Template Pages? I have no idea where to find this :O
Zelf artikelen schrijven? Ga naar http://www.artikelwebsite.nl/
Live Templates
Live template pages are pages that allow you to set default content which will be displayed on all pages in a category. This is very useful because you only need to change it on one page and all pages in the category are updated instantly. Like any other page, you need to create a live template page. If you don't use categories on your site then the page is called _template. If you use categories on your site then the live template page is called category:_template. The documentation for live templates is at http://www.wikidot.com/doc:templates
To create these pages you cannot use a NewPage module, you must enter the page name into your browser address bar. On your site weet you don't seem to be using categories so create a live template page by adding this into your browser address bar then pressing Enter: http://weet.wikidot.com/_template
To add the Google +1 button
When the live template page has been created add the following to it:
[[module css]]
iframe.html-block-iframe {
height: 48px !important;
}
[[/module]]
%%content%%
[[html]]
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="Standard" 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]]This code is slightly different to my earlier example because I have added a css module to specify the height of the iframe the google+1 button sits in. You need this so that when a user hovers over the button the dialog box that appears can be seen. If you want the complete hover popup window to be seen you have to set it to a height of 200px , but you could set it to just 48px as we've done here which would then just display the top line of text. This might be better depending on the layout of your page where you might not want a big space below the google+1 button. The !important is required on the height setting to stop the google+1 css code from over-riding the height setting.
The %%content%% is needed so that the content you have on your pages is displayed. If you don't put this in, after you save a page you won't see your content, only the button.
The google+1 button code must go inside [[html]]..[[/html]] tags as it is external code.
You shouldn't need to change any of the code inside the html tags. But one thing to mention is a small bit of Wikidot syntax%%link%%. Don't change this, it is needed so Google+1 knows the page on which the button has been clicked.
The code inside the html tags, the external content, is called separately and after the rest of the page of the page content. So you'll always have a couple of seconds delay before your google+1 button is displayed.
Example
You can see a working exampe of this on my test site:
Live template: http://vineyard.wikidot.com/googleplus:_template
Example page: http://vineyard.wikidot.com/googleplus:page
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Dear Rob,
Thank you huge! I am so happy. It works! Thanks a 1000 times for your bright and helpfull help. ha! Thank you again.:):):)
Zelf artikelen schrijven? Ga naar http://www.artikelwebsite.nl/