Gabriel Harper's Blog

This is a simple way to add social Web icons to vBulletin posts that link to a member’s social networking profiles like Digg, Facebook, etc. You can easily add custom user profile fields from vBulletin Admin CP that let users add their profile URLs in their User CP. For your convenience I also zipped up 19 social Web icons that you can download for your vBulletin forum.

I just added these to member posts on the Tech Forums and the screenshot below explains it the best:

Users can configure their social Web links in their User CP. Basically, this mod makes use of custom profile fields and adds some link HTML to the postbit template. Follow these three steps to add these social links to your vBulletin member’s posts:

Step One: Upload Icons

First, upload the icons to your site – any location is fine, just remember where you put them. The icons used are .GIF format made for a light background – you can download all 19 social Web icons in .ZIP format here. You will need an FTP client like Filezilla (free) to upload them.

Step Two: Add a Custom Profile Field

Now we need to add a field to our user profiles where they can set their social networking profile name/ID/URL/etc. I recommend that you let them enter the ID or username for the service instead of a full URL for security purposes.

For this example we’ll add a Digg icon.

Log in to your vBulletin Admin CP. Navigate to User Profile Fields >Add New User Profile Field in the left menu. Select Single-Line Text Box and click Continue. Complete the form to create the new profile field. For Digg, I added the following settings:

• Title: Digg Username
• Description: Your Digg Username to link to your Digg profile.
• Max length of allowed user input: 100
• Field length: 40
• Field Required: No
• Field Editable by User: Yes
• Private Field: No

You can tweak these as needed. Most of them are the default settings. Click Save to add the new profile field.

Each custom field is assigned a unique name that can be viewed under User Profile Fields > User Profile Field Manager in the “Name” column. For example field2, field2, field3, etc. Make a note of your custom field name for the next step.

Step Three: Add Icon to Postbit

Now that our new profile field has been added, we just need to add the HTML to our postbit template to display the icon if the user completed the custom field. We get to the postbit template from the Admin CP Style Manager:

1. Still in the vBulletin Admin CP, navigate to Styles & Templates > Style Manager.
2. Select Edit Templates from the dropdown on the active template.
3. Find and highlight Postbit Templates in the list and click Expand/Collapse to view the child templates.
4. Select the “postbit” template and click Edit.

Now, insert the code below directly before the line $template_hook[postbit_userinfo_left]. Make sure to replace fieldname with the actual name of the custom field you added, and http://yoursite.com/pathtoicons/ with the actual URL to your icon files.

<if condition="$post['fieldname']">
<a href="http://digg.com/users/$post[fieldname]" title="$post[username]’s Digg Profile"><img src="http://yoursite.com/pathtoicons/ico_digg.gif" border="0px" /></a>
</if>

That’s it! You can add as many profile fields as you want. I’m also running vBSEO and it does not cause any problems there.

Is this the best way of doing this? Probably not if you’re using a ton of links or changing them regularly. These mods could probably be put together into a nice plugin that automates much of this work, and maybe I’ll do that in the future when I learn the vBulletin plugins system a little more.

For now, this is a nice simple method of customizing your vBulletin forum to add a few social icon links without a lot of fuss. How can this be improved? Let me know!

This entry was posted on Wednesday, April 8th, 2009 at 2:54 pm and is filed under Software & Scripts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.