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!
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
I am having a problem getting a div containing facebook like/send buttons to expand when the buttons are clicked. I have searched and tried and tried to fix this, but I'm hitting a wall. I believe it has something to do with how the buttons render an iframe, but I'm not sure.
Here's the code, plain and simple (with an example link for og data).
<div id="fb_btns">
<fb:like href="http://www.imdb.com/title/tt0117500/" data-send="true" layout="button_count" width="450" show_faces="false" ></fb:like>
</div>
and the non-expanding div can be seen here
http://spadeballink.com/GALLOWS/TheGoddamnGallows.html
Any help counts! Thanks in advance!
*Also there is no css declaring the height of this div, the only heights declared are for html and body to be 100% (needed for the background image).
Are you using XFBML or Iframe version of like button? For Iframe version you need to use layout=standard for people to be able to see fly-out comment box.
I have included the facebook like plugin
I have added below the title of my article.
The like button is displayed well and is working but...
When we click like a popup appears so that the user can post some comment.
That popup is distorted and the content is overflowed and the publish and close buttons for that popup are away from the layout.
Here is a screen shot...
I have added a border to the div which contains the facebook plugin html code.
Here is the live url where you can see the problem.
I was checking in firefox 9
In that popup i cannot see the publish and close buttons.
here is the live url
http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm
sample code
<div class="fblike" style="border:1px solid red;">
<fb:like href="http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm" send="false" show_faces="false" layout="button_count"></fb:like>
</div>
also you can view source.
Remove this CSS from your style in your head section of your page and it will popup fine.
/* for facebook width 100% */
iframe.fb_ltr { width:100% !important; }
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.