Archive for the ‘tutorials’ Category

A test environment for your buttons and links

leave a comment »

image We’ve just updated Patapage adding a new functionality: a test environment in the backoffice from where you can test the buttons / links generated before publishing them on your site. The test environment facilitates pasting the code:


It is like a web based development environment, giving a preview of your buttons by default on our Alice Lin site:

This just makes it even easier doing some quick tests. 🙂


Written by Pietro Polsinelli

June 1, 2010 at 2:11 pm

Example Patapage usages

leave a comment »

image In this blog post Matteo Bicocchi (“pupunzi”) presents some ways to improve a site with Patapage:

9 ways to improve your site but you don’t know how to

Written by Pietro Polsinelli

May 17, 2010 at 8:29 am

Posted in examples, tutorials

Patapage and site indexing

leave a comment »

image Does the “social” content of your web site get indexed under your domain? Normally, it doesn’t: if people write on Twitter, Facebook, blog posts about your web site or the topics it deals with, your site is not connected with such information. With Patapage you not only get connected, but also can get that the social content gets connected also for indexing.

An objection that could be raised to Patapage – to any Ajax-powered site – is this:

“Content that is inserted through Patapage is not under my domain so it will not be indexed by Google”

Actually, if you look at details, things are quite different.

If you build your site with Patapage as suggested, your site basic structure and HTML will be as simple as possible. All the “core” content will be hence as SEO-friendly as possible. What happens if you don’t use Patapage? Well, what normally happens is that whatever “talk” about your site topics is not indexed nor linked to your site in any way. And of course this includes indexing. This is the situation when Patapage gets added.

By adding Patapage, 1. Your site SEO-friendly structure is preserved 2. You connect “talk” and encourage visitors to connect to your content.

The extension of your site with Ajax-powered features, like widgets – increases your connectedness – and hence visibility: its an opportunity, not a problem.

The mistake would be to use Patapage as a way to build your core content – but this is not a good idea, and will not only not be SEO friendly, but likely nor user friendly too.

Patapage used correctly is a way to evolve a site remaining SEO friendly. Because the content remains simply structured. This said, there is work being done to index under your domain also all the content inserted in Patapage – see section 4.4 of the user guide.

Written by Pietro Polsinelli

May 11, 2010 at 11:00 am

Posted in details, tutorials

Tagged with

How to customize a Patapage button

with one comment

In the Patapage demo we present functionalities through docked buttons; this is a way to make them visible, but it is not necessarily so: services may be activated by clicking any kind of link – actually, they may even be activated when the page simply loads (this will also be an option in a Patapage upgrade we are preparing). In this post we’ll see how to create custom links activating patapage.

The Patapage buttons can be drawn at least in two ways:

  1. As docked buttons
  2. As inline links

1. As docked buttons

The docked button is the default and it will appear vertically on the left side of the page; this is injected by the Patapage script itself (one for each functionality you paste into the page body); in this case you can customize the label and the color of each docked button.

2. As inline links

This option will add a link tag to the Patapage generated code; you can manage and adapt its appearance to your page design. For example you can put the link into your menu bar, or you can have a clickable image instead of a textual link, or you can add your custom CSS class, or you can apply any JavaScript effect to show and manipulate its appearance…

To make this clearer I’m going to explain how to customize a PataWiki button in your page:

1. Go to the back office of your Patapage account; choose PataWiki from the left bar:

2. Write your label and check the “button as simple textual link” check box:

3. Customize the appearance of the overlay and the screen window:

4. Generate the code and paste it into your page:

As you can see at the top of the pasted code there’s an <A> tag that you can place wherever you need on your page; for example you can move it to your page menu or inside your text, you can add special CSS classes or manipulate it via JavaScript. The only important thing is not to remove the ID, needed to attach the correct behavior to the click action.

Here is a screen of a custom Patapage button bar:

This is the code inserted for the menu:

Notice that there are four links referring to Patapage buttons (the one with the ID) and one pointing to an external link (“about me”). The patapage buttons action is defined in the part of the script you pasted at the bottom of your page.

You can see this example at:

Written by Matteo Bicocchi

January 5, 2010 at 9:35 am

Posted in news, tutorials

Tagged with