Late this week, we noticed a slight change in the customized Facebook Like Box at the sidebar — the images in the last row of Connections were cut in half and a “Sign Up” button with the line “Create an account or log in to see what your friends like” appeared on top the “Like” button.
We discovered that it was some sort of `modification´ made by Facebook which affected customized widgets that are installed on websites and blogs. Even our favorite tech news provider, TechCrunch, wasn't spared (see image below).
Notice the second row of images inside the box in orange? They look awful.
To get this fixed, you will need to add a few more pixels to the height of the widget to make up for the space occupied by the sign up button and the log in link.
If you have this social plugin installed in your blog, do the following procedure to adjust the height of the widget.
We discovered that it was some sort of `modification´ made by Facebook which affected customized widgets that are installed on websites and blogs. Even our favorite tech news provider, TechCrunch, wasn't spared (see image below).
Notice the second row of images inside the box in orange? They look awful.
To get this fixed, you will need to add a few more pixels to the height of the widget to make up for the space occupied by the sign up button and the log in link.
If you have this social plugin installed in your blog, do the following procedure to adjust the height of the widget.
- In your Blogger Dashboard, go to Design > gadget for Facebook Like Box > Edit;
- Find “height” (there are two of them) and add the original value with 50 pixels. For example: height=250 to height=300. To illustrate using the iFrame:<iframe src="http://www.facebook.com/plugins/likebox.php?id=12345678901234&width=300&connections=10&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowtransparency="true"></iframe>
to<iframe src="http://www.facebook.com/plugins/likebox.php?id=12345678901234&width=300&connections=10&stream=false&header=false&height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowtransparency="true"></iframe> - Click Save and you're good to go.
