I have the following site, I just added the facebook like button, but after clicking on the like button, the iframe will appear beneath the content. I also added the google share and that is working fine. What can be the problem with the like/send buton?
Perhaps it is because in your CSS, you have overflow:hidden in your #maincolumn_middle. It will hide any elements within it, including the pop-up iframe window. Removing the overflow:hidden would show it.
Related
Im trying to add a facebook like button to my website, however when you click the like button, the share bubble appears under the content.
Im using facebook´s HTML5 button on squarespace
You can see the problem here, at the bottom of the page
http://mindarin.com/
The share bubble appears under the logo, it happens everywhere though, if I place the button where I want to ( top of page ) the bubble appears behind the main image.
Thanks!
You can hide the share tooltip by adding overflow:hidden;height: 21px; to fb-like widget css.
<div style="overflow:hidden;height: 21px;" class="fb-like" [...] />
I am building a Facebook Page Tab. It links to a website that is being loaded into Facebook as an iFrame, following strictly along the lines of developing Facebook page tabs.
I notice though, on Facebook Stories (a tab from the Facebook fan page) they have a border around the loaded iframe.
It does not appear at the original source of the iframe, though. And I do not see an option for it in the Facebook Page Tab settings - it also appears to match the style/css of the facebook iframe.
My question is: How can I have a border surrounding an iframe loaded in another page (this instance, Facebook Page Tab) that does not appear at the original source of the webpage?
Thanks!
The Facebook stories tab you refer to doesn't have a border on the iframe. The border is set on the body with css.
If you check the source of the tab : https://www.facebookstories.com/tab/
You will see the border next to the scrollbar.
I hope this answers you question :)
I have a link, it looks like that:
link text
The target (shop) is an iframe with the name shop. Clicking the link and showing someplace.html in the iframe only works, if the page that contains the iframe is already loaded.
So my problem is, how can I make it work even if the page that contains the iframe is not loaded? I tried loading the page with the iframe by redirecting to it when the link was clicked using its onclick, that worked, but I still have to load someplace.html afterwards and this is where I am stuck.
Any ideas how to solve that? I can use jQuery or plain JavaScript ... doesnt matter.
Thanks!
If you have a link with a target "shop", you must have a iframe called "shop". It is possible to load the iframe with a blank page if there is no initial content.
I'm adding facebook login buttons to fancybox (version 1.3.4) modals (one for join, one for login). The facebook buttons all get instantiated when the page loads, but are hidden. After triggering the fancybox login modal, the facebook buttons get rewritten in the modal and load correctly the first time. However if you close the modal and then reload it a second or third time, there is no facebook login button. It's just blank. When I look at the inline html block
that fancybox based the modal on, the facebook button markup that was generated when the page initially loaded is gone...actually not completely gone, but the button code deep in the iframe is wiped out.
I've seen suggestions to iframe these facebook buttons, so I tried adding an iframe instead of the raw facebook button markup. Note that I am not using the iframe fancybox type and I can't currently do that. When I include <iframe src="/myfacebookbuttonpage"></iframe> in the modal section, again it loads correctly the first time and then after closing the modal, looking at the source I can see the iframe rewritten as <iframe src="about:blank"></iframe> and the innards of the iframe are blank.
Anyone have any idea what's going on here? Or is this attempt to include facebook login buttons in fancybox modals completely wrong for some reason?
It's a bug in fancybox v1.3.2+ when using inline iframes.
As a work around, you may edit the fancybox js file or apply the workaround in your custom fancybox script.
Go here for further instructions
On Facebook you can browse the site without affecting the floating chat windows. Seems like if the main page was inside an iFrame and the footer and chat windows where floating outside.
(source: k-director.com)
Is the main content inside an iframe or are the footer and chat windows the ones inside an iframe?
The later doesn't seem possible because int this case when you click in a link in the main page everything would have to reload, including the footer iframe.
If you refresh the page the chat windows are reloaded, but if you browse the site by clicking links they are not.
Thank you.
If you install FireBug and enable the net monitor for Facebook, you'll see that when you click most links inside the application, you're not doing a full page refresh, but rather an AJAX call which updates the page with the new content.
It looks like a new page, but in reality you're on the same page with just about everything but the chat-bar replaced.
Probobly just an absolutely positioned div, containing a scrolling div for the content. Ajax would provide the content.
The chat windows do indeed refresh when you load a new page, they maintain their viewstate however (open/close/chat history).
It's an absolutely positioned div, positioned at the bottom of your browser window. It's not hard, I cloned the Facebook chat for ClockingIT from scratch in a weekend.