• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 448
  • Last Modified:

facebook like box problems

Facebook Like Box doesn't display on Safari.
In Firefox, the verbiage in the box is very narrow.  Is there a way to widen it?  See screenshot below.

http://screencast.com/t/bO7uV1oh1l

http://uwofsc.org/
0
nsitedesigns
Asked:
nsitedesigns
1 Solution
 
Kent FichtnerInformation Technology Systems SupervisorCommented:
I get the same thing,  the only thing I can see is that in the code it says

 <div class="fb-like-box" data-href="https://www.facebook.com/uwofsc" data-width="225" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

Open in new window


They set the width to 225, so it would be an issue with the website.
0
 
nsitedesignsAuthor Commented:
it used to work ok at that size....
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
try adding the following code at the end of your stylesheet...

.storyInnerWrapper {
width: 110px !important;
}

Open in new window

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
nsitedesignsAuthor Commented:
Nope, that didn't help.
0
 
dgrafxCommented:
you should be able to control it like this:

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
      max-height: 400px !important;
      background-color:#fff;
}

set your own width and other settings

good luck ...
0
 
nsitedesignsAuthor Commented:
That didn't work either.   I didn't modify the width since it was already at 100%.  I don't need the outside box to be bigger.  i need the text to not wrap around the icon.  

See link below.  The red outline shows the current text margin.  The green outline shows how it used to be and how we want to to display.

http://screencast.com/t/Z2yTHfCJo
0
 
dgrafxCommented:
what class or id is the green box?
can you set it's padding?
0
 
nsitedesignsAuthor Commented:
I don't know.  The "box" is generated by facebook.
0
 
dgrafxCommented:
yes i realize that it is ...
you may need to experiment and figure it out
try using the code i posted above and add padding:0px !important; - as a starting point if not a solution
0
 
nsitedesignsAuthor Commented:
DIdn't do anything.  : (
0
 
dgrafxCommented:
what browser are you using?
if Chrome then just right click on the like box and select inspect element.
you'll be able to see what the different elements classes or ids are.
you can do the same with ff - i just don't know off hand how it's dev tools work.

that's what i mean by experimenting to figure it out.

see attachment
uwofsc.png
0
 
nsitedesignsAuthor Commented:
this is what i found but it didn't really help me much.

http://screencast.com/t/oODHwN6gO
0
 
dgrafxCommented:
why isn't it helping you?
it shows you all the elements and their classes and id's - even inherited styles of everything that makes up the like box.

in the screenshot you have 1 element selected - if modifying it's style has no effect then move on to another one.
plus the style you add needs to be after the facebook code.
0
 
nsitedesignsAuthor Commented:
because when i select the text "make plans to attend this event on March..." it doesn't display anything in the code view except highlighting the h3 tag.  So, how do I tell which class is associated with the text of the event?
0
 
dgrafxCommented:
ok - you need to move your mouse around in the bottom text - ya know where the elements are described.
the associated element above on the webpage is highlighted.
you can expand collapse element descriptions as well.

refer to the screenshot i posted of your website.
that shows you exactly which elements you need to be looking at - a starting point anyway.
do you see where mainWrapper is highlighted?
well create a class of mainWrapper and set it's width to 97px as shown in this new screenshot.

in the screenshot you posted it appears you are looking in the wrong place.
uwofsc2.png
0
 
nsitedesignsAuthor Commented:
was not able to solve problem.
0
 
nsitedesignsAuthor Commented:
was not able to find solution but still gave points to this suggestion since it seemed the most logical.
0
 
dgrafxCommented:
i'm really sorry you didn't get the solution to work.
i went to your site and opened F12 tools and made the changes i described above.
once you discover what to do using that method you then add your own style which overrides the line that causes the problem.
such as:
<style>
.mainWrapper {
     width: 97px;
}
</style>
note that fixes like this need to be placed on the page after the widgets script and style so that it can override the problem.

thanks for the points ...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now