Article

How to customize Flag and DLike modules to print to a custom node--tpl file in Drupal 7

If you want to customize your Flag (Bookmark, Likes) module display in a custom theme node page or tpl file, for example in a custom node--blog.tpl below, you may use code examples and adjust as needed.

  1. Insert below code where you want to appear to your custom node template file
<div class="flag-like-counter">
//Displays or replicates default flag;  where 'bookmarks' is the machine name of your flag item
    <?php $flag = flag_get_flag('bookmarks');  
//Displays counter or number of flags, bookmarks or likes 
   if ($flag) {print $flag->get_count($node->nid);} ?>
    //Where 'bookmarks' is the machine name of your flag item
    <?php print flag_create_link('bookmarks', $node->nid); ?>
  </div>
  1. To implement an image or icon, apply for example custom CSS below:
    /*Custom Flag style*/
    .flag-bookmarks .flag-action {
    background: url(../images/heart-icon-40px.png) no-repeat center center;
    border:none;
    width: 40px;
    height: 35px;
    margin-left: 15px;
    float: right;
    color: transparent;
    }
    
    .flag-bookmarks .unflag-action {
    background: url(../images/heart-icon-40px.png) no-repeat center center;
    border:none;
    width: 40px;
    height: 35px;
    margin-left: 15px;
    float: right;
    color: transparent;
    }
    
    .flag-bookmarks .unflag-disabled {
    background: url(../images/heart-icon-40px.png) no-repeat center center;
    border:none;
    width: 40px;
    height: 35px;
    margin-left: 15px;
    float: right;
    color: transparent;
    }
  2. Disable default Flag display link inline