A WordPress facebook timeline shortcode

A Wordpress facebook timeline shortcode

A WordPress facebook timeline shortcode

In this days, I’m working on WordPress to build a simple website. Since I’m novice on it, I start to learn how it works. One of the feature I focused on is shortcodes. Shortcodes are a sort of html tags, but they are surrounded by square bracket. Wherever you put a shortcode, a server-side php function is executed. The php function generate some html code that replaces the shortcode itself. Let me show an example.

this is a [b]bold shortcode[/b]

it will be show as follow

this is a bold shortcode.

WordPress shortcode syntax

The full shortcode syntax is:

[tag arg1="value2" arg2="value2"]content[/tag]

abbreviated syntax are:

[tag arg1="value2" arg2="value2"/]

Server-side shortcode definition looks like:

function b_func( $atts, $content=null ) {
      return "<b>$content</b>";

add_shortcode( 'b', 'b_func' );

To use it, place this code inside a WordPress instance. I put it in wp_install_dir/shortcodes/b_shortcode.php adding the following code into a library WordPress php file.

require_once( ABSPATH . "/shortcodes/b_shortcode.php" );

I use wp_install_dir/wp-includes/shortcodes.php

A webF WordPress shortcode

In this article series I explain how to create a client-side Facebook timeline webf. Since it run client-side, I create a shortcode to use it on WordPress.

The shortcode syntax

I start defining the syntax I want to use. It is:

webf is the shortcode tag.
rep is from where webfs definitions are taken (this is an optional argument).
id, ref indicate where the generated code will be inserted in the html (if id is used, a new div tag is created, if ref is used, the generated webf will go inside the element identified by the ref value ).
class indicate which type of webf to use.
tpl is a comma separated list of templates to loads
data, data_ref or content, contains the data used by the webf.
the webf data, is assigned in three ways. Using a javascript link through the data_ref argument; The javascript files should be like:

var dataOfid = { webf data }

the variable name ends with the id name defined by the id argument (default is webf).
The second way uses the shortcode content.

the third way uses the data argument to define fields of data.

This shortcode insert the timeline using timeline as id.

Webf data is taken from http://my-data-script.js

class argument is omitted if only one webf is used in the page.

Uses more than one templates definition.

Both id and class are optional. the default id is "webf" the default class is defined by the template definition file.

The webf_shortcode.php

 finally I will show how I write the WordPress shortcode definition. Here is how it looks:

function webf_func( $atts, $content=null ) {
     /* arguments checks and default value settings */
    if (!isset($atts["tpl"])){ return "tpl attribute not set"; } else $tpl=$atts["tpl"];
    if (!isset($atts["class"])){ $cls="null"; } else $cls='"'.$atts["class"].'"';

    if (isset($atts["rep"])) $rep=$atts["rep"]; else $rep='http://archive.portablehtml.com/dust-repo';
    if (isset($atts["ref"])) $ref=$atts["ref"]; else $ref=null;
    if (isset($atts["id"])) $id=$atts["id"]; else $id='webf';
    if (isset($atts["data"])) $data=$atts["data"]; else $data=null;
    if (isset($atts["data_ref"])) $data_ref=$atts["data_ref"]; else $data_ref=null;
    /* data retrieval code */
    if (is_null($ref)){
        $idRef = $id;
        $idCode = <<<EOQ
<div id="$id"></div>
    } else {
        $idRef = $ref;
        $idCode = "";
    if (!is_null($data_ref)){
        $dataRef = <<<EOQ
<script src="$data_ref.js" type="text/javascript"></script>
    } else
    if (is_null($data)) $data=<<<EOQ
    hasMoreData: 1,

    getData: function(name){

        return { $content };
    loadData: function(){ this.hasMoreData--; }
    if (!is_null($data)){
        $dataCode="{ $data }";
    } if (is_null($dataRef)){
        return <<<EOQ
Data loader not found! usage:
    } else {
    /* templates loading */
    $parts = preg_split("/[,]/", $tpl);
    $repList = '';
    foreach ($parts as $part) {
        $repList .= <<<EOQ
<script src="$rep/$part.js" type="text/javascript"></script>
    return <<<EOQ
<script src="http://akdubya.github.com/dustjs/lib/dust.js" type="text/javascript"></script>
<script src="http://akdubya.github.com/dustjs/lib/parser.js" type="text/javascript"></script>
<script src="http://akdubya.github.com/dustjs/lib/compiler.js" type="text/javascript"></script>
<script src="http://akdubya.github.com/dustjs/vendor/jquery.min.js" type="text/javascript"></script>

<script src="$rep/dust-manager.js" type="text/javascript"></script>

<script type="text/javascript">// <![CDATA[
    (function () {
        var webf=webFMan.webF("#$idRef", $cls);
        webf.init( $dataCode );
// ]]></script>
add_shortcode( 'webf', 'webf_func' );

You could find this shortcode file inside this gitHub repository, Enjoy with it.