I don't usually deal in exclamation points, but I have hours before this goes live. I have the following page full of FBML for a Facebook tab on a product page:
<fb:fbml version="1.1">
<div id="container" style="width: 520px;">
<fb:visible-to-connection>
<div>
Yay!
<a href="{link}" style="border: 0; display:inline-block;">
<img src="{image link}" style="border: none;" />
</a>
</div>
<fb:else>
<div>
<img src="{image link}" style="border: none;" />
</div>
</fb:else>
</fb:visible-to-connection>
<div class="{a css class I have to censor}">
<img src="{image link}" />
<p class="nopurchase" style="font-family: 'Trebuchet MS Gothic', Arial; font-size: 10px;">
some text.
Click for something.</p>
</div>
</div>
</fb:fbml>
Basically it's a fan gate. To get past it the user has to like the page it resides on. It parses and renders, but for whatever reason both conditions (the div for fans, and the one for non-fans) are drawn. I have no idea why fb:visible-to-connection isn't doing this.
The answer is simple. If you are an admin of the application you are using, visible-to-connection will show you everything, regardless whether you're a fan or not. Normal users will see the expected functionality.
Yep, if you are an admin you get the trap all the time. If you go to the page with an account that is not an admin you can like the page and then see the content as expected. Thanks
Go to ACCOUNT on the top right of your screen
Click USE FACEBOOK AS PAGE
Select another page, then check your functionality - this should work
Related
<div style="position:relative;width:fit-content;height:fit-content;">
<a style="position:absolute;top:20px;right:1rem;opacity:0.8;" href="https://clipchamp.com/watch/Eppk7v1l0gO?utm_source=embed&utm_medium=embed&utm_campaign=watch">
<img style="height:22px;" src="https://clipchamp.com/e.svg" alt="Made with Clipchamp" />
</a>
<iframe allowfullscreen style="border:none" src="https://clipchamp.com/watch/Eppk7v1l0gO/embed" width="640" height="360"></iframe>
</div>
I would like to remove that screen and once I enter my home page, I don't have to go through a blank screen, I have done a lot of research, I hope someone can help me, thanks
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
I have tried searching for a solution everywhere but could not find it. Hence posting a request here.
We have a website built on php code-ignition MVC framework, but the issue is with HTML rendering over various devices imo. a certain section on the bottom of the a rendered page disappears on iphone, it renders fine on ipad and normal browser. I have saved the page as HTML and am able to successfully reproduce it via chrome for devices (from developer tools), by switching over various devices.
The designer who helped create these templates are not accessible anymore, so I am not able to get any further help. I suspect it to be a CSS issue. The website uses twitter-bootstrap.
Screenshots:
Normal Browser & Iphone redering comparison:
(the div in question is marked by the arrow)
I have looked into the view source and the div in question appears on both versions in the HTML source:
<div class="button-holders button-overlay" id="button_holder">
<div class="col-sm-3 col-xs-3 noway" id="noway" style="display: block;">
<a id="noway1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/button.png" width="70" height="70"></a>
<a id="noway1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('1', '0')"> NO WAY</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 nah" id="nah" style="display: block;">
<a id="nah1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/nah.png" width="70" height="70"></a>
<a id="nah1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('2', '0')"> NAH</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 sure" id="sure" style="display: block;">
<a id="sure1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/sure.png" width="70" height="70"></a>
<a id="sure1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('3', '0')"> SURE</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 ohyeh" id="ohyeh" style="display: block;">
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/heart.png"></a>
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('4', '0')"> OH YES</a>
</div><!--noway-->
<div class="report_abouse_style" id="report_abouse" style="display: block;">
<a class="badge badge_edit" id="report_abouse1" style="cursor:pointer;text-decoration: none;"> Report Abuse</a>
</div>
Could it be something that can be fixed via modifying the CSS?
I am attaching the html files to reproduce the issue locally: http://filenurse.com/download/c5d96491585893ee917842a6f11f8166.html
Any help in the right direction would be greatly appreciated.
Thanks in advance,
AD
I am well aware that there are almost 10 duplicates of this question. But solutions of none of them work for me. So here are the details:
I am using carousel from bootstrap. I use carousel to display set of 3 divs on each cycle.
The structure is as follows:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="item"> <!-- this div has display:none -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Above is the stripped down version, just to leave out the unnecessary stuff. The problem is, all the Facebook like buttons inside the div which has display:none set have width and height set to 0.
This problem occurs in Firefox(the latest version).
I am using the HTML5 version of like button generated using FB like button configurator.
Below is the resultant like button code in the hidden div:
<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered">
<span style="height: 0px; width: 0px;">
<iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src="">
</iframe>
</span>
</div>
The like buttons in the active divs are the only ones visible. Even those in the modals (which are hidden initially) are not visible too.
How do I make it visible when div has display:none?
I had the exact same issue you are having and my code solution is below. The key thing to note is that anytime you see the facebook generated code having a height and width of 0 it means that the facebook button is loaded while the CSS on it is display:none. You can't just force it to be displayed because it is possible that the facebook button hasn't fully loaded by the time the bootstrap carousel has loaded. The trick is to display all your items in the carousel using active on the initial load then once your facebook buttons have loaded you can remove active from your non-starting slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="active item"> <!-- this div also is active for initial load -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
window.fbAsyncInit = function () {
FB.Event.subscribe('xfbml.render', function () {
$('.carousel-inner>.item:not(:first-child)').removeClass('active');
});}
If you set a div to display:none; by default all of the child objects will have display:none which means they wont show up. Same if you set the size to zero.
IMHO it's not the right way to do it, but try setting the child object to display: block; or display: inline; and giving it a defined size.
Put iframe version of Like button in any hidden content and it will work.
worked for me like a charm
I had similar issue but only in IE. I saw that iframe width and height stayed 0. This solved my problem:
.fb-like.fb_iframe_widget iframe{
width:60px !important;
height:60px !important;
}
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.