Welcome to vBulletin Guru!


vBulletin is arguably the best community forum software available today. vBulletin Guru is here to offer both free advice on how to successfully build, customize and manage your forum based website as well as offer advice and resources for more advanced topics of forum management such as SEO (Search Engine Optimization), community growth and monetization.
Aug
27

Moving Facebook Connect out of the header template and into the navbar template

By
The Facebook Connect link by default resides in the header template. It is placed up near the Welcome link in the upper right corner. Some users want to move that to another template when they are customizing their style. In vB3, that would usually just mean moving the template code from one template to another. In vB4, you need to also make sure the variable you are using is registered for use in the template you are using it in. Doing this is pretty simple, but it does require writing a plugin.

To move it to the navbar template:
Create a plugin:
hook location - parse_templates
Title - Move facebook_header to navbar
Plugin is Active - Yes
Plugin PHP Code -
PHP Code:

vB_Template::preRegister('navbar', array('facebook_header' => $facebook_header)); 

.
Now remove this code from the header template (you must do this or it won't work!):
HTML Code:

                <vb:if condition="$vboptions['enablefacebookconnect']">
                    {vb:raw facebook_header}
                </vb:if>

.
It's important to note the the code for the Facebook Connect link is wrapped in <li> tags (see the facebook_header template). It was originally added in a list in the navbar. So, you need to wrap it in <ul> tags in order to make it proper html wherever you add it.

For instance, if you want to add it at the end of the breadcrumbs - in the upper right corner of the main forum body:

You would find this code:
HTML Code:

<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
    <ul class="floatcontainer">

.
And modify it to look like this (note the addition of the <ul> tags in the facebook code):
HTML Code:

<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
    <vb:if condition="$vboptions['enablefacebookconnect']">
        <ul style="float:right; clear:none;">
            {vb:raw facebook_header}
        </ul>
    </vb:if>
    <ul class="floatcontainer">

.
The result:

Attachment 47247
Attached Images

Comments are closed.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes