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/
Related
I'm building an image library site. It will be mostly private but I'd like users to be able to directly use certain images in facebook posts by special URLs.
The URLs look plain enough: http://example.com/some/path/image.jpg although they're actually generated on demand by a script.
But when I paste that URL (the URL of the image, not a page with the image on) to Facebook it just comes up with the domain name; it does not thumbnail the image.
There are many questions about open graph meta tags - but that's to do with pages, and this question is about the case of a post with a direct image URL. I notice that it works for images from imgur, for example.
Is there something in the way the image is served, or something about the quality of the image itself that I can change to get facebook to work? Or is it just something like facebook knows to treat certain image sites a different way?
Thanks.
I think Facebook grabs the image using some kind of OpenGraph "Browser". So you need to serve it meta information depending on the User-Agent, which is
facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)
for Facebook.
So when a user browser hits your URL you serve the image, when it's facebook you serve it open-graph meta-data.
The only thing, off the top of my head, that I can think of is your favicon for that page.
Visit http://www.w3.org/2005/10/howto-favicon for information on favicons in html.
I am working on http://www.ididthisfilm.com/lex_tmp2/thelist/ webpage. There are some videos , images and text on this page. I want to share these contect from this page to facebook , twitter and google plus. Right now I am using plugin add to any to share this. But with plugin i am only able to share title of the page and url of the page. I want to share Images and video and text individually. Please Help.
as per my knowledge I'm never come across any kind of plugin which will allow you to share specifically the page contents and not the full page itself. Whatever social share plugin present in WordPress free plugin repository, it will only allow you to share the page or post itself, not any element within it.
Beside the only content sharing plugin I've seen is this jQuery Pin It Button For Images (Link: https://wordpress.org/plugins/jquery-pin-it-button-for-images/) which will show you a pin button whenever you hover on any images present on your site.
If you want to share specific contents of your page/post, I will suggest you to copy the link and then use HootSuite to one click share to every social media.
Hope this helps.
As I know Facebook, twitter, Sprybirds and google+ uses the meta tags to share the content of a webpage. Facebook uses Open Graph. An example of meta tag uses by facebook for image is <meta property="og:image" content="your-image-path.jpg"> and by twitter <meta name="twitter:image:src" content="your-image-path.jpg">. You only can share contents on these sites which are available in meta tags.You can not share all the page. If you are using wordpress for website or blog then you can use available plugins like all-sociable and otherwise you have to create your own plugin.
If you want to create own buttons to share contents on These sites then you can do these things.
For Sprybirds
For Facebook
For Google Plus
For twitter
Where "PUT-PAGE-URL" is the url of that page from which you want to share the content on these sites. The content of this page will share on these sites.
Request If you are planning to put these buttons and my answer is helpfull for you please don't forget to also create our social networking website Sprybirds.com button on you website.
List item
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 am attempting to create some functionality on beta.peaksneak.com where users can basically journalize. To do this I want them to be able to add images, videos, quotes, and links to a journal entry.
I found out that you can use oEmbed to embed videos, and images/quotes are easy.
Is there a script for embedding links and auto-capturing a large image from the link to use for embed purposes? For example, on Facebook, when I paste a link into a comment, it automatically generates an image and text (probably from meta tags and the first large image it can find).
You can also try https://github.com/starfishmod/jquery-oembed-all for your oembed stuff - it has a lot of providers and is client side only if that is what you are looking for?
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.