Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Adding a Google +1 button

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

By adding the +1 button to your website, you allow your users to recommend
your content to their circles and drive traffic to your site

THE ERROR IN WEB STUDIO
The Google +1 button only works when it is live on the internet
When you preview it "local" inside web studio on your computer it doesn't connect and throws an error
That is okay, just close the notification by pressing no, it will work on the net or when you trialsite the page

Making the +1 button link to your home page

I prefer to have the button link to WSnext home page like below
If you want to link to each page the button is on just don't place the home page link

For more options to customize the button see:
Google +1 developers page

Place the code to make it work on your page

Press "OK"
to save

DOUBLE CLICK
on the HTML Object
and paste the code below

That puts the HTML
container on the page

On the Html tab
in Add HTML
select
HTML Object

Copy / Paste this in the HTML Object:

<g:plusone href="http://gordw.com/index.html" size="medium" ></g:plusone>

<script type="text/javascript">
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
(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>

gordw.com Re-place that with your website link (index.html is your home page)
Remove the link entirely so it links to the page it's on do it like this: <g:plusone></g:plusone>
To make it easier to position on my page I make the HTML object approx. 100 wide by 30 high
size="medium" That is so it will match the size of the FACEBOOK button - remove that if you want a larger button

The +snippet when you hover over the button

The snippet is populated by the meta tags you put on the page
So use web studio's page title and description for those, how to do that is here:

But sometimes you may want to use a specific image in the snippet
To do that add this line of code in the HTML object like below

<img itemprop="image" src="mysnippetpic.jpg">
<g:plusone></g:plusone>

<script type="text/javascript">
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
(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>

Name the image you want to use mysnippetpic.jpg and attach it to website properties
Then it will use that image for the snippet box that pops up

Press "OK"
to save

Click on "Add Files To List"
and select your image,
which will get added to the list

Select the "Attached Files"
button from the menu

Click on "website propeties" in the "caption Bar"
If you don't see the caption bar you can
show/hide it from the
"view tab"

Thank-you

Text effects in Web Studio 5 - Adding a google plusone button - by Web Studio Next

aaaaaaaaaaaaiii