Back with another question, but nothing to do with SQL this time!!
I am creating a site to allow users to register and make posts. When they register, they can enter a Facebook Page name, and I want to be able to embed the page into their profile page so when people view their profile, the Facebook Page will show up in a small window. I went to Facebook's Page Plugin page, but I'm not sure this is the best way to accomplish what I want. I've done plenty of searching, but haven't had any luck.
I tried putting just a single page's code in the site, but it just keeps coming up blank. This is what I got from the Page Plugin site:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/KeenesListcom-126649220715963/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/KeenesListcom-126649220715963/" class="fb-xfbml-parse-ignore">KeenesList.com</blockquote></div>
Any help is appreciated.
EDIT
Ok, so the problem is actually something with Google Chrome. I tried it in IE 11 and Firefox, and the page loaded fine. Still need to figure out why it isn't loading in Chrome.
2nd EDIT
Ok, so this is weird. I have 3 different items being displayed using iframes. The Facebook page, a Strava Activity log, and a Trailforks Activity log. The Strava and Trailforks items show up fine, but the Facebook Page doesn't for some reason. This is only in Chrome, the Facebook works fine in Firefox and IE. Here is my code:
<iframe src=https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId width=350 height=400 style=border:none;overflow:hidden scrolling=no frameborder=0 allowTransparency=true></iframe>
<iframe height=160 width=300 frameborder=0 allowtransparency=true scrolling=no src=https://www.strava.com/athletes/21039441/activity-summary/947ebf6e987358db8c8785041ad46b5a4d4ea7c5></iframe>
<iframe width=400 height=277 frameborder=0 src=https://www.trailforks.com/widgets/ridelogs/?userid=1306231&w=400px&h=277px&map=0&stats=1></iframe>
3rd EDIT: Full Code
Here is my complete code. I stripped the page down to the bare minimum, and am still having the issue. I have tried multiple computers, and it still doesn't show in Chrome while working in Firefox and IE.
<html>
<head>
<title>Test IFrame</title>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
</html>
All your HTML is invalid. At a minimum, you need to put values for properties in quotes. You should also escape any reserved entities like & as &.
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<iframe height="160" width="300" frameborder="0" allowtransparency="true" scrolling="no" src="https://www.strava.com/athletes/21039441/activity-summary/947ebf6e987358db8c8785041ad46b5a4d4ea7c5"></iframe>
<iframe width="400" height="277" frameborder="0" src="https://www.trailforks.com/widgets/ridelogs/?userid=1306231&w=400px&h=277px&map=0&stats=1"></iframe>
Ok, so I'm an idiot. I tried Chrome on 3 different computers with the same result. I happened to glance up at the right hand corner, and saw my ad blocker had blocked something, when the iframe was the only item on the page. So, I turned the ad blocker off and reloaded the page, and it worked fine. So, will have to figure out something for that.
Related
I am displaying some 3rd party banners inside an Iframe which are loading through javascript. Banners are showing inside iframe and links are openning to new window when I browse the url myself. Problem is when I am trying to advertise the url to different ptc sites. Basically this site show url inside iframe. so when my url which is itself an iframe loading inside another iframe, clicking not working. Below is my current code
<base target="_blank"> //in head section
<iframe sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads" src="<?php echo $_SESSION['ad_url'];?>" frameborder="0" id="pgl" name="pgl" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" onmouseover="on_mouseover(this)" onmouseout="on_mouseout(this)"></iframe>
As i see the source of the page that embeds my iframe found below code
<iframe sandbox="allow-same-origin allow-scripts allow-forms" id="surfsite" name="surfsite" src="https://sitename.com/sitename.php?" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
how can I make this working
If I wanted to auto-click a button element in ifarme how would I go about this working ?
function autoclick() {
document.getElementById('u_0_4').contentWindow.document.getElementById("u_0_5").click()
}
<div onload="autoclick()" >
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fweb.facebook.com%2FMaherZain&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=788255487990117" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" id="u_0_4" ></iframe>
</div>
=====> if have any other way for do that please tell me :(
You cannot do that because otherwise people would just embed a 1x1 iframe and have every visitor "Like" whatever the author wanted. It's a security issue to let different origins have access to the contentWindow of iframes pointing to a different origin.
Imagine if you were able to do that. People could just start embedding gmail or your banking website in a 1x1 iframe and then trigger a few clicks and keyboard events to reset your password.
I have been trying ot hunt this down all afternoon, Im pretty new to all this and am building my first site with php
what Im trying to do is I have a google maps embed code stored in a Db which I have assigned to a variable $map, I want to inject the embed code into an existing div.
So basically a click here for map. I may be way off on what I can do here.
Im sure there is a fancier way to do this but Im just learning and trying something simple.
Sorry if this is something that is obvious.
I have no code to show as i have murdered it and it is an unhelpful mess now.
If the page has already been served to the user, you'll need to use javascript to update the div, or reload the page. I jQuery's .post method to dynamically refresh divs with using AJAX. Info at http://api.jquery.com/jQuery.post/.
I use the following code on my website, which sounds similar to what you're trying to do, but in my case, I'm passing the address to the embed code in the $addresssubjectfullgoogle variable:
<iframe width="100%"
height="350"
frameborder="1"
scrolling="no"
marginheight="0"
marginwidth="0" src="
https://maps.google.com/?f=q&t=h&ie=UTF8&output=embed&q=<?php echo $addresssubjectfullgoogle;?>&z=18&ll=<?php echo $addresssubjectfullgoogle;?>&ie=UTF8">
</iframe>
I suspect that you could do something similar except that in your case, the same could might look something like this:
<iframe width="100%"
height="350"
frameborder="1"
scrolling="no"
marginheight="0"
marginwidth="0" src="<?php echo $map;?>">
</iframe>
I hope that's helpful.
Hey there im trying to use google maps iframe to show a map with the direction between 2 locations in my site.
The problem with this is that i constantly need to reload the page with different addresses and i am unable to simply replace the iframe's cities in order to bring up new results.
Heres the code for the iframe
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=d&source=s_d&saddr=london&daddr=Leeds,+UK&hl=en&geocode=FaHzEQMd-wv-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFT_xNAMd6V7o_ymZvWTaSj55SDGp3BMC_bqtUQ&aq=1&oq=l&sll=53.800651,-4.064941&sspn=22.225372,67.631836&mra=ls&ie=UTF8&t=m&ll=52.654755,-0.848175&spn=2.29307,1.44201&output=embed"></iframe><br /><small>
What i was trying to do is simply replace the city names through php(e.g. london with <?php $firstTown ?>) but no luck in updating the result as it appears to be using the old coordinates.
How would i go on about viewing a map with php variable cities on every page load?
Thanks for your help
<?
if ($partner->post_adres)
{
$map_url = $partner->post_adres.','.$partner->post_postcode.','.$partner->post_city;
$map_url = str_replace(" ", "+", $map_url);
?>
<iframe width="350" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.nl/maps?q=<?=$map_url?>&hl=nl&ie=UTF8&t=v&hnear=<?=$map_url?>&z=13&output=embed"></iframe>
<?php
}
Works for me
I'm trying to make a link to my website and facebook, putting some meta data on it! My target is to manage this data :
<meta property="og:title" content="MY_PAGE_TITLE" />
<meta property="og:description" content="MY_DESCRIPTION_TEXT" />
Unfortunatly, my web application (on PHP) is not well structured, and I haven't define a correct MVC! It is very procedural, so the infos that I should put on these meta tag are extracted, from database, after the rendering of the main html header section.
So, what I tried is this :
<script type="text/javascript">
$('head').append("<meta property=\"og:title\" content=\"MY_PAGE_TITLE\" />");
$('head').append("<meta property=\"og:description\" content=\"MY_DESCRIPTION_TEXT\" />");
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]?>" send="false" layout="button_count" width="130" show_faces="false"></fb:like>
But in fact, it doesnt works! I mean, append meta tag on the head and than try render it.
Do you know some strategies to do it? I'll avoid the option on insert directly them on the head, because, as I says, the text I'd like to insert is get after the head section (due to a wrong organization of the website).
I believe in another solution, hope you know one!
Sad but no other way than to change your structure. The reason for the og: tags not being processed even with your javascript is that facebook doesn't render the javascript. It just asks for the page and reads the OG tags from the top just like static HTML would be.
Your only option is to change your structure and load your content before the output. You don't need to change to MVC for that, juste loading your content BEFORE the head will save you heaps of work and still work...