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>
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;/':'"'}}" />
<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;/':'"'}}" />
We're combining three things together in this meta tag:
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/
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" }}&layout=standard&show_faces=true&width=400&action=recommend&font=arial&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/
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:
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:
More information about the Like Box can be found on the Facebook developer pages: http://developers.facebook.com/docs/reference/plugins/like-box/
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&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/
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.