Follow Us Widget/Forum Block
 

I was asked to create a widget and forum block from a few users so after doing some testing, I was able to come create them.

Install CMS Widget:

• Upload the image files
• Go to admincp and select vBulletin CMS >> Widgets
  Press Create New Widget
• At Widget Type select Static HTML
• At Title type: Follow Us
• Now click Save
• Select Follow Us Widget and then click Configure
• Select and Delete any white space
• Copy and paste HTML code below and then save config ( Edit each line of code with the settings you want where you see the "XXXX" also you can edit the margins as well )
  
  Code:

  ---

  <!--Twitter Code-->
<br /><a href="http://twitter.com/XXXXXX"><img src="images/misc/95x56/twitter_follow_us.png" title="Follow Us on Twitter" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>

<!--Facebook Code-->
<a href="XXXXXX"><img src="images/misc/95x56/facebook_follow_us.png" title="Follow Us on Facebook" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>

<!--Myspace Code-->
<a href="http://www.myspace.com/XXXXXX"><img src="images/misc/95x56/myspace_follow_us.png" title="Follow Us on Myspace" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx; margin-top: 10px;"/></a>

<!--Youtube Code-->
<a href="http://www.youtube.com/group/XXXXXX"><img src="images/misc/95x56/youtube_follow_us.jpg" title="Follow Us on YouTube" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx; margin-top: 10px;"/></a>

  ---

• Go to admincp and select vBulletin CMS>> Layout Manager
• Select your layout (eg: Default Layout)
• Edit>> Go
• At Widgets Select Follow Us and Add to the right by pressing the (>) button
• Move the widget to the area in your CMS that you want it

Install Forum Block:

• Upload the image files
• Go to admincp and select Forums & Moderators >> Forum Blocks Manager
  Press Add Block
• At Add new block select Custom HTML/PHP
• At Title replace Custom HTML/PHP with: Follow Us
• Under Block Config>> Click HTML
• Copy and paste HTML code below and then save config ( Edit each line of code with the settings you want where you see the "XXXX" also you can edit the margins as well )
  
  Code:

  ---

  <!--Twitter Code-->
<br /><a href="http://twitter.com/XXXXXX"><img src="images/misc/95x56/twitter_follow_us.png" title="Follow Us on Twitter" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>

<!--Facebook Code-->
<a href="XXXXXX"><img src="images/misc/95x56/facebook_follow_us.png" title="Follow Us on Facebook" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>

<!--Myspace Code-->
<a href="http://www.myspace.com/XXXXXX"><img src="images/misc/95x56/myspace_follow_us.png" title="Follow Us on Myspace" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx; margin-top: 10px;"/></a>

<!--Youtube Code-->
<a href="http://www.youtube.com/group/XXXXXX"><img src="images/misc/95x56/youtube_follow_us.jpg" title="Follow Us on YouTube" width="XXXXXX" height="XXXXXX" style="margin-left: 16px; margin-right: XXXXXXpx; margin-top: 10px;"/></a>

  ---

• Now click Save

**Note: With this MOD the image files path will be set to ""images/misc/95x56/" That way if you have the other versions installed, it won't cause issues. Also if you want to use even the smaller images, edit the HTML to point at 48x28.

screenshot?

Screenshots uploaded.

Always a good thing to have :)

Oh I agree. When I uploaded the folder I forgot to hit upload on the screenshots ;)

Tyvm!

There are no 95x56 images in this zip file?

Sorry about that. Its just been my luck lately about some files not moving over from my test folders to my production folders. Lesson learned and thanks for letting me know.

Can you attach them to a post?

I re-uploaded the zip file with them in it.

Cheers!! :)

how can i make the photos to go down in a strayte line and not one near the other

In the code you need to remove the <br /> tags.

did that but nothing changed you can see how it looks on my site www.fmsas.org
here is the code i used

never mined my mistake fixed it works grate thank you

I started to say.. I just looked at it and it looked in line. If you want some spacing you need to add to the top margin of the pics.

gyaronn, do you mind if I use the images you have on your site?

This is a dumb question I know, but I just want to make sure I do it right!

What do I need to put where the red X's are?

Thanks in advance!

Not dumb at all.

Replace the X's with your Twitter ID

Replace the X's with your facebook address. Example: http://www.facebook.com/#!/pages/Ban...1493616?ref=ts

Replace the X's with your Myspace ID

Replace the X's with your youtube group ID


Now for the other X's that you see after images is to adjust the height or width. Also you can adjust the margins if you need to. But if you leave them as X's it will keep the pictures default values

awesome thanks!

I found something strange.
http://www.gamerperfection.com

If you go to the home page and look at the Follow Us widget in the bottom left corner using FF it appears fine. 4 icons for Facebook, Twitter, MySpace and YouTube.

However when I view it through IE 8 (using compatibility view) the widget appears with 4 dots where the images are meant to be. The links are still there to the relevant accounts, it's just that the PNG images do not appear using IE. Why is this?

what about that lovely tweet button in the left side of your snapshot?

Thank you for this mod.

It's ok I solved the problem.
IE doesn't like the XXXXXX in the settings. So although the icons are 60px by 60px and FF showed them at that size, IE decided to show them at 1px by 1px.

So i just replaced the XXXXXX with 60px. :D

You can use vBSEO or This mode Tweetboard Integartion (Forum + CMS)

Thanks! Installed

Is there a way to do this for vBa CMPS via a module?

I'm not really sure. I don't have vBa installed I'm sorry.

I must have done something wrong, The pictures dont show, yes i uploaded them.

EDIT: nvr mind bone head mistake on my part, thanks works great.

It was just brought to my attention that the nothing is showing up in the widget on IE, yet it displays fine in Firefox (which I use). Any idea why IE is having trouble?

the block doesn't show even after i put in the code

where/how do you upload image files?

In to your ftp
**Note: With this MOD the image files path will be set to ""images/misc/95x56/" That way if you have the other versions installed, it won't cause issues. Also if you want to use even the smaller images, edit the HTML to point at 48x28.

Love it! Thank you! :)

You're welcome. I really need to find some time to work on this. Man weddings eat up so much time.

Perfect, thanks :)

Nice. I think I will definitely use this!

Where do I find the mod that puts the sidebar marked "Tweets" (see pic)

Thanks ...

Regards,
Badger

That is a tweetboard

Thanks .. :)

Is a tweetboard a mod here, or is it something I get from Twitter?

Regards,
Badger