I'm developing an application for Facebook and would like to use a lightbox or modal to display contents larger than the permitted canvas area (560). I don't have much experience with Facebook app development. The research I have completed has given me very little information regarding the issue. Loading a lightbox is fine it is making the the lightbox wider than the viewing area that is the problem.
In order to do this, you would need to be able to access the parent element from inside the iframe but because the content is from 2 different domains (parent content on Facebook server, iframe content on your server) cross domain restrictions apply and you will not be able to. So you will only be able to pop it up inside the 560 width iframe facebook gives you.
I also tried to achieve what you want, but I didn't get success because application called in facebook using iframe. And so that the effect of lightbox,modal or shadow have limited to that iframe width and height.
Simply, I am on conclusion is that the lightbox have not same effect which in normal websites.
In facebook it's limited to only canvas only.
Related
Let's say I host a website: http://www.example.com
And I load ads on my website using DFP. And everything works out perfectly.
Now lets assume another site: http://www.anothersite.com is loading our site in an iframe.
My question is, does DFP load in that iframe ? Does it depend on DFP settings such as 'Serve in Safeframe' option?
Thanks
Yes it will, DFP doesn't know anything about the outer iframe.
Safeframe controls how the inner frame in which your ads are shown is rendered and it has nothing to do with any outer frames.
SafeFrame is a cross-domain iframe that enables transparent and rich
interactions between page content and ads, while preventing ads from
accessing publisher data
I'm using FB.ui share method to share links on Facebook.I have to use this method since I want to tag friends on my post.
window.open(
'https://www.facebook.com/v2.1/dialog/share?app_id=&display=popup&redirect_uri='+encodeURIComponent(REDIRECT_URL)+'url='+encodeURIComponent(SHARE_LINK),
'facebook-share-dialog',
'width=750,height=393');
Even though my og:image has the right size, i.e 1200x630px when shared on Facebook the shared link is displayed with small thumb.
When I change the method to FEED dialog or SHARE using facebook/...//sharer.php URL large thumb is shown for the shared link on Facebook.
window.open(
'https://www.facebook.com/v2.2/dialog/feed?app_id=&display=popup&redirect_uri='+encodeURIComponent(REDIRECT_URL)+'&link='+encodeURIComponent(''),
'facebook-share-dialog',
'width=750,height=393');
return false;"
IS there any additional parameter that I need to add TO https://www.facebook.com/v2.1/dialog/share so my image is displayed correctly I.E with large thumb on Facebook?
Thanks.
I had the exactly same issue. I was using "/sharer/sharer" for sharing links and everything was working well. And when I try to use the "/v2.1//dialog/share" I noticed that on desktop, images are big (1200 width) but on mobile (web and iOS App), the share is displayed as a small square.
I think it is because when you use "/v2.1/dialog/share", Facebook assume you share a story through your Facebook App and on mobile UI, story are displayed with small square image :-(
When you use the /sharer/sharer, there is no association with your app and Facebook will just assume user share a link in his feed. And it is the only type of share that display large image on all platform (desktop, mobile and iOS app)
So basically I don't think you can force FB to display large image :-(.
The Facebook doc say that providing big image will result in big image display but it looks like it is only the case for desktop. And for mobile only link status are displayed as big image.
I'm on a bit of a deadline and I'm having a problem with the canvas app I designed as a tab on my facebook page.
Using Dreamweaver to create the canvas I have set pictures that link to external websites. Unfortunately, when you click on the linking pictures, the websites are loaded within the canvas area on facebook. I would like them to redirect the entire page to the website link.
Forgive me if this is a ridiculous question, I'm rather new at this whole thing.
UPDATE Okay, figured it out. To anyone who's just starting out like me, all you have to do to have it redirect to a new page is put target="_top"></a> just at the end of your link in the webpage code.
I'm trying to create a webpage for the iphone FB app wall link . When I try to use margin attribute on a div for the webpage, the margin attribute doesn't take affect when clicking on the wall link. If I view the same page in safari iphone browser the margin does take affect. It seems like it has to do with extra caching by Facebook of the CSS file. When I change the background color in the css file, the changes get propogated everywhere but inside the FB web browser on the iphone app.
found that FB wall post does some extra caching. to remove the caching, just pointed the css file to another file first, then switched it back after reloading the link from the wall post.
Here I am working with facebook application.
I have create page which are working in facebook iframe window.
I want to access main(Parent) window html source from iframe which create by me.
Here I have tried for
parent.document and window.top.document and window.parent
all three are not working in my case. If you have any other idea then let me know,
Thanks
You can't access content outside of your IFrame.
Otherwise you could change content outside of it and modify Facebook,
just because your IFrame is loaded inside of Facebook ;)