Monday, May 30, 2011

Tip 5: Installing Social Sharing Network Plugin in Tiki Template



One Tiki's advantage is the ease of installing script of JavaScript/HTML wherever we want. We can install Javascript/HTML on the left/right side of the page by using the module, at the top of the page (header) and bottom (footer) using the admin features. We even can install JavaScript/HTML in some specific pages, using the available templates, for examples: in articles, forums, galleries, etc.

The following tip will guide you on how to install the social network plugin script in a specific template.
  1. First, we will use social sharing network such as the buttons of Facebook Like, Twitter, and Google Buzz as the examples. The scripts are as follow:
    <p>
        <div style="float:left" > {* Facebook Like Button begin *}
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.example.com/{$articleId|sefurl:article}" layout="button_count" show_faces="false" width="90"></fb:like>
        </div> {* Facebook Like Button end *}
        <div style="margin-left:20px; float:left" > {* Twitter Button begin *}
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="yourTwitterId">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" />
        </div> {* Twitter Button end *}
        <div style="margin-left:20px; float:left" > {* Google Buzz Button begin *}
            <a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
            <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
        </div> {* Google Buzz Button end *}
    </p>
  2. Option 1, to install the above scripts in the site header, open file /templates/tiki.tpl. Copy and paste them right below this scripts:
    {include file='tiki-site_header.tpl'}
    </div>

    Note: Please erase the script /{$articleId|sefurl:article}, because this is for only /tiki-read_article.php below, and leave the others as they are. Save and close /templates/tiki.tpl. By installing those social sharing network scripts in tiki.tpl, any page opened will display the buttons of Facebook Like, Twitter, and Google Buzz on the site header.
  3. Option 2, to install the above scripts in a specific page, for example /tiki-read_article.php, open file /templates/tiki-read_article.
    1. If you want to install those script below the Article Title, find these scripts first:
      <div class="articletitle">
          <h2>
              {$arttitle|escape}
          </h2>
          {if $show_subtitle eq 'y' and $subtitle}
              <div class="articlesubtitle">{$subtitle|escape}</div>
          {/if}
         
          <span class="titleb">
              {if $show_author eq 'y' && $authorName}{tr}By:{/tr} {$authorName|escape} {/if}
              {if $show_pubdate eq 'y' && $publishDate}{$publishDate|tiki_short_datetime:'On:'} {/if}
              {if $show_expdate eq 'y' && $expireDate}{tr}expires:{/tr} {$expireDate|tiki_short_datetime} {/if}
              {if $show_reads eq 'y'}({$reads} {tr}Reads{/tr}){/if}
          </span>
          <br />
      </div>

      Copy and paste those social sharing  scripts right below the </div> tag. The page will look like this:
    2. To instal those social sharing scripts at the end of article body, copy and paste them right before this script:   {if $pages > 1}. The page will look like this:
    3. To instal those social sharing scripts in article trailer, open file /templates/article_trailer.tpl. Copy and paste them right after this script:   <div class="articletrailer">. Save and close /templates/article_trailer.tpl.
    Save and close /templates/tiki-read_article.tpl.
  4. Finish. Your tiki-read_artilce.php has been installed social sharing network plugin.



No comments:

Post a Comment