Integrating Facebook with Plone

Posted on by

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

See the add-on

for non-programming integration.

1. 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

2. 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>

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

8 thoughts on “Integrating Facebook with Plone”

  1. Which content items have the default ‘view/main_image’?

  3. FYI, the second edition of Professional Plone Development will contain an example of integrating Facebook authentication with Plone.

    Martin

  4. FWIW, you may want to use FBML instead of the iframe implementation for your Like boxes (or any other FB widget). We found we had a major issue with page load times if you have multiple FB Like boxes on a page. An example of that would be a Collection with FB Like buttons next to each Collection Item. We went so far as to delay loading all of the FB widgets.

  6. Looks good, I’ll try it in my application, maybe I can give more comment about this after deploying.

  7. mfabrik.like add-on does FB integration through Facebook Javascript SDK. It does not have the same issues as with IFRAMEs, but is more complex approach and might take effort from novice developers to hack their way through APIs ja FBML.

  8. @Davi Lima: Actually, no, that’s not what I’m referring to in my post. iframes block parallel downloads and in our case we have between 12 and 18 Facebook widgets loading on our homepage (a large Facebook Likes portlet and a large Collection with each item in the collection having a Like box). Once the page started downloading the iframes (which was our initial implementation) all other element downloads stopped until all the FB resources were loaded which caused a serious lag in page load times. The second iteration was using the Facebook js and FBML, which helped. The final thing that helped was deferring the loading of the FB elements until after the page had completely loaded.

Leave a Reply

Your email address will not be published. Required fields are marked *