How to specify a preview (thumbnail/excerpt) for a page?

Hi,

When you would post a link on e.g. Facebook, you usually get some preview of that page with a title, the first x words encountered and eventually an image. I don’t know how this concept is called (something like generating an excerpt or a thumbnail?).

The problem, I think, with Vaadin is that the top HTML page is automatically generated and it would seem difficult and undesirable to force adding content to such a page. Those pages (initially) do not contain the content, but rather execute Javascript to do that. Because of this, Facebook etc. do not seem able to detect the content that will be shown when the script is executed.

Is there a proper way of doing this with Vaadin?

best regards,
Sebi

Hi, Maybe this could be done with a Vaadin BrowserFrame (https://vaadin.com/book/-/page/components.embedded.html) and something like discussed here: http://stackoverflow.com/questions/3162815/jquery-webpage-preview

Please, let me know if you need further help and if you did find a solution to this use case :slight_smile:

I’m sorry if this wasn’t clear, but what I want actually is to be able to see a description and image when I would post my own website (which uses vaadin) as a link on (e.g.) facebook, not to generate a preview of another link in my own website.

Perhaps this could be achieved through DOM? But I wouldn’t know how and I don’t know much about this.

Update: I think to have found a possible solution:[code]
package com.appspot.kajwvt.ui;

import java.io.Serializable;
import javax.servlet.ServletException;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.GAEVaadinServlet;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;

@SuppressWarnings(“serial”)
public class ExtendedGAEServlet extends GAEVaadinServlet implements Serializable {

private static final String GOOGLE_SITE_VERIFICATION_CONTENT = "SLiuULJ-RbZ4UfTBSqWVLPFN-B9yYxvZgybD8YNCGUw";


@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();
    getService().addSessionInitListener(new SessionInitListener () {
        @Override
        public void sessionInit(SessionInitEvent event)
                throws ServiceException {
            
            event.getSession().addBootstrapListener(new KAJBootstrapListener());
            
        }
    });
}


public static class KAJBootstrapListener implements BootstrapListener {
    
    @Override
    public void modifyBootstrapFragment(BootstrapFragmentResponse response)
    {}
    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        addGoogleVerification(response);
        addPreview(response);
    }
    
    private void addGoogleVerification(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("meta")
        .attr("name", "google-site-verification")
        .attr("content", GOOGLE_SITE_VERIFICATION_CONTENT);
    }
    
    private void addPreview(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element body = doc.body();
        
        body.appendElement("h1")
        .append("KAJ Wolvertem");
        body.appendElement("p")
        .append("Welkom bij KAJ Wolvertem!");
        
        body.appendElement("img")
        .attr("src", "./VAADIN/kaj.png")
        .attr("alt", "KAJ logo");
    }
}

}
[/code]First, I extend the servlet, in order to override servletInitialized, which should be the appropriate moment to change the HTML. Then I subscribe a bunch of listeners, thereby specifying the modifyBootstrapPage method. The response parameter can then be used to add HTML elements.

The elements I added are a meta-tag proving to google that this site is mine, and some content which I would want to appear when I would post my website on Facebook. The latter case is still a problem: the added content does not seem to get parsed by Facebook, and, while it should be hidden when visiting my page, there is still a possibility that they will appear (this happens when visisting my page from a (android) smartphone). Does there exist some kind of tag that can be parsed by Facebook, but remains hidden when visiting the actual webpage?

My approach successfully works when deployed locally (on Tomcat, or as web application (local GAE)). However, when actually deploying my website on Google App Engine, the tags do not appear (viewing source in Firefox). But Google did accept when I asked to verify if the meta-element was added. Should I be concerned about that?

Solved!

[code]
package com.appspot.kajwvt.ui;

import java.io.Serializable;
import javax.servlet.ServletException;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.GAEVaadinServlet;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;

@SuppressWarnings(“serial”)
public class ExtendedGAEServlet extends GAEVaadinServlet implements Serializable {

private static final String GOOGLE_SITE_VERIFICATION_CONTENT = "SLiuULJ-RbZ4UfTBSqWVLPFN-B9yYxvZgybD8YNCGUw";


@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();
    getService().addSessionInitListener(new SessionInitListener () {
        @Override
        public void sessionInit(SessionInitEvent event)
                throws ServiceException {
            
            event.getSession().addBootstrapListener(new KAJBootstrapListener());
            
        }
    });
}


public static class KAJBootstrapListener implements BootstrapListener {
    
    @Override
    public void modifyBootstrapFragment(BootstrapFragmentResponse response)
    {}
    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        addTitle(response);
        addDescription(response);
        addGoogleVerification(response);
        addFacebookVerification(response);
        addPreview(response);
    }
    
    private void addTitle(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("title")
        .append("KAJ Wolvertem");
    }
    
    private void addDescription(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("meta")
        .attr("name", "description")
        .attr("content", "Welkom bij KAJ Wolvertem!");
    }
    
    private void addGoogleVerification(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("meta")
        .attr("name", "google-site-verification")
        .attr("content", GOOGLE_SITE_VERIFICATION_CONTENT);
    }
    
    private void addFacebookVerification(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("meta")
        .attr("name", "fb:admins")
        .attr("content", "1116621974");
    }
    
    private void addPreview(BootstrapPageResponse response) {
        Document doc = response.getDocument();
        Element head = doc.head();
        
        head.appendElement("meta")
        .attr("property", "og:title")
        .attr("content", "Eindelijk!");
        head.appendElement("meta")
        .attr("property", "og:site_name")
        .attr("content", "KAJ Wolvertem");
        head.appendElement("meta")
        .attr("property", "og:description")
        .attr("content", "Na lang sukkelen ben ik er"
                + " eindelijk in geslaagd om ervoor te"
                + " zorgen dat Facebook een deftige"
                + " preview weergeeft voor onze website.");
        head.appendElement("meta")
        .attr("property", "og:image")
        .attr("content", "./VAADIN/kaj.png");
        head.appendElement("meta")
        .attr("property", "og:locale")
        .attr("content", "nl_BE");
    }
}

}
[/code]Facebook uses the Open Graph meta-tags: https://developers.facebook.com/docs/sharing/best-practices

I’m glad to hear you find a solution :slight_smile: