I created a new webpage that has a blog. How can I get an appealing preview of the website as I see when I share links from NY Times and other sites? This is my site www.denisejames.dev This is the current view
I would like to add a picture and a title.
I am told that this is a duplicate answer even though I did not mention facebook at all and the recommended answer is only for facebook. The answer helps to let me know, the preview is different for each app I post a link into. Hopefully this will help others using preview for the first time. I see previews in twitter, what app. I was not aware they are different for each app for the same link.
I assume you are sharing your website on Facebook. When you share a link on Facebook you will get a preview of the image that the website has in the top menu. You have a title on the top part of your website, but The New York Times has a svg instead. Svg is Scalable Vector Graphics, so it's a graphic symbol. Once you replace that text you have (Denise James) with an image, a gif, a svg element or something similar, you'll have the preview too.
Related
I see from few days that facebook allows a dynamic background color for facebook pages's posts/shares.
Example:
I'm asking if it's possible to pick this color with a meta tag or may be open graph API.
I founded many posts like this, and it seems facebook take the average/dominant color of the post thumbnail, like in this examples:
http://i.imgur.com/VVyM8MS.png
http://i.imgur.com/M0oy12e.png
But sometime, it's not the dominant color:
http://i.imgur.com/fFVCenG.png
Somebody know something about how to pick and manage the colors for the facebook posts?
Many thanks
Edit 1: It seems that actually, this background is only on the facebook website on mobile. Not in the app, and not on desktop.
I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info
According to Link Previews (Windows) on MSDN, a website can set an image or thumbnail to represent itself in the Share Charm on Windows 8. This is achieved by including one of four meta elements with an image.
I have tried using this, but cannot see that this information is used for anything. I don't see the thumbnail I set being applied anywhere related to the Share action.
Does anyone know anything about where this information is used?
It depends on where you share it. For example if you email it, it will show the thumbnail image next to the description in the body of the mail.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
I want to reproduce the live camera feed from http://www.falakrotop.meteodrama.gr/webcam.php. I want to display a resized (200x150) image of the live feed camera image on this website. Using iframe caused scrollbars to appear, making hard to see the (huge) image in a small 200x150 box. Is there a way to only take the live image, resize it and display it on my website (and also refreshing live)? I cannot use iframe to only use the image, as it seems to be dynamically generated...
The webcam seems to be offline now, but have you tried this?
<img src="http://www.falakrotop.meteodrama.gr/tincam1.jpg" />
If that doesn't work, you could try scraping it using fsockopen.
You will get the full page then, and after that, use preg_match to get to the image.
I would also highly recommend clearing it with the webmaster / owner of the site. You would be sending a lot of requests to his/hers website.
You can find some good examples on the pages I linked to.
I hope this helps. Good luck!