Newscoop 3 Cookbook

Widgets: YouTube, Vimeo, Twitter, Flickr & Co.

If you want to include streams from Twitter, Flickr or Vimeo, relax. Just copy and paste their code into your templates. No magic. You don't need to install any widgets or plugins to do this. Just use their embed code. If you want to embed a YouTube video, just copy the embed code into your WYSIWYG editor and save. Done.

Now we cleared the air, and can dive into more interesting ideas...

Twitter Feed with custom Hashtag / Search for each article

Wouldn't it be cool to have a Twitter Feed for each article following a certain Hashtag or search word related to the story, like #sourcefabric, #climate change, #wadr, #elvis (these are examples of what your journalists would type in).

The journalist can set the Hashtag or search term in the Article Edit screen. The template will check if the field is empty, and then either include the Twitter Feed or not. In our example, the Article Field for the Hashtag is called twittersearch and needs to be added in the Newscoop administration interface under Configure Article Types.

{{ if $gimme->article->twittersearch|strip_tags|trim !== "" }}
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '\"{{ $gimme->article->twittersearch }}\"',
  interval: 6000,
  title: '{{ $gimme->publication->name }} Twitter Service',
  subject: 'follow: {{ $gimme->article->twittersearch }}',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>
{{ /if }}

Video embedding in custom sizes

You can copy and paste embed code into your article without any problems. If you follow the examples below, you will get an idea how you can have more control over the layout in the template - and possibly embed the same video in different sizes, depending on where it is shown. Also, you might not want to include embed code inside the article body for various reasons, like delivering to different platforms and devices, or copyright.

Vimeo video embed from video ID

In this example the journalist copies and pastes the video ID from the vimeo URL into the article. The template will check if a video ID is given, and then create the embed code accordingly - you can control the size in the template. If you take the video embed code from vimeo, it starts like this:

<iframe src="http://player.vimeo.com/video/12790651?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

If you compare this with the URL, you see that the video ID is the last part of the URL:

http://vimeo.com/12790651

The value the journalist has added to the article is 12790651 in the field vimeoid. Now you can create the embed code like this:

{{ if $gimme->article->vimeoid|strip_tags|trim !== "" }}
<iframe src="http://player.vimeo.com/video/{{ $gimme->article->vimeoid }}?title=0&amp;byline=0&amp;portrait=0" width="300" height="180" frameborder="0"></iframe>
<em><a href="http://vimeo.com/{{ $gimme->article->vimeoid }}" target="_blank">Watch video in separate window</a></em>
{{ /if }}

Make sure that the URL in the iframe is on one line.

YouTube video embed from URL

For this example, journalists will copy and paste the share URL from YouTube into an article field of their story. This way you can display Youtube videos on your site, but without your journalists embedding code in the WYSIWYG editor field. (This is for various different reasons; one of them might be the custom size of your space dedicated to the YouTube embed). You can use the link which YouTube offers by default (click on "share" under the video):

http://youtu.be/NokMkmthduY

What you need to do then is to extract just the important part NokMkmthduY from the field and put it in a wrapper with predefined dimensions, transparency options etc. This is how you can do it:

<script type="text/javascript">
var embedParts="{{ $gimme->article->youtubeurl }}".split("/");
document.write("<iframe title=\"YouTube video player\" width=\"435\" height=\"356\" src=\"http://www.youtube.com/embed/"+embedParts[3]+"?wmode=opaque\" frameborder=\"0\" allowfullscreen></iframe>");
</script>

Custom flickr Stream for individual articles

Imagine a journalist writes an article about an event which has its own flickr account. The widget below allows you to call in the latest images from that flickr stream and display them alongside the article. This widget does not show up if a flickr name is not provided by the journalist.

In our example, the Article Field for the flickr user name is called flickrname and needs to be added in the Newscoop administration interface under Configure Article Types.

Firstly, the template checks if the name is set, and if so then (prior to the PHP code) the value is assigned to a variable of the same name. This is necessary because inside PHP the environment has no access to the $gimme object. The styling in this example is included in the code, but you can place it elsewhere. If you want to change the number of images, you can do this inside the widget by changing $rows and $columns.

{{ if $gimme->article->flickrname|strip_tags|trim !== "" }}
<style>
.widget-flickr-wrapper, .widget-flickr-wrapper table { width: 100%; }
.widget-flickr-wrapper table,
.widget-flickr-wrapper table td img { background: #f0f0f0; border: 1px solid #e7e7e7; }
.widget-flickr-wrapper table td { padding: 10px;  }
</style>
<h3>Latest images from &raquo;{{ $gimme->article->flickrname }}&laquo;</h3>
{{ assign var="flickrname" value=`$gimme->article->flickrname` }}
{{ php }}
$rows = 4;
$colums = 3;
$api = '40a7ac8e64e9bc034d0f72b9a64e1f3a';
$username = $this->get_template_vars('flickrname');
$total = $rows * $colums;
// get user ID from user name
$user_id = simplexml_load_file("http://flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=".$api."&username=".$username)->user['nsid'];
// get images from user ID
$xml = simplexml_load_file("http://flickr.com/services/rest/?method=flickr.photos.search&api_key=".$api."&user_id=".$user_id."&per_page=".$total);
if (isset($xml->photos)) {
  $photos = array();
  foreach ($xml->photos->photo as $photo) {
    $photos[] = array(
      'src' => "http://farm1.static.flickr.com/".$photo['server']."/".$photo['id']."_".$photo['secret']."_m.jpg",
      'link' => "http://www.flickr.com/photos/".$user_id."/".$photo['id'],
      'title' => $photo['title']
    );
  }
  echo "<div class=\"widget-flickr-wrapper\">\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";
  for ($i = 0; $i < $rows; $i++) {
    echo "<tr>\n";
    for ($j = 0; $j < $colums; $j++) {
      $index = $colums * $i + $j;
      if (isset($photos[$index])) {
        $photo = $photos[$index];
        echo "<td>\n<div class=\"widget-flickr-thumb\">\n<a href=\"".$photo['link']."\" target=\"_blank\"><img src=\"".$photo['src']."\" height=\"75\" width=\"75\" alt=\"".$photo['title']."\" /></a>\n</div>\n</td>\n";
      } else {
        echo "<td>&nbsp;</td>\n";
      }
    }
    echo "</tr>\n";
  }
  echo "</table>\n</div>\n";
}
{{ /php }}
{{ /if }}