Is there a way to define the facebook Open Graph meta tags (OG) with a link?
For example I have a single page website with several anchors.
At each anchor I have a sub heading and an image
The url would be : www.mywebsite.com/#page2
When using the facebook share function I'd like to define that URL with a defined sub heading as the title, and the the image in the sub heading as the image that is shared on facebook.
Is this possible? Is it possible with PHP or JS?
I would advise you to implement the Google Ajax URL specification. It specifies how to treat single-page website when indexing for the Google search engine, but Facebook also uses it when indexing Open Graph information.
You can read more on the specification here: https://developers.google.com/webmasters/ajax-crawling/docs/specification
I basically works by mapping http://www.example.com/#!section to http://www.example.com/_escaped_fragment_=section. This way you, at the server side, can respond to the _escaped_fragment_ variable, when given.
When using this method, please be aware that the Facebook crawler will still follow meta og:url and link rel=canonical tags as the final url. So, if you return with the _escaped_fragment_ method, you can remove these tags (or set them to the current url).
Related
I've a page at http://www.example.com/sample/result/2 it has the following Facebook meta set
og:image = 'http://www.example.com/uploads/result2.png'
og:url = 'http://www.example.com/sample/result/2'
I want to share this page with a Facebook share button for: <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.example.com/sample" >
I don't want the Facebook users to go to /sample/result/2 page but use their meta only. Is that possible if I point og:url to 'http://www.example.com/sample/result/2' but share http://www.example.com/sample instead?
Please guide me.
According to the documentation-
An Open Graph protocol URL collapses the many URLs representing the same content into a single, representative URL to be shared using Open Graph. This behavior is similar to the canonical link relation used by major search engines.
The presence of the above URL allows Facebook to collapse references to /lamb?source=email and /lamb into the same Open Graph object, aggregating Likes, Comments, and other actions to the specified og:url value.
But you are trying to use og:url in different/wrong perspective. So, I don't think its possible to separate out the link shared and og:url present in that link!
I run ads on my site which are usually YouTube videos. I would like to find out if a user clicked these videos. I'm basically trying to use this data in a statistics plugin that I'm creating.
I've tried searching many different keywords but I can't really find anything.
I would appreciate it if I could be pointed in the right direction. Any ideas, hints or links are welcomed.
As you mention YouTube I doubt you have control over the URL.
But, if you can control the URL embedded in the video, then I would suggest building a simple redirect script on your server. Make sure the URL contains either the redirect URL or a code representing the URL which would be held in your Data Base. Add a logging function to the redirect script and hey presto.
If you have no control over the URL, then off the top of my head maybe you could implement some client side JS to add an overlay to the video which becomes the click-able element and implement the URL redirect script above. Some methods to get the URL from the video: https://www.google.com/search?q=jquery+youtube+URL
I am creating a web app in php. i am loading content through a ajax based request.
when i click on a hyperlink, the corresponding page gets fetched through ajax and the content is replaced by the fetched page.
now the issue is, i need a physical href so that i can implement facebook like functionality and also maintain the browser history property. i cannot do a old school POSTBACK to the php page as I am doing a transition animation in which the current page slides away and the new page slides in.
Is there a way I can keep the animation and still have a valid physical href and history.
the design of the application is such:
the app grabs an rss feed.
it creates the DOM for those rss feeds.
upon clicking on any headline, the page animates and takes to the full story of the rss feed.
i need to create "like" button on the full story page. but i dont have a valid url.
While Alexander's answer works great on the client side, Facebook's linter tool does not run javascript, so it will get the old content. Neither of the two links provide a solution to this.
What amit needs to implement is server-side parsing of the url. See http://www.php.net/manual/en/function.parse-url.php. Fragment is what the server sees as the hash tag value. In your php code, render the correct og: tags for based upon the fragment.
Firstly, if you need a URL for facebook then think up a structure that gives you one, such that your server-side code will load the correct page when given that URL. This could be something like http://yourdomain.com/page.php?feed=<feedname>&link=<linknumber>, which would allow you to check the parameters using the PHP $_GET array. If you don't have the parameters then load the index page; if you do then load the relevant article.
Secondly, use something like history.js to give you cross-browser support for the HTML5 pushState() functionality so that you can set the page URL when you do the AJAX call, without requiring the browser to do a full reload.
You have to implement hash navigation.
Here is short tutorial.
Here is more conceptual introduction.
If you're using jQuery, I can recommend BBQ for hash navigation:
http://benalman.com/projects/jquery-bbq-plugin/
This actually sounds pretty straight forward to me.
You have the urls as usual, using hash (#) you can extract the info both in the client and server side.
There is only one thing that is missing, on the server side before you return the content, check the user agent string and compare it to the facebook bot (if i'm not mistaken it's something like "facebookexternalhit"), if it turns out to be the facebook bot then return what ever you want which describes the url for a like/share (open graph meta data), and if it's any other user agent string return the content as usual.
If I insert in my wall a link like this:
http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/
then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!
How facebook does that ?
Hm, impossible to say without more information about the algorithm they use.
However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.
That would actually be a good idea, and is essentially an implementation of the "semantic web"...
As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:
<meta property="og:image" content="<your image URL>" />
OGP is also used by LinkedIn, Google+ and many others.
If you're in Wordpress you can control these tags with an open graph plugin. Other systems can do it manually or via their own plugins.
I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality. It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.
My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.
i need to extract data from url
like title , description ,and any vedios images in the given url
like facebook share button
like this :
http://www.facebook.com/sharer.php?u=http://www.wired.com&t=Test
regards
Embed.ly has a nice api for exactly this purpose. Their api returns the site's oEmbed data if available - otherwise, it attempts to extract a summary of the page like Facebook.
Use something like cURL to get the page and then something like Simple HTML DOM to parse it and extract the elements you want.
If the web site has support for oEmbed, that's easier and more robust than scraping HTML:
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
oEmbed is supported by sites like YouTube and Flickr.
I am working on a project for this issue, it is not as easy as writing an html parser and expecting sites to be 'semantical'. Especially extracting videos and finding auto-play parameters are killing. You can check the project in http://www.embedify.me, which has also fb-style url preview script. As I see, embed.ly and oembed are passive parser, they need the sites to support them, so called providers, the approach is quite different than fb does.
While I was looking for a similar functionality, I came across a jQuery + PHP demo of the url extract feature of Facebook messages:
http://www.99points.info/2010/07/facebook-like-extracting-url-data-with-jquery-ajax-php/
Instead of using an HTML DOM parser, it works with simple regular expressions. It looks for title, description and img tags. Hence, the image extraction doesn't perform well with a lot of websites, which use CSS for images. Also, Facebook looks first at its own meta tags and then at the classic description tag of HTML but it illustrates well the principe.