I'm basically creating a 520px wide welcome page for Facebook which I will upload onto the server and then Iframe it into a Facebook fan page. I'm doing this using HTML, CSS and JQuery rather than the old FBML method.
I've seen a lot of companies using an overlayed image to tease the user to 'like' the page. Once the user have liked the page, the content underneath is visible.
Examples:
https://www.facebook.com/redbull
https://www.facebook.com/smirnoffus
Red Bull - when the like button is triggered the transparent image is hidden to show content underneath
Smirnoff uses an image to give the illusion that the image is overlayed on top of the content. Somehow when the like button is triggered, the image is swapped for content.
Can anyone shed any light on how this can be acheived? I don't mind which one - Smirnoffus looks easier but might be a pain as everytime I update the content, I'll need to update image too.
When a user likes your Facebook fan page, Facebook will reload the whole page. You can then use server code to inspect the signed_request post parameter that they will send over. This question has an example code of how to detect if they liked the page in server side code.
Related
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 am using the jQuery PrettyPhoto as an image gallery. Each image has it's own facebook-like button on the bottom of the image modal. I'd like to have the image that was liked to appear as the thumbnail on the 'user who clicked like's status update related to liking the image. (Also, I'd like the title to be unique, but I am assuming they can be changed the same way, if at all.)
As of now, the Facebook snippet seems to be scraping the gallery meta properties on load, grabbing the og:title and og:image content that is listed there. I've tried to dynamically change these values whenever a new gallery image is clicked, but it seemed to be using the values of the page loaded meta content (which makes sense).
Is there a way to change what the facebook like button sees as the image it should use on-'like'? Each gallery image is dynamically loaded on the same page, only changing the achor value per image. I've tried a number of ways with no success, but maybe someone has some experience with this or a similar issue.
Thanks for any help or leads!
As you didn't supply any example, I checked with here. As I can see they also use original like button, so the og:title and og:image should be different in each image. Instead of images, can you use html in every popup and put image, your like button etc there?
PS: Or else, you have to dynamically change the title of gallery by javascript, which is not a very idea situation. Facebook will always look for og:title for scrapping data, you can't simply feed it by custom code.
I have disable scroll in my app, so there is only scroll from facebook - it looks cute and I like it, but if came to my app directly on site, there is also no scroll bar. I tried to detect if user load page with url http://mysite.com or http://apps.facebook.com/myapps, in both ways I get the same direct address link, so I cant detect if user view my app via facebook and I need to hide scrollbar or view it on site and I need to show scrollbar. So is there a way to detect how user view my app?
What server side language are you using? If you are inside the facebook iframe, your page will be requested with a post variable set called signed_request. You can check if that has been set in your code, if it has you know you are inside the facebook iframe, if it's not then you are on your site. From here you could either conditionally change your css to allow the content to overflow properly and get scrollbars, or redirect them into the facebook app.
I have created a custom Facebook like button.
How do make it that when I click the button, it will trigger the like button provided by Facebook like the one below?
According to facebook policy on Social Plugins point 4 states:
"Don’t obscure or cover elements of social plugins."
You can't change the image directly because it's provided by Facebook.
The Facebook button is in an iFrame with a source that is on a different domain, Facebook’s domain, and so you can't change the button as it's protected by the same-origin policy.
Also, Facebook’s policy prohibits changing their buttons and logos when using embedded content from Facebook, like social buttons.
So, you're not suppose to be able to change the FB buttons, and even if you could it would be against the Facebook Terms of Service.
But... if you still want to do it, you can use the native Facebook button and lay your own image on top or below the Facebook button to fake a custom button.
Laying your image on top is only possible if you use CSS3 pointer-events, wich will make your image click-through and the click event will work "through" your image and actually click the Facebook button.
This only works in newer browsers that support Pointer Events.
Another option is to lay the image behind the FB button and set the FB button's opacity to zero.
I have used this several times myself, and with a little digging around in the Facebook code you can attach hover events and everything else to make it look like a custom button. You would have to find what elements to set opacity : 0 on.
Have never spent any time trying to figure out how to make the unlike function of the original button work on a custom button, but it's probably possible.
All my attempts to actually trigger the FB button with javascript or jQuery trigger() have failed, but maybe someone else has figured out how to do it?
When you create a html element with fb-like class, facebook javascript SDK convert it with a like button when document loaded. You can make a custom element and trigger click event of like button when user click your custom button.
For example :
<input type="button" id="mycustombutton" value="Like">
<div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
jQuery code:
$("#mycustombutton").click(function(){
$(".fb-like").find("a.connect_widget_like_button").click();
// You can look elements in facebook like button with firebug or developer tools.
});
Update
Facebook SDK has been creating like button in an iframe and browsers not allowing to intervention to the iframe in the page. I think add event listener to element in iframe does not possible anymore.
This is not allowed for the obvious reason that it would lead to fraud. Imagine if each time you clicked an image on the web you don't know if it's an actual image or if it will result in a like and show up in your FB feed. It would be disastrous.
If you do want to do this legitimately, you will need to create an app and have the user authorise the app when he visits your site. This will open a popup where the user agreed to let the app access his FB account. Once that is done you can then send the like request on behalf of the user via a server-side script. In other words, it's not worth the effort.
If on the other hand you just want to get the like count for a page and display it however you want, you can do so via a request to "http://graph.facebook.com/#{url}" which will return a JSON payload with the number of likes. In jQuery it would be:
$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });
I think that facebook goes through great lengths to make sure people can't trigger the "Like" button. This is to prevent scripts from automatically clicking the "Like" button when someone visits the site.
You may be able to override the style of it using CSS and have your image show instead.
You can overlay your button on top of the Facebook like button and use css to hide the Facebook button.
Not sure on the legalities of this however.
You could try to trigger an Ajax request like this
FB.api(
'me/og.likes',
'post',
{
object: "http://samples.ogp.me/226075010839791"
},
function(response) {
// handle the response
}
);
https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
http://sharingbuttons.io/ allows to make social media share buttons with no javascript at all (Not a like button like in the question…). For Facebook, it just uses a link like this:
<a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackoverflow, you have to cmd + click to open the link in a new window.
Customize it with your own CSS and, to mimic the share button, just open the url in a popup instead of a target="_blank".
OK, this is not the question you might think. We need to set up a tab on a Facebook page & of course that now means iframes, not FBML.
The initial content displayed will be a graphic containing a question. The answer, in the shape of another graphic, is to be revealed by clicking on the first image. The initial image must be replaced by the second (which shows the answer).
"Like" does not enter in to this: the function is the same whether the user "likes" the page or not. It's just "click this image to display the answer".
As iframe newbs, this is causing us a bit of a headache - so can anyone help ?
Thanks.
The iframes in Facebook now function just like a normal web page. Just capture the click event on the initial image using javascript (and/or jQuery) and display replace it with the new imagery.