Newscoop 3 Cookbook

Working with Facebook

It's very easy to integrate Facebook's social plugins with Newscoop pages. In most cases, it's a matter of adding a few lines of the code Facebook provides.

Most of the features that Facebook provides can be implemented in two different ways: the classic way using the <iframe> tag, and the modern way using JavaScript and XFBML. The new way of implementing Facebook features has just two lines of code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:facepile href="example.com" width="200" max_rows="1"></fb:facepile>

Making your page look good in Facebook using Open Graph Protocol

Open Graph Protocol makes sure your Newscoop-powered pages are handled by Facebook in the correct way. If they are implemented right, they can be used on Facebook profiles under the "Likes and Interests" section.

You'll need to add Open Graph protocol <meta> tags and the Like button to your header template in order to turn your pages into graph objects. The example below shows which <meta> tags can be used, and what their content should be.

<title>{{ if $gimme->article->defined }}{{ $gimme->article->name }} | Your Site
{{ else }}Your Site
{{ /if }}
</title>
{{ if $gimme->article->defined }}
<meta property="og:title" content="{{$gimme->article->name|html_entity_decode|regex_replace:'/&(.*?)quo;/':'&quot;'}}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://{{ $gimme->publication->site }}{{ uri }}" />
<meta property="og:site_name" content="YourSite.com" />
{{ if $gimme->article->type_name == "news" }}
  <meta property="og:description" content="{{$gimme->article->deck|strip_tags:false|strip|escape:'html':'utf-8' }}" />
{{ elseif $gimme->article->type_name == "show" }}
  <meta property="og:description" content="{{$gimme->article->short_description|strip_tags:false|strip|escape:'html':'utf-8' }}" />
{{ /if }}
{{ list_article_images }}
<meta property="og:image" content="{{ $gimme->article->image->imageurl }}" />
{{ /list_article_images }}
{{ if $gimme->prev_list_empty }}
<meta property="og:image" content="http://{{ $gimme->publication->site }}/templates/assets/images/logo.png" />
{{ /if }}
{{ /if }}

We've set up an IF statement that first handles whether an article has been defined. In the first <meta> tag, we're doing a few things to clean up the text and get it ready for Facebook:

<meta property="og:title" content="{{$gimme->article->name|html_entity_decode|regex_replace:'/&(.*?)quo;/':'&quot;'}}" />

We're combining three things together in this meta tag:

  • a directive to get the article name: $gimme->article->name
  • a Smarty function to decode the HTML entity
  • a Smarty function to replace any illegal characters

The next one is pretty clear. Our Open Graph type is an article:

<meta property="og:type" content="article" />

The next meta tag is for the URL:

<meta property="og:url" content="http://{{ $gimme->publication->site }}{{ uri }}" />

The og:site tag is really straightforward:

<meta property="og:site_name" content="YourSite.com" />

The og:description can be kind of complicated. In this case, it's conditional depending on the article type. If the article type is "news", it will display one description from the deck field, but if the article type is "show" the description will be different, taken from the short_description field. In the case of "news", it strips out any illegal characters from the deck field and uses the result as what Open Graph Protocol calls content:

{{ if $gimme->article->type_name == "news" }}
  <meta property="og:description" content="{{$gimme->article->deck|strip_tags:false|strip|escape:'html':'utf-8' }}" />
{{ elseif $gimme->article->type_name == "show" }}
  <meta property="og:description" content="{{$gimme->article->short_description|strip_tags:false|strip|escape:'html':'utf-8' }}" />
{{ /if }}

The final conditions have to do with the display of article images. We're taking the list of available article images and passing that to Facebook as the potential images that a user sharing a link can flip through. But if there isn't an image attached to the article (that's the IF statement for {{ if $gimme->prev_list_empty }} command), then it displays the site logo:

{{ list_article_images }}
<meta property="og:image" content="{{ $gimme->article->image->imageurl }}" />
{{ /list_article_images }}
{{ if $gimme->prev_list_empty }}
<meta property="og:image" content="http://{{ $gimme->publication->site }}/templates/assets/images/logo.png" />
{{ /if }}

You can get more info about the Open Graph protocol on Facebook's developer pages: http://developers.facebook.com/docs/opengraph/

Adding a Like button to your page

The Like button is the most popular Facebook feature. The team at Facebook made adding a Like button very easy, by going to a particular page and generating the code needed.

Here's an excerpt from a Newscoop article page template that includes a Like button:

<iframe src="http://www.facebook.com/plugins/like.php?href={{ url|escape:"url" }}&amp;layout=standard&amp;show_faces=true&amp;width=400&amp;action=recommend&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:px"></iframe>

In this case, we're using Newscoop to generate the article's URL and pass that to Facebook so that it knows where to send its users when they see the article in their pages. We're also adding a Smarty function to escape the URL so that Facebook can handle it in the right way. That's what's going on in this part:

 src="http://www.facebook.com/plugins/like.php?href={{ url|escape:"url" }}

More info about the Like button can be found on the Facebook developer pages: http://developers.facebook.com/docs/reference/plugins/like/

Adding a Like Box

The Like Box feature enables Facebook users to bring the "like" activity to their own site. The Like Box enables readers of your publication to:

  • See how many people liked your Facebook page, and which of their friends like it too
  • Read recent posts from the Facebook page
  • Like the Facebook page with just one click, without needing to visit Facebook directly

Here is an example of a Like Box used in Newscoop templating:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="{{ uri options="article" }}" layout="button_count" show_faces="true" width="450" font=""></fb:like>

The other options allow you to:

  • Set the Like Box's width in pixels
  • Show your fans' profile pictures (show_faces="true")
  • Set the type of button layout (see more about this on the Facebook developer pages)

More information about the Like Box can be found on the Facebook developer pages: http://developers.facebook.com/docs/reference/plugins/like-box/

Adding Facebook Comments

The Comments Box feature can help your replace the built-in commenting system of Newscoop with the one provided by Facebook. Facebook can also provide moderation and distribution tools with this feature.

The Comments Box can be used only with XFBML and the JavaScript file provided by Facebook:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:comments href="sourcefabric.org" num_posts="2" width="500"></fb:comments>

More info about Facebook Comments can be found on the Facebook developer pages: http://developers.facebook.com/docs/reference/plugins/comments/