Dynamically changing Open Graph properties for Facebook Like button? - facebook

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.

Related

Image in Facebook share dialog is cropped the first time

I have a custom open graph story that allows the user to share something that they created on my site (each creation is a unique URL). I've gotten Facebook to crawl the unique URLs properly, but when the share dialog comes up, the image is cropped into a square format. If I close the share dialog and reopen it, the image is then the full sized image that is in the og:image tag.
Is there a way for me to get the full sized image the first time the share dialog opens? Many thanks.

Strange image displayed under the like button

on a site I created I have added a standard like function for advertisements users made.
Whenever I use like on a product page it works fine, e.e. http://www.markt4art.nl/Advertenties/ToonProduct.php?A=101 but on a Services page it shows a weird icon, e.g. http://www.markt4art.nl/Advertenties/ToonDienst.php?A=90
Even when I delete this image from my directory Facebook still show this weird and unwanted image.
Please explain how I can fix this and (if applicable) how I can determine myself which image Facebook will use to make a thumbnail.
This is a critical errors as all facebook likes are now very wrong...
Thx for your help.
You need to choose what image Facebook will use for the thumbnail. If you don't, Facebook will just find a random image on the screen and use it. For your first page it's using the beach picture. For the second it's using the ugly yellow 'play' button right next to where it says "Showreel".
To specify what image should show up you need to add a meta tag to your head like this:
<meta property="og:image" content="http://Your image location.jpg" />
More info here: http://blog.smartwebsitetips.com/75/how-to-force-facebook-choose-right-image-for-like-button/

Send Button pop up custom image and text

I want to customize the text inside the send button pop up. I really have no clue how to do it. I am using the code i got from the fb dev page and changing the url with php.
I would like to change the other properties like picture, name and description since fb always show random images and texts.
Any clue?.
Here's how you specify og: tags for images and text: http://developers.facebook.com/docs/opengraph/

Facebook Fan Gate Page with jquery overlay

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.

Showing different content in Facebook iframe WITHOUT using "Like"

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.