I have a project made in Wordpress.
I have posts which I share in social networks.
In twitter there is no problem, because I create tweets without image.
Facebook allows me to select the image of the page from the link I'm going to share.
But Google+ is picking up a random image, and does not allow me to select the image.
I've investigated in Google, and seems to work using something like this in the page which Im going to share:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
But it doesn't work.
Although Google+ sometimes supports the og:image property, it doesn't always.
Using a schema.org microdata "snippet" is the preferred way to do this for Google Search and Google+. See https://developers.google.com/+/web/snippet/ for more details and links to a testing tool which can tell you how your page is being read.
Additionally, for both og and snippet data, the image selected needs to be large enough and square enough. The height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.
Related
If you share a definition page on Facebook from UrbanDictionary.com, the preview image is a screenshot of the definition itself. The same image appears on Google Images. The URL of the image is http://urbandictionary.com/render_definition.php?defid=[the same id as the post]
My question is, how do I make my website do that? I have a website with quotes and would like each quote to be indexed in Google Images as well as display as preview image when shared on social media. I use Wordpress, if that is relevant.
You should be able to use OpenGraph og:image to set an image URL for your page. You need to have a page that will render the image for you.
<meta content="<page_image_url>" property="og:image">
AFAIK, WordPress has a service called mShots that can take snapshots of your page for you. I couldn't find terms of service for it; but if you want to take that route, the following URL will generate a snapshot of http://example.com:
http://s.wordpress.com/mshots/v1/http://example.com/
I was looking at how Facebook makes external websites previews given on a URL shared by the user. The result is not just a thumbnail but actual text, an embedded video or an image depending on the link given. For example, if you post a link from a Wikipedia article, it displays text. If you post the link of a video from Dailymotion, it embeds it.
Is there a PHP/Javascript-Ajax approach to accomplish this? Any specific library for this purpose?
If there isn't, what's the best way server-side (in PHP if possible) solution for web scraping and displaying a thumbnail preview?
Facebook does this by looking for Open Graph meta tags. In the case of embedded videos, it's looking for the og:video tag.
If there aren't OG tags, it'll make a best guess.
I'm working on a website for a specific client. And he wants to be able to add link to the website, and on mouse hover to have a image of that website appear.
Now, he doesen't want to take an image of the website, he only wants to input the link and have the website do everything else.
So my question is ->
Is there a way (eg. google API) to get a website image only by providing the url via php?
Sort of like in google, when you hover over a lik of a page, a tooltip pops up to the right with an image.
Any help is, as always, appriciated :)
Here is a list of 10 free thumbnail services
http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/
You can simply refer to the URLs of these services, e.g.
<img src="http://SnapCasa.com/Get.aspx?code=[code]&size=[size]&url=[url]" />
or make a CURL call from one of your PHP scripts and temporarily store/permanently save the image that was generated.
Have recently developed Thumbnailspro.com. It is currently free to use while in beta testing as we work out the bugs, but so far its getting quite popular, you can request thumbnails directly from your website using the code below :
http://thumbnailspro.com/thumb/http://msn.com&s=150
s=Size, size can be anywhere from 10 to 1000 pixels just add s=300 to display a thumbnail 300 pixels in width. We are trying to add more options as we go for thumbnail requests and at the same time trying to keep it as simple as possible so you don't have to enter something like the code below to get your thumbnails :
http://somethumbnailsite.com/viewurl.php?url=http://msn.com&x=200&y=300&bwidth=1024&bheight=768&rotate=76&what_the_hell%20_is_all_this_crap!
So is much more effecient!
Like the service or have any bugs contact us at admin#thumbnailspro.com!
No. The only way to do this is to request the HTML for the page, render the page and then create a thumbnail from that page render. Google does this because in the process of spidering the web, they already get all that data, and they've got a nice optimized rendering engine (Chrome) that they can put the data through, and then they've got tons of online storage space to store the cached image. There's a lot of work there, though.
I have a site set up with Facebook connect. I also have profile pages, which show users Facebook profile pictures. If users are not connected via Facebook they still have the option to use a profile picture by entering the url of it.
The Facebook images are using the type=large so they are the true Facebook size (I think). Now the problem I have is, what if someone uses such a large image? And it ruins the UI of the page? I cannot set the size of the image (via HTML) as it will not look right for the Facebook profile images.
What's the best way of going about this? By the way I'm using php.
Thanks
If you have a fixed width/height for your image holder, you can set ONLY the width or height of the image via HTML in your <img> (preserves aspect ratio), then set overflow:hidden on it to preserve your UI. Depending on the design of your page you might also want to add a background color or image to it.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
When I attach a link on facebook I get the title, url, description and images from that page.
But facebook separates the images and gives just the important ones. And this is what I don't understand.
For example, attach this link
http://tonlinegames.com/
- This is a gaming site with photos about the games.
When you attach it facebook will give you as results only the image about the games, but there are a lots of other images like buttons and so one.
Facebook makes use of Open Graph meta tags when available:
http://developers.facebook.com/docs/opengraph
Otherwise, it probably just uses common sense heuristics (title, h1, p tags, large images, etc).
There is an official tool called URL Linter that displays which info facebook takes from the page. It doesn't explain which exact rules it uses but there is some useful info in the "debug" section.
there some patterns that facebook could be trying.
like the first image that is greater than 50x50 (usually the first big image is the right one).
or maybe it looks for the image that is a link to the site itself, since many sites have one like this.
probably facebook combines more than one of these kind of patterns to be more accurate.
It probably just looks at the largest images within the body of the website. I'm sure they also have some constraints on what image size can be. Too small wouldn't work when coming up in somebodies feed.