Add-On Releases - 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 )
  

  <!--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 )
  

  <!--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.

[GamerPerfection]

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?

[alawee.blawee]

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

[Jabong82]

Thank you for this mod.

[GamerPerfection]

Originally Posted by clarkey25

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?

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.

[crazyace]

Originally Posted by alawee.blawee

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

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

[trackpads]

Thanks! Installed

[jauction2010]

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

[crazyace]

Originally Posted by jauction2010

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.

[mitbar]

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.

[thunderclap82]

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?