The Facebook Like/Reccommend widget has a means of setting the widget's width. Twitter and Google+ don't. In attempting to modify CSS to alter the width of the iFrames only to discover that there are inline styles that interfear with this. I looked at other issues for a resolution such as: #642642: How do I style service links? and #1178960: Style Tweet Widget Button and #1022582: Link alignment of shared links is out but they don't cover hard coded things like widths.

Any insight would be greatly appreciated.

CommentFileSizeAuthor
#4 1661724-alter-widths-google-plus-4.patch6.91 KBwiifm

Comments

rbrownell’s picture

rbrownell
he/him
Primary language English
Location Gatineau, Québec, Canada
commented
Title: Widget Widths » Customize Widths of Twitter and Google Plus Widgets

Any suggstions anyone? Ultimately I would like to display all widgets side by side without 50px of extra white space.

radiobuzzer’s picture

radiobuzzer commented

Indeed this is a problem. I would be also interested in this

wiifm’s picture

wiifm
Primary language English
Location Wellington, NZ
commented

Just had a bug raised with me for this exact issue. I will look into a patch

wiifm’s picture

wiifm
Primary language English
Location Wellington, NZ
commented
Version: 7.x-2.1 » 7.x-2.x-dev
Status: Active » Needs review
StatusFileSize
new 1661724-alter-widths-google-plus-4.patch6.91 KB

So after some research into this, I found that you can set the width of the Google plus button, so long as it is set to use the size 'inline' (see the docs).

From all the documentation I read on twitter, it is not possible to alter the twitter button width.

Attached is a patch that:

  • Switches google plus to use HTML5 compliant markup
  • Adds in new admin settings for the Google plus widget to match the documentation online (including setting the width)
  • Adds an update hook to remove old variables, and set new ones.
wiifm’s picture

wiifm
Primary language English
Location Wellington, NZ
commented

I also just read that you can use CSS to alter the width of the Twitter button - see http://stackoverflow.com/questions/9567504/cant-change-the-twitter-butto...

.twitter-share-button {
width: 80px !important;
}
simon georges’s picture

simon georges commented
Category: support » feature
Status: Needs review » Needs work

Patch doesn't apply cleanly any more. Could someone re-roll this?

TheCrow’s picture

TheCrow commented
Status: Needs work » Fixed

Reworked #4 and committed, added info here http://servicelinks.altervista.org/?q=about/troubleshooting

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.