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.
Related
I have included share button in my website. The share button works fine in web browsers.
But when access through mobile, after clicking the share button, the share popup size is same as web browser. So it is not getting displayed properly.
Can anyone please suggest, how to alter the height and width of the feed popup?
Thanks.
Afaik you cannot change the appearance and size of the popups made with FB.ui. You could try opening your own popup:
https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.0
See "URL Redirection".
One other possibility is to use the "sharer.php", it is even easier to handle because you only need to add the URL as parameter and it will automatically get the Open Graph data from that URL.
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 am working on a project where I need to manipulate the button in a few ways.
Is it possible to just have the button and not the 'X people like this' text after it?
Does it have to be for one's own page or can it be easily configured, e.g. can I have a button that when clicked likes the fan page for Coca-Cola?
If so, is it possible to get the pop up when you hover over the button, like the pages down the left hand side on https://www.facebook.com/Google
Thanks very much in advance for your help. Please let me know if I have been unclear.
You could try the button_layout layout, which just has the little speech bubble with the number of likers. If you don't like that, you can cut that bubble off by setting the width of the parent container to less than the width of the button.
You can use whatever page URL or web page URL you want.
Hovercards aren't available on fb:like right now, but might be at some point.
More documentation here.
I am trying to add facebook 'like' buttons and tweet buttons at the end of each blog post on my tumblr blog. I used the 'minimalist' theme on tumblr. Ive tried just about every method to insert the html properly and nothing has worked. Below it the current full HTML that I am using. If you go to my site right now there is a facebook button and it actually works but there is a ton of blank space underneath that I cant get rid of. Also, it works in Safari but not Firefox which is odd. The fbook code is right before {/block:posts}. I've been able to look at other formats of buttons but they either like my entire page rather than individual posts or I have this same spacing/firefox issue. Can anyone help?
</div>
</article>
Comments
{/block:Posts}
I cant even get that. I've done this task a few times before with other themes and it is no problem at all. It sounds like you didn't uncheck the boxes on Facebook that enable the big black space go back to f.b. and get a new code made from the link page. Do not forget to uncheck the unneeded stuff or that will also be embedded in the code given you.
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.