We are using the Facebook comments plug-in on our pages using:
<div class="fb-comments" data-href="<?=$page_url?>" data-num-posts="2" data-width="520"></div>
...where $page_url contains the URL of that specific page (dynamically generated, think of it as article pages). However, when posted on Facebook Wall, the image and page content are different (shows a different page). When we click the link though, it does go back to the correct page.
Why does it get an image and page content from another page even though we have a unique ID on the URL?
I figured out how. I just need to put the necessary open graph metadata on top like so:
<meta property="og:description" content="[page description]" />
<meta property="og:image" content="[page image]" />
This way, it always shares the correct image and description for that page.
(For more info on open graph: http://ogp.me/)
I'm having difficulty receiving the fb_ref with a custom Open Graph object.
Facebook's provided OpenGraph objects such as Article generate URLs that use a Facebook redirect (i.e. https://www.facebook.com/connect/uiserver.php?....) which then bring along the 'fb_ref' property that we are assigning to a token in order to track user origin. When a user shares such a link via the setup and leaves a wall posting, it generates a share formatted like:
'Bob likes an article on Sitename'
...along with a URL that passes through FB and then to our site with the fb_ref property.
I'm noticing that if I create a custom object through Open Graph, when someone likes and wall posts something that I've configured as that object, it's formatted as:
'Bob shared a link'
...along with a bare URL to our site without the FB redirect nor the fb_ref parameter I'd like to use for metrics.
Is this a problem in my configuration or do all custom Open Graph objects behave this way on active Facebook shares (like + comment)?
Extra context: I can confirm through the FB Object Debugger that the incoming share is being recognized as my custom object, which leads me to believe this is expected behavior rather than a misconfiguration.
Make sure you're testing your open graph links from "Recent Activity" on your Facebook profile and not "View Activity Log" (which strips params).
In pictures:
Right place to look: http://imgur.com/vR3uyNE
Wrong place to look: http://imgur.com/02MIx57
Not sure if you are doing the same thing as I am, but it worked for me and my custom open graph action and object.
Here's a screenshot of a custom object with a custom action (Note, the link to my site includes my fb_ref param fb_ref=123. My app name is "ES1"):
And that custom object with a like story (mouse hover over link reveals fb_ref=123):
My custom object:
<meta property="fb:app_id" content="3814291xx" />
<meta property="og:type" content="esmithy_one:bar" />
<meta property="og:url" content="http://www.plooza.com/og/bar6.html?fb_ref=123" />
<meta property="og:title" content="Bar Six" />
<meta property="og:description" content="Six drinking place" />
<meta property="og:image" content="http://www.recipebits.com/media/food-icons/cookie-icon.jpg" />
My like button:
<div class="fb-like" data-href="http://www.plooza.com/og/bar6.html?fb_ref=123" data-send="false" data-width="450" data-show-faces="true"></div>
You did not include your code that is generating your likes and OG actions, so I can't tell how you are generating the stories.
hope you can help me...
I want to have a page with facebook metatags, like:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
and the problem is that instead of showing the descriptions, titles and images that I define in the metatags of my page, the facebook like box is generated with the url defined in my og:url. I was reading documentation and it seems that it should be in that way.
But I still want the facebook like box generated only with the metatags of my page, and not with the url defined in og:url.
is it possible? someone has done?
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
So it's doing exactly what it's supposed to do. If you want the like button to point to a different url, use the href parameter and have it point to a different url.
See https://developers.facebook.com/docs/reference/plugins/like/ for more information.
I think I understand what you are asking. Like #Jeff Sherlock said "og:url basically tells our scraper "ignore anything on this page, and scrape this url instead"..."
So if og:url is anything other than the current page -- Facebook will try to scrape the open graph data from there instead.
If this is a page you are trying to send people to if they click on the 'like object' that is posted to a users wall (who has already liked your page) --
I made a tool for this exact purpose -- as I thought it might be helpful to others:
Facebook/Open Graph Like button Generator
It generates (and stores) the open graph tag(s) so you don't need to put them in your page at all and the 'Redirect URL' tells it where to send all the traffic.
It detects the Facebook bot/scraper too so it won't interfere with anything :)
Good luck
you can put the like button in an iframe. Furthermore, that iframe may or may not need to be filled by setting a src attribute. I would try adding the like button code as innerHTML, and then try a separate file to set the src to.
It would look something like this:
<iframe><place like code here></iframe>
When that doesn't work, place the like code in a separate file, and set the src of the iframe to that file. Let me know if you have quesitons
i am trying to add a like button on my webpage and when i like something in facebook appears under Website category. I would like to change that. Any Ideas?
here is my fb like button:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=app id here&xfbml=1"></script><fb:like href="http://www.xxx.com" ref="casting" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>
thanks
Define the og:type meta property on your page. You can find available options here. For example:
<meta property="og:type" content="athlete" />
Note that the meta data will have to be defined in the <head> portion of your site (as all meta tags should) or Facebook will ignore it.
You might want to look into the open graph protocol to see some other stuff you can define for the "likes".
Additionally note that editing the og:type on a page which has received more than 10,000 likes will not be changed anymore as they have become fixed at that point.
As fijter noted below, Facebook looks for this meta data from the url which is used for the like button. If you have a like button with an url which you can't control, you won't be able to modify the meta data associated with it.
If your page has been liked already (but less than 10,000 times) and you change your meta data, run the Facebook URL linter tool to have Facebook refetch the meta data from your site.
I am trying to implement share this method. I am using the code as follows
http://www.facebook.com/share.php?u=my_website_url
Now when Facebook is showing it showing some thumbnails at left side. These images are picked from my website. How can I pick a particular image as thumbnail or at least stop it showing thumbnail?
You can check it with my blog address.
From Facebook's spec, use a code like this:
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
Source: Facebook Share
This blog post seems to have your answer:
http://blog.capstrat.com/articles/facebook-share-thumbnail-image/
Specifically, use a tag like the following:
<link rel="image_src"
type="image/jpeg"
href="http://www.domain.com/path/icon-facebook.gif" />
The name of the image must be the same as in the example.
Click "Making Sure the Preview Works"
Note: Tags can be correct but Facebook only scrapes every 24 hours, according to their documentation. Use the Facebook Lint page to get the image into Facebook.
http://developers.facebook.com/tools/lint/
My tags were correct but Facebook only scrapes every 24 hours, according to their documentation. Using the Facebook Lint page got the image into Facebook.
Enter your URL here and FB will update the metadata from your page:
https://developers.facebook.com/tools/debug (updated link)
Facebook uses og:tags and the Open Graph Protocol to decipher what information to display when previewing your URL in a share dialog
or in a news feed on facebook.
The og:tags contain information such as :
The title of the page
The type of page
The URL
The websites name
A description of the page
Facebook user_id's of administrators of the page ( on facebook )
Here is an example ( taken from the facebook documentation ) of some og:tags
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Once you have implemented the correct markup of the og:tags and set their values, you can test how facebook will view your URL by using the Facebook Debugger. The debugger tool will also highlight any problems it finds with the og:tags on the page or lack there-of.
One thing to keep in mind is that facebook does do some caching with regard to this information, so in order for changes to take effect your page will have t be scraped as stated in the documentation :
Editing Meta Tags
You can update the attributes of your page by updating your page's
tags. Note that og:title and og:type are only editable
initially - after your page receives 50 likes the title becomes fixed,
and after your page receives 10,000 likes the type becomes fixed.
These properties are fixed to avoid surprising users who have liked
the page already. Changing the title or type tags after these limits
are reached does nothing, your page retains the original title and
type.
For the changes to be reflected on Facebook, you must force your page
to be scraped. The page is scraped when an admin for the page clicks
the Like button or when the URL is entered into the Facebook URL
Linter Facebook Debugger...
I see that all the answers provided are correct. However, one important detail was overlooked: The size of the image MUST be at least 200 X 200 px, otherwise Facebook will substitute the thumbnail with the first available image that meets the criteria on the page. Another fact is that the minimum required is to include the 3 metas that Facebook requires for the og:image to take effect:
<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />
Debug your page with Facebook debugger and fix all the warnings and it should work like a charm!
https://developers.facebook.com/tools/debug
I was having the same problems and believe I have solved it. I used the link meta tag as mentioned here to point to the image I wanted, but the key is that if you do that FB won't pull any other images as choices. Also if your image is too big, you won't have any choices at all.
Here's how I fixed my site http://gnorml.com/blog/facebook-link-thumbnails/
Here’s how this works all:
You need the ability to access the HTML on the particular webpage you are sharing. It'll probably work site wide too if you use a common header file. I have not tried this, but it should work. You'll just get the same image for all pages if you do this though.
You need to add these HTML meta tags into page in the . It will not work if you put it in the . Make sure to customize per your a) image, b) description, c) URL, and d) title.
A Real Example.
<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />
<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />
<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />
<meta property="og:title" content="Coaches Wisdom Telesummit" />
Save
Open a fresh Facebook post, and retry the page you wanted to share.
If you are having trouble… you can debug it with this Facebook tool. It looks more geeky than it is. It tells you what Facebook is seeing when you post in the URL to share.
https://developers.facebook.com/tools/debug/og/object/
Big Tip.. make sure the “quote marks” are the same in your HTML (they should look like 2 straight marks and no curves… sometimes programs change these to different fonts and it goofs up the code.
Sharing on Facebook: How to Improve Your Results by Customizing the Image, Title, and Text
From the link above. For the best possible share, you'll want to suggest 3 pieces of data in your HTML:
Title
Short description
Image
This accomplished by the following, placed inside the 'head' tag of your HTML:
Title: <title>INSERT POST TITLE</title>
Image: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
Description: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>
If you website is static HTML, you'll have to do this for every page using your HTML editor.
If you're using a CMS like Drupal, you can automate a lot of it (see above link). If you use wordpress, you can probably implement something similar using the Drupal example as a guideline. I hope you found these useful.
Finally, you can always manually edit your share posts. See this example with illustrations.
I also had an issue on a site I was working on last week. I implemented a like box and tested the like box. Then I went ahead to add an image to my header (the ob:image meta). Still the correct image did not show up on my facebook notification.
I tried everything, and came to the conclusion that every single implementation of a like button is cached. So let's say you clock the Like button on url A, then you specify an image in the header and you test it by clicking the Luke button again on url A. You won't see the image as the page is cached. The image will show up when you click on the Like button on page B.
To reset the cache, you have to use the lint debugger tool that's mentioned above, and validate all the Urls for those that are cached... That's the only thing that worked for me.
The easiest way I found to set Facebook Open Graph to every Joomla article, was to place in com_content/article/default.php override, next code:
$app = JFactory::getApplication();
$path = JURI::root();
$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) :
$document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
$document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
endif;
This will place meta og tags in the head with details from current article.