Can't define width on new widgets

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/

wombizclub · 2013-12-05T21:03:00.000Z

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/

Here is my code:

Tweets by @wombizclub

rraciop · 2014-02-26T22:10:57.000Z

this is the best and most simple solution. Works great, thanks