Hi,

I want to add some navigation to my facebook ap. Currently setup as a FBML canvas page using the Drupal module.

When viewing my OWN profile (content profile) I see two tabs: "view" and "edit". These look GREAT and match the Facebook style perfectly.

When adding any menu item, it just shows as an ugly blue link in an unordered list.

So, that leads to two questions:

1) How do I HIDE the two default tabes (view, and edit) from the user profile?

2) How do I create my own tabs (menu items) that look like this, so I can have some navigation that is consistant with the facebook style?

Thanks!

Comments

Dave Cohen’s picture

The sample theme, fb_fbml, renders the local menu items (Drupal tabs) with <fb:tab> tags. Other menu items are rendered with default theming.

This is theming question, not specific to facebook. You'll find advice elsewhere on drupal.org and its probably better than anything I can tell you. In fb_fbml/template.php, you'll find the code responsible for <fb:tab> tags. You could remove some of those functions to restore drupal's default theming of tabs.

noah977’s picture

That makes sense.

Just looked at the template.php file and have a few questions.

I see the tabs in two places

function fb_fbml_menu_item_link($link) {
  global $_fb_canvas_state;
  
  if ($_fb_canvas_state == 'tabs') {
    // Theme an FBML tab
    $output = "<fb:tab-item href=\"" . 
      url($link['href']) . 
      (isset($link['title']) ? "\" title=\"" . $link['title'] : '') .
      "\" selected=\"false\">" . $link['title'] . "</fb:tab-item>\n";
    return $output;
  }
  else
    return theme_menu_item_link($link);
}

and


function fb_fbml_menu_local_tasks() {
  global $fb;

  // menu.inc generates the local task (tab) markup in a convoluted and inflexible way.  Because of this we generate markup with <fb:tab-item ...> for the secondary links.  Here we use replacement to "fix" this.

  if ($fb && $fb->in_fb_canvas()) {
    $output = '';
    
    if ($primary = menu_primary_local_tasks()) {
      $output .= "<fb:tabs>\n". $primary ."</fb:tabs>\n";
    }
    
    if ($secondary = menu_secondary_local_tasks()) {
      // replace fb:tab-items with list items
      $pattern = '|<fb:tab-item href="([^"]*)" title="([^"]*)"([^>]*)>([^<]*)</fb:tab-item>|';
      $replace = '<li $3><a href="$1">$4</a></li>';
      $secondary = preg_replace($pattern, $replace, $secondary);
      $output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
    }
    
  }
  else {
    $output = theme_menu_local_tasks();
  }
  
  return $output;
}


So,

1) What is the purpose of testing for _fb_canvas_state='tabs' ?
2) It looks like you're marking all primary links at tabs in the second function, but it doesn't appear that way in facebook canvas. So is this a bug or am I reading the code wrong?

Thanks!

-N

noah977’s picture

Dave, Any thoughts on this one? I'm still stuck here.

Thanks