Facebook Iframe tab - Show the native photo lightbox? - facebook

I'm making Iframe app for Facebook's tab page. It has photos listing pulled from an Album.
Is there a way to show the native lightbox / popup for commenting. The one like shown in the picture below:
From the Graph API, I got the photo ID and all the data. Is there a way to initiate this event?
I can't seem to find the right term to Google it. I found an answer from 2011 saying it's impossible. Is it possible now?

As far as I have found, there's no way of doing this.
So, the simplest alternative is to open the photo in new browser tab.
Your link:
<a data-url="<?php echo $photo_url; ?>">
...
</a>
Javascript (using JQuery):
$("[data-url]").on("click", function(e) {
e.preventDefault();
var url = $(this).data("url");
window.open(url);
});

Related

How to customize shared information with Facebook Share methods

Im trying to share some content with the share dialog of facebook.
My target is to share a product that a costumer bought. I like to share a custom text, an image of the product and the product link.
It should look like that:
I know that Facebook scrapes the URL I pass and gets it information based on the page, but I really wish that I can pass the text at least to the share dialog.
So the question is how to customize the informations that are being shared.
I tried different solutions, like using the sharer.php link and with the FB SDK with share_button that uses FB.ui.
Sharer.php
<div class="fb-share-button"
data-href="http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary"a-width="100">
</div>
Share-Button with JDK
<div class="fb-share-button" data-href="http://www.gartenxxl.de/p-1473049000">
</div>
I did not try to use the Javascript SDK and the FB.Ui method to create a share-dialog, because I did not want to register as Facebook-Developer yet and create an App for the FB-Api-Key, but maybe thats the only way.
Then I would try that like this:
JS
$('#'#'#share_button').click(
function(e){e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: 'This is a Description',
message: ''
});
});
});
Unfortunately, dynamic content is not really possible anymore:
The feed dialog is deprecated and should not be used anymore.
Facebook will probably remove it sooner or later so i would not count
on it.
Even if it would be possible to add a custom message with a parameter, it would not be allowed. According to the platform policy, the message must be 100% user generated, prefilling is not allowed.
All the existing (and NOT deprecated) possibilities only take the URL as parameter and they read the title/description/image from the Open Graph tags of that URL.
The best you can do for bought products is to use the sharer.php, the Share Social Plugin or the FB.ui share dialog. If you want a custom share button design, you would need to go with sharer.php or FB.ui share, of course.
Btw, this link may be helpful for the Open Graph tags: http://ogp.me/

Wordpress : How to add social media share button on my website?

I want to add facebook share button on my website, that should just post my website's content on the wall. who want to share it, i need to share link + title.
I have researched a lot but did not get anything. Pleas help me in this.
I have this code that suppose to work, but doesn't work. If this helps you in anyway that would be great.
i need for facebook, twitter, likein, google plus
<a target="_blank" href="http://www.linkedin.com/shareArticle?summary=&title=<?=$rowB['title'];?>&mini=true&url=<?php the_permalink(); ?>&ro=false&source=" class="string in"></a>
JS
function fb_shar()
{
var sharer = "http://www.facebook.com/sharer.php?u=";
window.open(sharer + encodeURIComponent(document.URL), 'facebook-share-dialog', 'width=626,height=436');
}
function pl_shar()
{
var sharer = "https://plus.google.com/share?url=";
window.open(sharer + document.URL, 'sharer', 'width=626,height=436');
}
i suggest you to use a plugin like Sharethis that's going to have all the options you gonna need and have many other options.
Why don't you use a Wordpress plugin. Like i.e. http://wordpress.org/plugins/sociable/

Empty Facebook share dialog box

There's a quite a few products and services on this site I manage. They all have a Facebook share dialog. However, when clicking on the share button (for all of them), an empty Facebook dialog box appears:
My code is exactly what is given on the facebook site:
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
Any ideas on what could be causing this?
Thanks to +phwd over in the #facebook freenode chatroom for the answer:
My link was wrong. I should have included this in my original post. Here's what I had before:
https://www.facebook.com/sharer/sharer.php?title&url=http%3A%2F%2Fwww.some_site.com%2Fsome_page
I needed to do 2 things to fix this:
Remove title
change url to u
So it comes out like this:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.some_site.com%2Fsome_page

Link to a facebook application from a facebook page does not work?

I have a ready facebook application that should be linked to a facebook page. I am trying to link the canvas url of my application to a button in the page with the help of javascript by calling:
function onBtnClick() { window.location = "http://apps.facebook.com/CANVAS_URL/"; }
When I click the button that is supposed to take me to the app I get only an empty page with a blue box and "Facebook" string inside it (pretty much looking like the facebook logo)
This box is a link to my application and if clicked takes me to http://apps.facebook.com/CANVAS_URL/
The same problem occurs in the application, where I try to link the facebook page. The link there is a regular <a> tag.
Do you have any ideas how to redirect to an app without this additional "Facebook" page?
Thanks in advance,
Martin
Use this instead:
top.location.href = "http://apps.facebook.com/CANVAS_URL/";
You need the upper frame (Facebook) to redirect.
If using a simple <a> html link, try target="_top"

Facebook Graph API using ASP.NET with fancybox

Anyone know of some trick I can use to get facebook to authenticate a user within a fancybox iFrame? ... when I use the following code facebook dosent present the user with a login box, rather it gives them a link to facebook which puts the user back in the parent window
<a id="aFbLogin" href="https://graph.facebook.com/oauth/authorize?client_id=XXX&redirect_uri=http://ahost.com/callback.aspx&scope=email" type="text/html"><img style="border-style: none"
src="/Images/fBookLogin.png" alt="FaceBook Login Button"
title="Login with FaceBook" id="btnFbLogin" height="36" width="67" /></a>
Then some JavaScript to add the click event handler ... the pop up works .. but Facebook seems to not like being in an Fancybox-iFrame
Facebook has various measures (using css and javascript) in place to ensure that it is never hosted in an iframe. I'm afraid you are limited to using the popup implementation provided with the javascript sdk.