Ændring i måden en Facebook Like Box opfører sig på

Det var bare en lillebitte detalje der skulle på plads i et projekt vi er ved at afslutte. På et WordPress site havde vi tilføjet en Facebook Like Box på hvert indlæg, og skulle lige checke om den nu også virkede som den skulle efter flytning fra udviklings- til produktionsserver.

Men, hov, hvad? Det som forleden dag var en pop-up, var nu pludselig blevet til en fancy flyout. Meget fint, hvis det altså ikke lige var fordi man kun kunne se halvdelen...

Efter en del eder og svovlen fik vi løst problemet som i dette tilfælde skyldtes to forskellige ting:

Da sitet er responsive og indeholder iframes med webforms og videoer, indeholdt style.css følgende:

embed,
iframe,
object {
    max-width: 100%;
}

Dette rammer også vores Facebook Like Box, som Ikke virker med en max-width på 100%, så vi tilføjede:

.fb-like iframe { 
    max-width: none; 
}

Første del af problemet løst!

Her opstod så et bonus-problem, idet Facebook åbenbart syntes at der var noget skummelt ved alle de likes vores fine hjemmeside fik fra os mens vi testede - og derfor blokerede for nye likes, men i stedet bad om en beskræftelse via en, ja, via en pop-up. Hvorfor vi ikke kunne få lov til at se mere end et kort glimt ad gangen af flyout-boksen, der stadig ikke blev vist i hele sin bredde.

Anden del af problemet viste sig at skyldes at en omgivende div indeholdt reglen:

overflow: hidden;

og blev løst ved at denne reglen blev gjort mere specifik så den kun gælder en bestemt div, og ikke hele container-div'en og dermed også den iframe der indeholder Facebook Like Box.