Can't define width on new widgets

episod · 2013-08-15T15:09:00.000Z

There are some upper bounds on how many widgets an account can create. You may want to use an additional account if you need more widgets.

redtimmy · 2013-08-15T17:29:16.000Z

With the first script, I could style every single element of the panel. I could make each tweet dance in its own bubble on my site. The fonts could match my fonts. I could knock out the background. I could absolutely set my own width, as small or as big as I wanted. Anything was possible; I did a lot of awesome things with my twitter panel.

Now, with this new twitter panel, I have this big f’ing box on my site that’s impervious to styling.

I was hoping the Facebook panel would start to go in the direction of styling freedom like the Twitter panel. Instead, Twitter devs have opted to put me in the same straightjacket Facebook wants me in.

A pox on both of you. I’m start recommending to my many clients to skip the widgets altogether.

alexandrughinea · 2013-08-21T12:15:32.000Z

I have the solution to this frustrating problem, and I have integrated it successfully in Twitter’s bootstrap (the irony?).
Step 1:
Download Twitter’s widget js file and put it in "YOUR_LOCAL_PATH/js"
Step 2:
Modifying the widget call script as so:

You should see that I have deleted the “p” variable and the protocol declaration and I’m pointing towards a local copy of Twitter’s widget js file.
Step 3:
Use something like http://jsbeautifier.org/ to make the code inside the widgets.js file readable. After that copy that code inside "YOUR_LOCAL_PATH/js/twitter.widgets.js"
Step 4.1 : Look for and modify like I suggested below:
dimensions: {
DEFAULT_HEIGHT: “600”,
DEFAULT_WIDTH: “100”, // modify this to be 100 - like 100%
NARROW_WIDTH: “100”, // modify this to be 100 - like 100%
MIN_WIDTH: “100”, // modify this to be 100 - like 100%
MIN_HEIGHT: “200”,
WIDE_MEDIA_PADDING: 81,
NARROW_MEDIA_PADDING: 16,
WIDE_MEDIA_PADDING_CL: 60,
NARROW_MEDIA_PADDING_CL: 12 },

Step 4.2 : Look for and modify like I suggested below:
From this: .frame.style.minWidth = s.dimensions.MIN_WIDTH + “px” to this
.frame.style.minWidth = s.dimensions.MIN_WIDTH + “%”

Step 5. Congratulations, you now have a responsive twitter widget! If they release new versions of the widget, just remake the steps I suggested!

alexandrughinea · 2013-08-21T12:13:51.000Z

They can be, I have posted a very simple solution, check it out!

alexandrughinea · 2013-08-21T12:15:04.000Z

I have posted the solution.
Cheers mate!

adrianodennanni · 2013-09-03T04:33:22.000Z

You’re a genius! Thanks a lot!
Do you know how to do the same with the height?

Mattnguyenn · 2013-09-12T08:40:07.000Z

You are the man!

alexandrughinea · 2013-09-12T12:32:52.000Z

Thanks!

alexandrughinea · 2013-09-12T12:46:12.000Z

Thanks! Well for height modify
"px", s.noscrollbar && s.hideStreamScrollBar() to
"%", s.noscrollbar && s.hideStreamScrollBar()
Cheers!

elqhomewood · 2013-09-19T18:01:30.000Z

You are AWESOME! I’ve been fighting with this since yesterday.

Also, anybody who wants to change the follow button to show the screenname, do a search of the new twitter.widgets.js code for “data-show-screen-name”, and change both occurrences to be “true” rather than “false”

alexandrughinea · 2013-09-21T12:06:55.000Z

Thank you very much, glad it works for you!
Cheers

venturewised · 2013-09-22T20:41:08.000Z

To simply change the width size so it is responsive, use EMs instead of PX (% width will not work). Put this right about the [a] tag
[style type=“text/css”]
#twitter-widget-0{width:75em;}
[/style]

alexandrughinea · 2013-09-22T20:40:49.000Z

What I was telling people is that you don’t modify inline or add dynamically % with JS injection or class toggles or class overwrites. You actually modify the source code of the Twitter Widget itself, and that always works!
All best

boukoo · 2013-09-25T18:09:44.000Z

Cheers for posting that code, it has helped out a lot!

blogillu · 2013-10-06T08:03:26.000Z

Lol! This is the right solution …thx

NilukaNilmini · 2013-10-10T02:38:45.000Z

wow great This is great!!! Thank you so much.
I had a problem with height of the widget. My code worked fine with Firefox and Chrome but not with the IE . When i refresh IE page my widget get shrinked and display in very small height. So i just added following above tag. I works for me.

#twitter-widget-0{width:520px;}

toasterdroid · 2013-11-08T23:41:23.000Z

Having not found any WordPress plugins I like, I opted to use the Twitter Widget as well. To make it responsive, I simply added the following to my style sheet:
} iframe#twitter-widget-0.twitter-timeline.twitter-timeline-rendered { max-width:100% !important; min-width:100% !important; }
Of course, if you need a specific width, use pixel width. Hope this might help someone.

rik_na1 · 2013-11-15T10:22:51.000Z

This is a great solution. You had no idea how much this was driving me mad. Thank you.

bndsites · 2013-12-01T14:38:29.000Z

Thx, Just what I was looking for…

wombizclub · 2013-12-05T21:26:50.000Z

@alexandrughinea I have done every single step but cannot get my tweets to show - please have a look at the bottom left http://www.womensbusinessclub.co.uk/