I've put "Like" button to my web site.
In general it works fine, the only problem is when user add some text and publish it in the profile his post contains image. And the image chosen is not something meaningful, it is one of the menu items that doesn't really makes any sense.
Could you please advise how to tip to the facebook the better image? I didn't see any information about that in their documentation (http://developers.facebook.com/docs/reference/plugins/like/), probably I've overlooked that?
Thank you.
P.S. Pretty similar question: is there any way to suggest for user text he wants to share (that will appear once user click "Like" button)?
You can specify image by adding Open Graph tags to head section each page containing the "Like" button.
You can specify an image URL in og:image tag, and Facebook will use this image in the user's profile entry.
The same goes with
og:title - this will be the title of the new entry on user's profile.
og:site_name (will be displayed as grey text under title) etc.
See http://developers.facebook.com/docs/reference/plugins/like/ and
http://developers.facebook.com/docs/opengraphprotocol/
for detailed description.
You can use the Open Graph tags for both versions of the "like" button - iframe and XFBML.
Once you add the tags to your pages you can use http://developers.facebook.com/tools/debug to check if they are OK.
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
I am trying to fix problem with FB share button
in
http://davitpir.ack.neowebservices.co.uk/offer-61.html
You can view the source (html code)
I have set the meta title, description etc correctly.
But when I click on share button it is sharing "Davit Pirvelashvili" which is the title of other pages not the offer page(i.e. the link I have mentioned above)
How can I make the FB share button share the correct title and description.
You can view-source of the above url to see the title/description that I have mentioned
Update
Strangly it is working fine for
http://davitpir.ack.neowebservices.co.uk/offer-83.html
The OpenGraph tags can get cached (I'm not sure the term FB uses). But if you test your URL with:
https://developers.facebook.com/tools/debug/og/object
It forces the cache to update.
EDIT: After using the debug tool the title is correct for me.
I have an online bachelor catalog and I want people to Like a bachelor and have it appear on their FB feed.
http://gothamrfc.org/drupal/?q=2012catalog
I set up the Like button using the Social Plugins feature on FB. All bachelors are on the same page and they have anchors http://gothamrfc.org/drupal/?q=2012catalog#waldmann and the Like button refers to each anchor.
My problem is when the user clicks on Like, it posts the same picture of one bachelor, not of the one that they liked. I didn't see anything in my js file. I also added the og button but that didn't work.
How do I adjust the code so Like button corresponds to the correct photo?
I'm sure it's something simple. Thank you for your assistance.
Im having the same issue really... My current solution is to hard-code the URL of the image in the like button ref code.
The only issue with this is that it will show that image ONLY, on a blank page when someone clicks the liked image on a user's facebook page.
I'm still looking for answers since the only alternative I've found is to create individual pages for each image (each blog post, in my case) and link to THOSE pages. Not ideal and much more work than I'd like.
have a look at my blog page on my website to see what I mean: MarinePix Blog
So, I've searched and searched this site before posting this question -- I know there is a lot of facebook like questions -- but I can't find an answer to mine.
I have a page VERY similar to Mashable.com. They have multiple teaser articles with LIKE buttons next to each. When you click the LIKE button, you see the article thumbnail, and the article description.
I already have this set-up and it works EXCEPT for the thumbnail and description. They are wrong or not showing up at all. How can I make sure these LIKE buttons are pulling the correct thumbnails and descriptions for each of my articles.
(They are not using Open Graph I don't think, because Mashable.com has no facebook meta tags (and even if they did, the meta tags only specify one thumbnail image, and one title, and one link).
Can anyone tell me how to customise the thumbnails and descriptions for each individual news story?
Thank you!
The href in each like button needs to point to the full URL of that article, which needs to have a full set of open graph meta tags.
Run the (article) page through the debugger at http://developers.facebook.com/tools/debug to make sure the correct tags are present and being detected by Facebook's crawler.
The crawler will fall back to using tags and other non-Open Graph meta tags if there aren't a full set present, but the behaviour in that case isn't easy to debug, especially in relation to the images.
Mashable's like buttons are pointing at page which do have open graph meta tags by the way, e.g. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmashable.com%2F2011%2F10%2F28%2Fsteve-jobs-tributes%2F
I want to add Facebook OpenGraph tags to my page, but I also want to stick with the style of Facebook Like button that I currently have (a custom image tag).
The OpenGraph plugin instructions suggest you have to use Facebook's own Like button styles, and the customization options are limited.
Is there any way I can apply the Facebook Like code to my own image button?
UPDATE: to be clear, what I mean is that I have an image on my page that links to https://www.facebook.com/sharer/sharer.php?.... I don't have a standard Facebook Like button. Will this mean that the OpenGraph tags on my page don't actually do anything?
The old sharer.php endpoint will read the same meta tags as the Like button - when shared, the Facebook crawler accesses your site and pulls the metadata for the post (image, description, etc)
If you want to generate some sample metadata there's a form on the like button documentation (see 'step 2') to output tags in the correct format.
Use the Debug tool to see what tags Facebook detects on your site.
It's against facebook's policies to try and replicate or re-create the like button.
Adding open graph tags won't affect your page, but they will improve how it appears when shared or liked in Facebook.
You may create a button called share which opens the feed dialog (sharer.php is deprecated) but you must use the real like button, not a custom image tag.