Follow Us Widget/Forum Block

[crazyace]

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.

[whitedd]

screenshot?

[crazyace]

Screenshots uploaded.

[AzzidReign]

Always a good thing to have :)

[crazyace]

Always a good thing to have :)

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

[x626xblack]

Tyvm!

[Bergler]

There are no 95x56 images in this zip file?

[crazyace]

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.

[Bergler]

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?

[crazyace]

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

[Bergler]

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

Cheers!! :)

[gyaronn]

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

[crazyace]

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.

[gyaronn]

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

<!--Twitter Code-->
<a href="http://twitter.com/_FMSAS_"><img src="forum1/images/misc/95x56/twitter_follow_us.png" title="Follow Us on Twitter" width="95" height="70" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>
<!--Facebook Code-->
<a href="http://www.facebook.com/home.php#!/pages/Foreign-Medical-Student-Association-Szczecin/254351748440?ref=ts"><img src="forum1/images/misc/95x56/facebook_follow_us.png" title="Follow Us on Facebook" width="95" height="56" style="margin-left: 16px; margin-right: XXXXXXpx;"/></a>
<!--Youtube Code-->
<a href="http://www.youtube.com/user/TheFMSAS"><img src="images/misc/95x56/youtube_follow_us.jpg" title="Follow Us on YouTube" width="95" height="56" style="margin-left: 16px; margin-right: XXXXXXpx; margin-right: 10px;"/></a>

[gyaronn]

never mined my mistake fixed it works grate thank you

[crazyace]

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.

[SuperGLS]

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

[GONUMBER6]

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!

[crazyace]

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.

<!--Twitter Code-->
<br /><a href="http://twitter.com/XXXXXX"> Replace the X's with your Twitter ID

<!--Facebook Code-->
<a href="XXXXXX"> Replace the X's with your facebook address. Example: http://www.facebook.com/#!/pages/Band-LinkUp/290351493616?ref=ts

<!--Myspace Code-->
<a href="http://www.myspace.com/XXXXXX"> Replace the X's with your Myspace ID

<!--Youtube Code-->
<a href="http://www.youtube.com/group/XXXXXX">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

[GONUMBER6]

awesome thanks!

[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]

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. :D

[crazyace]

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

You can use vBSEO or This mode Tweetboard Integartion (Forum + CMS) (https://vborg.vbsupport.ru/showthread.php?t=233096&highlight=twitter)

[trackpads]

Thanks! Installed

[jauction2010]

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

[crazyace]

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?

[Lostboyfan]

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

[svaghari]

where/how do you upload image files?

[ProFifaLeagues]

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.

[Miss Chatterbox]

Love it! Thank you! :)

[crazyace]

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.

[Lee Wisener]

Perfect, thanks :)

[Carrie Lewis]

Nice. I think I will definitely use this!

[BadgerDog]

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

Thanks ...

Regards,
Badger

[x626xblack]

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

Thanks ...

Regards,
Badger


That is a tweetboard

[BadgerDog]

That is a tweetboard

Thanks .. :)

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

Regards,
Badger

[x626xblack]

Mix of both. You can get the Board Mod here but you need to get the authorization and activation else where.
https://vborg.vbsupport.ru/showthread.php?t=233096&highlight=tweetboard

[BadgerDog]

Mix of both. You can get the Board Mod here but you need to get the authorization and activation else where.
https://vborg.vbsupport.ru/showthread.php?t=233096&highlight=tweetboard

Thank you .. :)

Regards,
Badger

[robbiefritz]

My only suggestion would be to have the clicks open in a new tab or window so as not to loose focus on the forum itself.

I did this by editing the code as such. Because we only use twitter right now, only that was edited.

<!--Twitter Code-->
<br /><a href="XXXX" target=”_blank”><img src="images/misc/95x56/twitter_follow_us.png" title="Follow Us on Twitter" width="95" height="56" style="margin-left: 16px; margin-right: 16px;"/></a>

[oldfan]

Would this would with CMPS v4.0?

thanks

[fluidswork]

Great addon ...........

[LisaArnold]

Thanks, works nicely with vB 4.1.4 :)

[ahobilam]

I installed it, its working fine.
I like this mod very much.
But, how could I change the width of the widget? It overlaps with the main content in the Home page.
It looks well in the Forum Block.
My website is: www.brahminsnet.com/forums/

[Charis]

Thanks a lot.
That is what exactly I was looking for.

[UK CHI3F]

big thanks for the mini mod and comments from robbiefritz
I dont do code but this was made easy to follow and even adding the extra bit was simple
Thanks

Now i need a like button for threads

[yesfans]

Set as a widget in 4.1.11 and is working fine so it appears thus far.

[iyama]

And Google+ ?

[iyama]

And Google+ ?

no one?

[crazyace]

Sorry to everyone for being away for so long. I'm going to update this mod to work with 4.2.X and I'll see about adding Google+

[iyama]

Sorry to everyone for being away for so long. I'm going to update this mod to work with 4.2.X and I'll see about adding Google+

I was on Google+ and create there a Google+ banner.
Puth it in your plugin and whola. :D

[gsmlover4u]

images not showing even i upload images folder
where i am doing wrong ?