Using an iFrame, someone on my website can access their Facebook account, display a list of their photo albums, and then display photos from selected albums.
At the moment, when the user clicks a photo, I display a dialog box that shows the photo's path.
All of the above works perfectly.
My next step is to pass the photo's path info back to my web page, but I'm not sure how to do that because the object, to which I want to pass the data, is outside of the iFrame and therefore unknown to Facebook. I tried going top-down by referencing it through the DOM that contains the iFrame on my website...
parent.client.document.getElementById("FBPhoto").setValue(photoReference);
...but that didn't work.
Passing the argument to a PHP script, on my site, won't work because I don't want to fresh the page on my site (since that would cause the user to lose data).
From what you've provided it looks like your JS might be wrong.
Doing something like this might get you the value you need:
var photoReference = window.frames["iframe-name"].document.getElementById("FBPhoto");
Then you need to assign it to something:
MyObject.setValue(photoReference);
Note: window.frames["iframe-name"].document.getElementById("FBPhoto") will return the DOM element called #FBPhoto and will therefore be a big chunk of HTML. Your setValue() method might not be expecting that.
I suggest you try running your script in Firefox with Firebug installed, which will allow you to dump the value of photoReference to the console to see what you're getting back.
Doy... I realized that since the Facebook connection was running in a dedicated iFrame, it wouldn't be a problem to re-direct that frame because there was no reason to leave it open anyhow.
For anyone interested, here's what I did...
The PHP (inside of index.php) displays the album photos.
The PHP also surrounds each img frame with href tags.
The link points to a PHP file (on my website) and includes an argument with the location of the large version of the photo (since my app is displaying thumbnails). Something like: "< a href="pathToMySite/get-photo.php?photopath=facebook's path ">
When the user clicks on the desired photo, its respective link calls get-photo.php (on my site) and passes the path for the photo.
get-photo.php then inserts a reference to my website's main JS file into the document head, and inserts a script into the body of the HTML document.
The script calls a JS fetch-photo function, and passes the path argument that it received from the embedded iFrame that was running the Facebook app.
The JS function closes the iFrame (since I'm done with Facebook at that point) and grabs the photo from Facebook.
Related
I have an application running in an iFrame that is embedded in a SharePoint site. The problem with this is navigation within the application does not result in a change in the SharePoint site URL. Therefore, if you were to refresh the overall page, you would be sent back to the default page of the application, not stay on the same page of the application. The reason this is an issue is sharing for social media. I have added a Facebook Share button to the application, but when it pulls the URL of the application which does not match or reference the URL of the overall site, so it just shares the application (which is not visually appealing and does not allow you to access the rest of the site).
Any body have any suggestions or know a place I can go for help? Thanks!
If I understand properly, the Facebook stuff is INSIDE the iframe?
If so, you can:
* Remove the iframe and integrate the application better with SharePoint, or
* Change the application so that it detects that it's running "alone" (with javascript etc), and if so redirect to the "big" application.
IF the Facebook stuff is in SharePoint, OUTSIDE of the iframe, you can write some javascript to update the URL in some way that matches the URL of the application. This requires that the SharePoint parent application and the iframe application run in the same domain - if they are not, this is not an option.
Note that changing the "parent" URL with JS will reload the page, UNLESS you only change the URL after the "#" part (so you can do something like:
"http://sharepoint/iframe.aspx?aa=11&bb=22#iframeUrl=http://uglyapplication/"
You'll also probably want to write JS to update your iframe accordingly if the user press "back"/"forward" etc in the browser, because changing the URL like above will still add a "step" to the browser history.
I've been reading guides and examples for a long time (hours) but I can't manage. I tried to use all html meta tag like title, description, and og:property. Also tried to use the link sharer and also to create a new blank page with just the info I want to share to facebook in order to test. Also I tried to generate an random url in php so to have always a different url variable (the url to share and also the url of the main page containing the script). I also grabbed (url linter) a lot of time the url to clean the cache of facebook. It always give me the title of the site domain as title or the url itself as the shared title and description. I don't know what to do.
The main web site is from joomla. In the code of index of joomla I put a php include if the url has the variable "articolo" id. This incuded php page has regulat head body etc. So maybe I facebook check the main meta of joomla first? So now I tried to open a popup with just the page for sharing. Look here: link
It's possible that the title is locked in, meaning that after X number of likes Facebook doesn't allow you to change it anymore. Can you give us an example URL you're having issues with?
EDIT
Ok, now the link you provided shows some very interesting output. http://modernolatina.it/wjs/index.php?option=com_content&view=article&id=96&Itemid=258&autore=6&articolo=6
First, you webserver, instead of sending back a 200 code, is sending back a 500 code.
Secondly the HTML your webserver is sending back has two HTML tags (Do a view source on the content returned)
Fix up those two issues and I think the linter will be happier with your page.
Test your page here:
http://developers.facebook.com/tools/debug
I am trying to display a comments feed on my Facebook application, I am loading in an array of Facebook user ids and an associated comment, to display the users profile picture, I am using the following snippet:
<?php echo '<img src="http://graph.facebook.com/'.$c->_user.'/picture'" />; ?>
This works fine, and gets the image, however, if I refresh my page, I get some if not all of the thumbnails will not be loaded, refresh again and they'll always be there, it's pretty consistent that when I refresh they'll appear, next time they won't and so on.
Should I be dealing with this differently ? I know that in the browser the graph API redirects to the actual image, so maybe this is what's causing my browser to sometimes not display them, say if, it took too long to load the image ?
The issue is probably what genesis φ says says, just a temporary issue on Facebook's end. But to add on to his suggestions, you might try serving the image from https:. Alternatively, you can get the full, redirect-less picture URL from the user FQL table.
It's probably just their temporary issue. If you want to be sure, download them for the first time and you could "host" them more reliabily
I have a Facebook app written in php that will display random quotes on your profile.
The box does not appear to update, it looks like it did when it was originally added.
I want to update the profile boxes on each page load (refresh), and not by a user action like clicking a link.
Any idea what is the problem and how to solve it?
This is how I did it for The Office Quotes application:
Put the random quote inside an image (many options to do this in PHP, I used the GD and Image Functions at http://us2.php.net/manual/en/ref.image.php to create a JPG containing the quote).
Accessing this dynamic image in a browser gives you a different random quote each time you refresh.
On the Facebook profile box or tab, simply link this image.
However, Facebook caches the image the first time it's loaded, so it never updates!
To force Facebook to update, you must update Facebook's image cache for the image's URL using the API function fbml.refreshImgSrc which is now accessed via the URL http://api.facebook.com/methods/fbml.refreshImgSrc and requires the access_token parameter like all other API requests. There was an announcement some time ago that this function was being deprecated, but the decision was reversed!
Setup the cache refresh code to run regularly. You can do this on a scheduled task (i.e. a cron job) or on each pageview in the application, or any other way you can think of that will cause the method to be run with the relative frequency the image will be requested by a user.
I also linked the image in the profile to a page in the app that would continually reload a new random image. Users generally would click to this page (which would refresh the image cache on each load) and they get the illusion that the image updates constantly.
Another illusion that I like even better is to add a 'Refresh' link in the profile box/tab that links to a script that refreshes the image cache and immediately returns to the user's profile, so that it actually appears to just be refreshing the profile box/tab.
Enjoy!
Profile content is cached by Facebook and does not connect to your server on every page load. This has always worked like this. No javascript runs on load/automatically, so you can't have a new quote displayed on page load.
What you can do is put a bunch of quotes in the profile content and us the fb:random tag to display a random quote on page load from the random option list. Periodically you can run a script to update the set of quotes in the user profile. If quotes are not unique to each user, you should use fb:ref handles so you just have to update the handle content, not each user's profile. Just put the ref handle in the user's profile.
I'm confused. Profiles boxes are all but gone. You shouldn't be developing anything for a profile box right now - it's just gonna disappear any day now anyway.
And even when profile boxes were still a suggested integration point, you couldn't update them in the way you are wanting to.
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.