Facebook integration¶
Description
How to integrate Facebook to Plone site
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
Note
You need to include your Facebook app or your Facebook user id as the admin for the site in the metadata. Otherwise Facebook will report an error for the page.
You can see Facebook id your yourself and your friends here
Simple example. Add this to your main_template.pt. Supports Plone default content types and news item image
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
tal:define="lang language"
tal:attributes="lang lang;
xml:lang lang">
<head>
...
<!-- Facebook integration -->
<meta property="og:description" tal:attributes="content context/Description|nothing"/>
<tal:has-image omit-tag="" condition="context/image|nothing">
<tal:comment replace="nothing"><!-- News item image support --></tal:comment>
<meta property="og:image" tal:attributes="content string:${context/absolute_url}/image"/>
</tal:has-image>
<meta property="fb:admins" content="123123" />
<meta property="og:type" content="website"/>
</head>
Complex example for custom content type
<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|nothing"/>
<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>
Table Of Contents
About Plone
This is documentation for Plone®. Plone is a popular, open source, content management system written in Python programming language.