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

Adding a Facebook share 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

We added a Google +1 button now we want to add a Facebook button
that looks similar and has the "bubble count" like the +1

YOU WON'T SEE THE FB BUTTON IN WEB STUDIO
The Facebook share 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 to the internet
It will work on the net or when you trialsite the page, so I suggest to trialsite your page for a test

The +1 button we added, and the Facebook button we'll add this time

I'm using a Web Studio 5 share button for this example

This time we will use the FB developers page to generate the link for the HTML object:
Facebook developers button page

Open the developers page and log on to FB
Paste in the facebook page link you want to use, use button_count for the layout and click get code

Place that 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

Don't use the example below but it will look like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=249014093047&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://www.facebook.com/webstudio5" data-type="button_count"></div>

You paste in both parts like above with the LINK you are using just like above
If you are using both buttons make the HTML objects the same size 100 wide by 30 high to make it easier to line them up

This one needs to be live on the net to see it work that is so it can get the count for the bubble
NOTE: When the facebbook button is on a page a preview in web studio takes a bit longer
because the FB code "scrapes" the page so I suggest adding these later in your build

Thank-you

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

aaaaaaaaaaaaiii