Im trying to get a Facebook likebox+feed from a Facebook Page to show correctly on my webpage.
I am having trouble with the height in Safari, and apparently in some Chrome versions.
I cant post images because I am only on 6 in reputation.
So Ill have to try to explain:
In my Firefox and my Chrome browsers everything is ok.
But in my Safari browser and my collegues Chrome browser the Facebook likebox showing is not the correct height. It is set to and supposed to be 1200px high. But is only showing aprox 395px.
The div container it is placed in is not set to a specific height.
This is how I implement:
<div class="fb-like-box" data-href="http://www.facebook.com/Citysingler" data-width="400" data-height="1200" data-show-faces="false" data-stream="true" data-header="false"></div>
The problem online: (it is the feed in the right column):
http://www.citysingler.dk/Gaestebog/98
Any idea how to make this look right, crossbrowser?
Thx
John
Related
I have successfully embedded the facebook page plugin in my page, now I am trying to make it so the plugin only scrolls on mobile when 2 fingers are used, much like the google maps iframe embed. Don't even know where to start!
<div class="fb-page" data-href="https://www.facebook.com/<?=$siteFacebook?>" data-small-header="false" data-height='+fbHeight+' data-tabs="timeline" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/<?=$siteFacebook?>" class="fb-xfbml-parse-ignore">
<?=$siteName?>
</blockquote>
</div>
where $siteFacebook is the id of my newsfeed
As misorude pointed out, it's not possible to interact with the elements of an iframe, so I took a different tack. I overlaid the facebook iframe with a transparent div thus blocking any interaction with the iframe. on hover a message was displayed in the transparent div saying to 'click or tap to interact' (this also displayed on first touch interaction). On clicking the div (or second touch) it dropped the z-index of the transparent div behind the facebook iframe allowing the user to interact with the facebook iframe.
Just thought I'd add my workaround solution in case it points someone in the right direction in the future.
I'm trying to debug/troubleshoot why the content that is displayed in the share link/window continues to show our browser detection content which we do not want displayed. I've updated our code to detect the Facebook crawler and not show this content if it's detected but the share link is still showing this. I've even tried to use the Facebook debugger to refresh the cache but it is still not working.
The share button code I'm using is this:
<div class="fb-like"
data-href="https://www-dev.hoopladigital.com/title/11042831"
data-layout="button_count"
data-colorscheme="dark"
data-action="like"
data-show-faces="true"
data-share="true"></div>
So either the cache is not being cleared, or my browser detection code is still getting executed when it shouldn't be. The text pointed to in the arrow in this screenshot should not be getting displayed.
How do I go about troubleshooting this?
http://note.io/LvbN5K
Your og:description is empty, so most likely Facebook takes the first text content that looks relevant to it … so provide a description!
I created a fanpage and integrated a app with width 520px. Everything works fine but the context is 5px to 10px shifts to the right and so on there is a scrollbar shown at the end of page. How can I solve this.
I know scrollbars can be hidden with overflow:hidden and inside tag <body scroll=no> but this doesn´t solve the shift to the right.
You can try using the FB.Canvas.setAutoGrow method :
Please read the Facebook JS SDK Documentation of the FB.Canvas.setAutoGrow method. In that link is an explanation on how to use facebooks auto size functions to fix these sorts of problems.
The problem seems to be that facebook fanpages tabs have a html - padding with 8px!!!! to solve this I set in css: <body style="position:relative;left:-8px;">
Hi I have designed a custom facebook landing page and it is quite long but the iframe seems to be limited to a set length. getting the scrollbars turned on or off is not a problem, I can do this but regardless of having the scrollbars or not the iframe stays the same size. any ideas?
you can view the page here:
http://www.facebook.com/petsmarket?sk=app_199629183389823
cheers.
paul
Change your IFrame size to auto-resize then use: FB.Canvas.setSize
P.S: Be-aware that your JS code is broken since you have it all in one line with comments in it!
When you know desirable height the simplest way to do this is below (let it be 1200px):
<body onLoad="FB.Canvas.setSize({height: 1200})">
...
</body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.