I was setting up a Facebook Page for a client and noticed that it was taking forever to load the IFrame I had pointing it to. When I visited the IFrame contents without going through Facebook it was really fast, but when through Facebook it took up to 5 seconds before it even started loading the IFrame contents.<\/p>\n
I was going to try different apps other than the “Static HTML: IFrame Tabs” but everyone claims that this is the best app for loading an iframe into your facebook page. I accepted this, and decided that perhaps if I couldn’t improvement the performance of it, I could at least let our visitors know that something was loading and to please be patient. I feared that the blank page while it was loading would make users think it was broken.<\/p>\n
Here’s the code I came up with:<\/p>\n
\n<img src=\"https:\/\/www.yourserver.com\/loading.gif\"\r\n width=508 height=381 id='loadingimg'>\r\n\r\n<iframe src=\"https:\/\/www.yourserver.com\/iframe.php\"\r\n frameborder=\"0\" width=\"520\" height=\"2500\" scrolling=\"no\"\r\nid=\"theiframe\" style=\"visibility:hidden\"\r\n onload=\"document.getElementById('loadingimg').style.display='none'; \r\ndocument.getElementById('theiframe').style.visibility='visible';\"><\/iframe><\/pre>\n<\/blockquote>\nJust place this in the setup of your Static HTML contents and it will show a loading image (you’ll have to change the path to an image of your own) while it’s loading the IFrame (also don’t forget to put in the path of your iframe \u00a0instead).<\/p>\n
Hope that helps!<\/p>\n","protected":false},"excerpt":{"rendered":"
I was setting up a Facebook Page for a client and noticed that it was taking forever to load the IFrame I had pointing it to. When I visited the IFrame contents without going through Facebook it was really fast, but when through Facebook it took up to 5 seconds before it even started loading […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-174","post","type-post","status-publish","format-standard","hentry","category-software","category-web"],"_links":{"self":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":10,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shanelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}