Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CM] Twitter SlideBox (Widget) Details »
[CM] Twitter SlideBox (Widget)
Mod Version: 1.00, by ChiNa (Coder/Designer) ChiNa is offline
Developer Last Online: Jul 2019 I like it Show Printable Version Email this Page

vB Version: 4.2.0 Rating: (1 vote - 5.00 average) Installs: 16
Released: 05 Aug 2012 Last Update: Never Downloads: 0
Supported Uses Plugins Template Edits Auto-Template Additional Files Translations External Content  

[CM] Twitter SlideBox (Widget)


Notice: Please be adviced that the Twitter code has changed since this mod was created. All though you can still use the new Code using our method. You just have to play arround with the new code befor implementing the code in your modfication.


::::::::::::::: Other Social Mods Related to this :::::::::::::::

Facebook SlideBox: Click Here
Floating SideBar: Click Here

Download Mod For vBulletin 3.8.x. CLICK HERE! (NEW)



Hey Everyone, I made this first as a Facebook LikeBox, and now you can get it as Twitter Widget too. Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your Twitter-Box Widget.

Lets Start with the Example Images First, and then the Modification!


The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!

Only 3 Template Edits
Image: Slide In


Image: Slide Out


==================== Modification Starts =====================


Step 1: Go to your ADMINCP, and then Styles & Templates.
Now to your right in the Dropdown menu, click on Edit Template, now find the "headinclude" template, which is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...

Code to add:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Step 2: Now we have to add the CSS,
Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Edit Templates"!

Now scroll down till you find the CSS Templates. In the CSS Templates click and open the "additional.css" template! And add the following code below all the other codes: (If its empty, just add it in the front)

Code to add:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Step 3:
Go to this Site https://twitter.com/settings/widgets

Login with your own account... Or if you dont have an account then signup for one!

The Widget option can also be seen in your PROFILE, below! Its called
WIDGETS! Now you can click on it and on you right side click on options are on your right side it says "Create new"!

Click on CREATE NEW, and after creating your widget, simply COPY the code from BELOW! We need to embed the code on your webpage, but in a bit...

Widget Settings: You can leave the Width and Height as it is. It will also ask you for a Scrollbar, and make sure to Click and mark it YES! Click SAVE on your twitter accounts widget that you created...

When you are done, Click on Finish & Grab Code!

Step 4:
Now add the CODE inside the original code showen below, instead of the BLUE TEXT. After you have added the code, your full code should be ready!

Look for the BLUE TEXT below, and replace it with the code you just got for the Widget!:

Code to add:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

REPLACE THIS PART --> "PUT THE WIDGET CODE HERE" WITH THE WIDGET CODE.

STEP 5:
When your are done putting the WIDGET CODE inside the real code, Then now we need to put it all in your HEADER template, or footer...

Put the code below everything else in the tempplate. And you are DONE! (You can see an example of my CODE, used on my site below this post, so you get an idea of how it looks like when finished)

STEP 6:
Now copy the "twitbox.png" image from the attachment below, or from below the text, and upload it in your "images" folder in the root of your ftp!

We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!


=================== Modification End ===============
===


Extra Troubleshoots & Info


Below you see example of the full code used in my forum:
The code in BLUE color is the twitter widget code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	twitbox.png
Views:	97
Size:	14.5 KB
ID:	140344  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Mini Mods Twitter Username Widget BB code nitra1000 vBulletin 4.x Add-ons 13 15 Jan 2014 15:42
Forum Home Enhancements [CM] Twitter SlideBox (Widget) ChiNa vBulletin 3.8 Add-ons 1 13 Aug 2012 23:27

Comments
  #2  
Old 27 Aug 2012, 20:09
stoute stoute is offline
 
Join Date: May 2010
it doesn't appear that you can use both your widgets at the same time. are you going to fix this in the future or should I just move one of these to the other side?
Reply With Quote
  #3  
Old 27 Aug 2012, 22:38
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Sure you can, but I do not recommend it, It may affect your forum later on if you use another Jquery or Javascript on your site!

