Solved

facebook like box problems

Posted on 2013-12-31
19
407 Views
Last Modified: 2014-01-26
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
19 Comments
 
LVL 4

Expert Comment

by:Kent Fichtner
ID: 39748481
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
 

Author Comment

by:nsitedesigns
ID: 39748494
it used to work ok at that size....
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39749468
try adding the following code at the end of your stylesheet...

.storyInnerWrapper {
width: 110px !important;
}

Open in new window

0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

Author Comment

by:nsitedesigns
ID: 39750078
Nope, that didn't help.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39767833
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
 

Author Comment

by:nsitedesigns
ID: 39768211
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
 
LVL 25

Expert Comment

by:dgrafx
ID: 39768224
what class or id is the green box?
can you set it's padding?
0
 

Author Comment

by:nsitedesigns
ID: 39768251
I don't know.  The "box" is generated by facebook.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39768295
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
 

Author Comment

by:nsitedesigns
ID: 39768436
DIdn't do anything.  : (
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39768505
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
 

Author Comment

by:nsitedesigns
ID: 39768661
this is what i found but it didn't really help me much.

http://screencast.com/t/oODHwN6gO
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39768673
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
 

Author Comment

by:nsitedesigns
ID: 39768756
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
 
LVL 25

Accepted Solution

by:
dgrafx earned 500 total points
ID: 39768834
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
 

Author Comment

by:nsitedesigns
ID: 39810625
was not able to solve problem.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39810632
was not able to find solution but still gave points to this suggestion since it seemed the most logical.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 39810688
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question