mfabrik.like 2.1

Facebook Like features and Connect API support for Plone. Because everybody loves Facebook (and mFabrik).

• Introduction

• Features

• Installation

  • Installing the code

  • Enabling Like-button

  • Adding Like box portlet

  • Plone 3 and beta components

• Example sites

• Customization

  • Example of portletRenderer override

• Changing the location of the Like-button viewlet

• Source code

• More information

• Author

  • Changelog

• 2.0 - 2.1

• 1.0 - 2.0

• 1.0

Introduction

This Plone CMS add-on product adds the standard Facebook Like-button and Like boxes to Plone pages.

Features

There are several kind of like features

• Like box a.k.a. fan box. Enlists clickers as the fan of your Facebook product page. This is available as an addable portlet. (This is the modern “Become a fan” button.)

• Like button allows users to share the current content item URL in their Facebook news feed. This can be enabled on selected content types or pages using Zope marker interfaces.

Other features

• Facebook content is localized by mapping Plone language to Facebook locale (add your own languages to locales.py)

• Asynchronous Facebook Connect API Javascript loader is used to optimize the page loading time

Installation

Installing the code

Add the following to your buildout.cfg:

eggs
        ...
        mfabrik.like

Rerun buildout.

Restart Plone.

Enabling Like-button

Like-button is enabled on normal Page content type by default.

You can edit these settings by going Site control panel -> Facebook Like-button settings.

You can also explicitly enable Like-button on some content items by applying mfabrik.like.interfaces.IFacebookLikeEnabler marker interface on them through Zope Management Interface.

Adding Like box portlet

• Add Facebook application id to Site control panel -> Facebook Like-button settings

  • Facebook site setup wizard

• Create new portlet

• Add Facebook page id in the portlet settings (this is the long number which you can pick from Facebook page URL)

  • You can get Facebook page id by going to the Facebook product page and check the URL. If there is a long number then that’s the id. If you don’t see a long number try hovering your mouse over the product page logo and see if the number is there.

• Show either full Like box or just “Become a fan” text

Note

Like box minimum width is 200 px, recommended by Facebook. The height of bare Become a fan box is 64 px. With all features on, the height is ~580 px. You can adjust font sizes etc. with your site CSS as Like box is rendered using Javascript/FBML, not IFRAME, technology.

• http://wiki.developers.facebook.com/index.php/Like_Box

Note

Currently Like Box seems to work even without application id, though you should pass one to Connect API in FB.init() Javascript method.

Plone 3 and beta components

This add-on product uses software components which are not yet officially deployed for Plone 3 (and maybe never will) like plone.app.registry. To make these components work correctly you probably need to use “good-py version pindowns” in your buildout.cfg.

For more information, see

• http://plone.org/products/dexterity/documentation/manual/developer-manual/pre-requisites/buildout-configuration

Example sites

• Siida - Sami Museum

• Saariselka / North Lapland travel

Customization

• Subclass viewlet or portlet rendere classes

• Override necessary methods

• Customize template

• Use a browser layer specific to your customization add-on product to override the default viewlet / portlet renderer

Example of portletRenderer override

• Make sure that mfabrik.like is in buildout eggs before your theme add-on

ZCML:

<include package="mfabrik.like" />

<plone:portletRenderer
        portlet="mfabrik.like.portlets.IFacebookLikeBoxData"
        template="facebook-like.box.pt"
        layer=".interfaces.IThemeSpecific"
        />

facebook-like-box.pt example (how to add a header image):

<div id="portletFacebook">
    <img tal:attributes="src string:${context/portal_url}/++resource++xxx.app.images/facebookheader.png" alt="Facebook" />
    <div class="content">
        <fb:like-box tal:attributes="profile_id view/getPageId;
                                     stream view/getStream;
                                     header view/getHeader;
                                     height view/getHeight;
                                     width view/getWidth;
                                     logobar view/getLogobar;
                                     connections view/getConnections">
        </fb:like-box>
    </div>
</div>

<p tal:condition="not:view/hasAPIData">
        Please configure Facebook API key and application id
        in the Plone site setup.
</p>

Changing the location of the Like-button viewlet

You want to do this in your site theming add-on product.

• Use @@manage-viewlets to hide the default instance

• Use ZCML to bind viewlet to a new location

Source code

• http://svn.plone.org/svn/collective/mfabrik.like/trunk

More information

• http://developers.facebook.com/docs/reference/plugins/like

Author

mFabrik Research Oy - Python and Plone professionals for hire.

• mFabrik web site

• mFabrik mobile site

• Blog

• More about Plone

Changelog

2.0 - 2.1

• Declare quick installer dependency to plone.app.registry [miohtama]

• Fixed missing <includeDependencies package=”.” /> so that the product does not complain about plone.app.registry ZCML

• Like box parametrizes header and stream [miohtama]

• Like box override example [miohtama]

1.0 - 2.0

• Added control panel to configure [miohtama]

• Added Like box portlet [miohtama]

• Added connect.js version [miohtama]

• Localize Like-button for the current Plone language [miohtama]

1.0

• Initial release