Check the link below, and the user is called qpurser, he actually used all my 3 Floating boxes on his website, and the codes are also posted in here.

Check this thread: Facebook SlideBox: Click Here

__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #4  
Old 30 Aug 2012, 17:15
stoute stoute is offline
 
Join Date: May 2010
I was able to get both to work just needed to rebuild the image and edited the css to make them work... thanks
Reply With Quote
  #5  
Old 30 Aug 2012, 17:59
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Glad you made it work, thanks a lot for comming back and letting me know.. Well done mate... Thumbs up
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #6  
Old 30 Aug 2012, 18:43
stoute stoute is offline
 
Join Date: May 2010
haha yeah no problem you can check out the working version @ http://greenromproject.com

I can PM the css edits if anyone needs them.
Reply With Quote
  #7  
Old 09 Dec 2012, 13:28
moustafa moustafa is offline
 
Join Date: Oct 2008
how can i show the number of followers in this widget?
__________________
Webmaster & Make Money Forum
Reply With Quote
  #8  
Old 07 Jan 2013, 13:57
SpeedwayFreaks SpeedwayFreaks is offline
 
Join Date: Dec 2012
I saw this on another vb site and had to have it. You are incredible ChiNa-Man. Fantastic Job.
I will be a loyal supporter of your work for sure. Very good instructions, easy to install.
Reply With Quote
  #9  
Old 07 Jan 2013, 16:11
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by SpeedwayFreaks View Post
I saw this on another vb site and had to have it. You are incredible ChiNa-Man. Fantastic Job.
I will be a loyal supporter of your work for sure. Very good instructions, easy to install.
Keep up your great attitude, our developers need it! Awesome comment.. Let me know if you needed further assistance and check out my facebook slider too, same as this one --> http://www.vbulletin.org/forum/showthread.php?t=286333
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #10  
Old 08 Jan 2013, 12:13
JamalFree JamalFree is offline
 
Join Date: Dec 2012
thanks....
Reply With Quote
  #11  
Old 14 Feb 2013, 12:02
Dispersion Dispersion is offline
 
Join Date: Nov 2011
For some reason it wouldn't show anything other than "tweets by X", any idea why?
Reply With Quote
  #12  
Old 16 Feb 2013, 19:34
Bruce1984 Bruce1984 is offline
 
Join Date: Feb 2009
Awesome mod! Changed the image slightly to fit the themes we have installed, but besides that it looks great!

There is however some issue and I'm not sure what it is. The reply box (textarea) will be greyed out, for the quick reply as well as the 'advanced' one. Sometimes it works and shows/loads properly, but usually it doesn't. It usually works when the page is loaded a first time, when it's loaded a second time, for example after a refresh, the box will be grey. Any consecutive refresh/load results in the same. Also, it happens on any theme.

The strange thing is, when I comment the <script> bit from the 'header' template edit out, it'll work properly. When I remove the comment-out bit (<!-- and -->), it won't function anymore. Now I'm not sure if it's that part that's faulty or if it's something to do with the other two code bit edits.

Any help would be greatly appreciated.

Here's, for example, the three bits from the default vB style:

'header'

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

'headinclude'

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

additional.css

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #13  
Old 05 Mar 2015, 23:12
elazanak elazanak is offline
 
Join Date: Nov 2014
Instead of my twitter feed will I be able to show a twitter feed of people that I am following? for example, I have a sports forum and I want the twitter feed to show important news reporters/athletes instead of it showing my feed.

Please advise when you have a free moment.
Reply With Quote
  #14  
Old 31 May 2015, 10:06
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
@Bruce1984 , Thank you for your feedback. I am sure others will find your method helpful..
Notice to Forum Members

Please be adviced that the Twitter HTML code has changed. You can still use the new Code using the method above. Just play arround with the new code to understand how it works.
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #15  
Old 24 Jan 2016, 10:47
T.P.'s Avatar
T.P. T.P. is offline
 
Join Date: May 2012
i was testing it, but the slide does not work.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 13:41.

Layout Options | Width: Wide Color: