About

mFabrik Blog is about mobile and web software development, open source and Linux. We tell exciting tales where business, technology, web and mobile convergence.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Integrating Facebook with Plone

Posted on April 18, 2011

This blog post shows how to integrate some of Facebook features to your Plone site programmatically.

See the add-on

for non-programming integration.

Like button

Here is an example which creates a Like button pointing to the current page.

Page template code:

<iframe tal:attributes="src string:${view/getFBURL}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:227px; height:50px;" allowTransparency="true"></iframe>

View code

import urllib

...

class YourView(BrowserView):

    ...

        def getQuotedURL(self):
            url = self.context.absolute_url()
            url = urllib.quote(url)
            return url

        def getFBURL(self):
            base = "http://www.facebook.com/plugins/like.php?href=%(url)s&layout=standardt&show_faces=false&width=227&action=like&colorscheme=light&height=50"
            url = base % {"url" : self.getQuotedURL() }
            return url

Note

If you are using Like button you should also add OpenGraph metadata to your pages as described below.

More info

OpenGraph metadata

OpenGraph is Facebook page metadata protocol. You’ll insert extra <meta> tags on the page which will give additional information about the page to be displayed with Facebook links.

Below is an example of filling in Facebook metadata

  • Using content description in Facebook
  • Having main image
  • Having location
  • Having contact info

Example

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
    lang="en"
    metal:use-macro="here/main_template/macros/master"
    i18n:domain="saariselka.app"
    >

     <tal:comment replace="nothing">
     <!--

              We will insert this HTML to <head> section,
              "head_slot", defined by Plone's main_template.pt

     -->
    </tal:comment>

    <tal:facebook-opengraph metal:fill-slot="head_slot" >

        <meta property="og:description" tal:attributes="content context/Description"/>
        <meta property="og:type" content="hotel"/>

        <tal:comment replace="nothing">
             <!--

                      Fill in geo info if available.
             -->
        </tal:comment>
        <tal:has-location omit-tag="" tal:define="lat view/data/Latitude|nothing; long view/data/Longitude|nothing;" tal:condition="lat">
              <meta property="og:latitude" tal:attributes="content lat"/>
              <meta property="og:longitude" tal:attributes="content long"/>
        </tal:has-location>

        <tal:comment replace="nothing">
             <!--

                      Fill in contact info.
             -->
        </tal:comment>
        <meta property="og:email" content="xxx@yoursite.com"/>
        <meta property="og:phone_number" content="+ 358 123 1234"/>

        <tal:comment replace="nothing">
             <!--

                      URL to 70 px wide image used by Facebook as the news item splash image.

                      Note: Facebook resized the image automatically.

             -->
        </tal:comment>
        <tal:has-image omit-tag="" condition="view/main_image">
              <meta property="og:image" tal:attributes="content view/main_image"/>
        </tal:has-image>

        <tal:comment replace="nothing">
             <!-- Facebook admins is a compulsory field. Put here the side admin Facebook id(s), comma separated

http://apps.facebook.com/whatismyid

             -->
        </tal:comment>
        <meta property="fb:admins" content="123123" />

    </tal:facebook-opengraph>

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

Facebook requests…

Posted on August 14, 2008

I love you all guys.

I just learnt that Firefox web page screen capture tools (any of them) can’t take web page screenshots higher than short 16-bit interger (32768) pixels. Crash crash crash. But I hope I am alone with my problem.

So, thanks for being so supportive… and it’s not fully rendered (over 250 of them), since after 3200 the image was cut. Excuse me if I am not willing to support your cause.

Facebook requetss