vaadin portlet, liferay/facebook


I tried asking on the liferay forums…

Im writing some portlets using vaadin for UI and deploying on Liferay - works perfect. But I have a situation where I want to publish the portlet as a facebook app (iframe) using liferays share option for portlets. It gives me a URL I can open that shows me the porlet in “maximized” windows state and this can then be used as the url for the facebook app. Works fine for non vaadin portlets, but if the portlet is a vaadin app porlet it fails and vaadin shows a 404 error in the top.

anyone knows about this - what to do?


Are you using virual hosting on your liferay ?

As Pablo Tatann said, it seems that Vaadin apps can’t be displayed in liferay widget mode when virtual hosting is activated (for example if you deleted /web/guest/ aliases).

No answer on this issue for now.

If your problem is the same, you have 3 ways to solve it :

  • open a ticket on vaadin : i haven’t seen any a ticket yet
  • keep your /web/guest or change it to another thing with 2 parts (/something/somethingelse)
  • another solution (the on i’m going to try in few days) :
    • add a custom field to page configuration : this field could be named “Custom style”
    • Add your portlet on 2 different pages
      • in the first page configuration, let the field with a blank value
      • in the second page configuration, fill the field with a custom value (for example : facebook)
    • Edit liferay velocity files in order to display two different main layouts depending on your custom field value :
      • If your custom field is blank, don’t change anything
      • if your custom field is filled with a value “facebook”, don’t put a layout around your page content.
    • Then you’ll just have to share your second page url on facebook

good luck



I tried this both on a server running only one instance and a server running more instances.

it might be the issue of missing /web/guest - its in the URL I write in the browser, but its not in the JS when I look at the source. The posts you link to talk about using rewrite to correct this. I actually do have apache in front of tomcat to handle SSL traffic so I guess I could try this also, just … I guess I dont know how to write the rule - I cannot make it work :slight_smile:

Do you have an example of this? Im using ProxyPass to connect apache/tomcat but I should still be able to use rewrite rule, no?

Hi Jan,

Here are the steps you have to follow :

  1. In Liferay administration
    - In liferay control panel → custom fields → Page → Add custom field
    - In the form name your custom field as you want : for example Key = “mainlayout” / Type =: “Selection of text values” ==> Save
    - Fill “Default value” with as many lines you have main layouts : for example : “normal” / “facebook” / “iframe”…
  2. In liferay theme velocity templates
    - open protal-normal.vm
    - edit the content of wrapper tag in order in inject your specific layout instead of the current layout :
    <div id="wrapper"> #set($mainlayoutArray = $expandoBridge.getAttribute("mainlayout")) #set($mainlayout= "normal") #foreach($mainlayoutiterate in $mainlayoutArray) #set($mainlayout = $mainlayoutiterate) #break #end #parse ("$full_templates_path/mainlayout/${mainlayout}.vm") </div>
    - create a directory “layout” in theme “templates” directory
    - inside “layout” directory, create a file “normal.vm” : put all the content you had in your “wrapper” tag
    ==> If you launch your Liferay, nothing should have change for now
    - Inside “layout” directory, create a file “facebook.vm”, “iframe.vm”… according to keys you set in liferay control panel
    - in facebook.vm, you can copy the same content as in normal.vm, then delete header (menu…) and footer… in order to have only your main div content
    You should have something close to that :
    <div> #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include) #end </div>
  3. Deploy your theme in Liferay
  4. Add a new page for your facebook page that will includes your portlet
  5. Add your portlet in your page
  6. In page configuration, change the “mainlayout” custom field value. Set it to “facebook”

    ==> When you display your page once again, you only see your portlet without liferay header, footer…
  7. You copy your page url and you paste it in your Facebook application configuration
  8. You display your facebook application
  9. You clap the closest buddy hand because it works :slight_smile:

Tell me if you have a problem or a question.


thanks. I dont know to much about making templates and so on but a question. It seams your idea is to drop doing facebookshare of >any< normally placed portlet and instead make special pages that only have this ONE application/portlet on the page and then just make sure the page does not actually show any liferay elements and then in the end, when you want to “share” you dont actually do “liferay-sharing” instead, since the page is basicly empty except for the portlet/app content you simply use this URL directly correct?

question: could I not more easily just make a “empty” template? I could then set the page template to the “empty” template and get the same effect?

the difference beeing that I would not have to do anything special to the existing templates and would stay clear of all this special customfield handling and stick to the usual page templating - keeping it more simple - and reusable?


got around to testing it. Again - if its the same basic idea you wrote about or if there are pros and cons to your solution Im not 100% sure.

anyway as I dont really know how to do templates I found a “plain template” from this post:

downloding a WAR from here:

installed it and made a new page adding only one portlet - the porlet/vaadin app I wanted to share/show on facebook and before setting it up in facebook, I set the page template to the new plain-theme.

This works.

The downside of this solution is ofcause that you need to handle this specificly and you cannot use a portlet already on our pages where the facebookshare is just a special request of a normal page.

but for isolated pages/apps is ok and I gues the upside is that you can use liferay stuff, logins and so on.

half win :slight_smile: