Please pardon my ignorance, I'm a website visual designer, not a programmer (let the flames begin!):
Following Facebook's instructions, I just added the iFrame like button code to a site that I'm working on, and it seems to work, BUT the image which displays on my wall (once the Like is posted) seems to be of a random image (could be anything, from a button to a spacer to whatever!) inside the external site which I'm liking from. How do I control which image appears on a member's FB wall when they hit the like button?
What you need to look into is Open Graph og:meta tags. These tags help Facebook to decide:
what image to display
what text to use as the title
what text to use for the description
and more...
The tags look something like this (taken from the link above):
<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"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
You will have to substitute your values for the values in the example here.
On the Like button documentation where you most likely got your code from, it mentions the open graph protocol and its importance with relation to the like button. Scroll down a bit further and you'll see there is a "step 2" in the process of implementing a Facebook "like" button.
Related
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
Why would an image thumbnail not show up when I share a post on a facebook timeline? It used to work perfectly, now I'm not getting an image. Here is a sample link. (http://noahsdad.com/chris-burke-corky-life-goes-on/)
Thanks.
I'm not seeing any open graph tags on your page there. In order for the image to show up properly, and to be able to curate which image gets posted on Facebook, the og:image tag should be used in the head of the document. Before you do that, you'll want to include the the Open Graph name space in your html declaration.
An example is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
....
<meta property="og:image" content="http://www.example.com/img/example.jpg" />
....
</head>
where the example url points to the actual image you want to appear.
Once you've got that in place, you can test the link here: http://developers.facebook.com/tools/debug
If you did it correctly, you should see the expected image show up in the debug validation results.
i have in google+ snippet in my website, to sharing my website on google+, my code look like this
<head>
<meta property="og:title" content="title of website" />
<meta property="og:url" content="my website url" />
<meta property="og:image" content="url image" />
<meta property="og:description" content="description of my website" />
</head>
<bod>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></td>
</body>
i have also included facebook like, which rendering all meta tags (title,image,description). But, in case of google+, thumbnail image is not showing.
Need help !!
What are the dimensions of your image? I standardised my thumbnails at 100x67 as they look right on Facebook, but Google+ wasn't showing them. I found that larger images will work with the same code, so I can only assume Google+ ignores little images for some reason.
from google+ docs: https://developers.google.com/+/web/snippet/
Images that are too small or not square enough are not included in the
+Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, 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.
However i've been experimenting and this does not seem to be exactly right. Does anyone know the correct algorithm?
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
i have a blog with some images on it. now i want a specific one to appear on pages like google+ or facebook.
when i click on "+1" it shows a facebook-image, but not the image of the actual blog-entry. its the same with facebook :(
do i have to give the image a special tag or so?
name="blog-name" title="blog-name" alt="blog-name" ?
example:
<img src="/TwitterIcon.png" title="Blogname auf Twitter" width="22px" border="0">
works
<img src="/m/home_button.png" title="Blogname" width="50px" border="0">
doesnt work
Forget the tags on the images, use the Open Graph protocol. Let Facebook scrape via Open Graph-friendly meta tags:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<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"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
This will result in Facebook grabbing http://ia.media-imdb.com/rock.jpg.
I am using html5reset as a reset and template for a website. However I am getting all kinds of validation errors on some meta tags:
<meta name="title" >
<meta name="google-site-verification" >
<meta name="copyright" >
<meta name="DC.title" >
<meta name="DC.subject" >
<meta name="DC.creator" >
I could simply remove those meta tags, but I'd rather know why first. Here is the link to validate my website (which is online at a temporary url): http://validator.w3.org/check?uri=http%3A%2F%2Ftanchelmus.be%2Fsten%2Fnl%2Fnews&charset=%28detect+automatically%29&doctype=Inline&group=0
If you use "property" instead of "name" you will pass HTML5 validator.
<meta property="DC.title" >
<meta property="DC.subject" >
<meta property="DC.creator" >
I'm not entirely sure if the syntax is correct, but I did see this in RDFa documentation here: http://en.wikipedia.org/wiki/RDFa
Another thing to note is that the HTML5 standard is a work in progress. And thus the W3C HTML5 validator is also a work in progress.
This blog post has some interesting background regarding Microformats (eg Dublin Core) & HTML5.
It may not always be pragmatic to develop just to please the Validator, especially one that is a work in progress.
What it looks like you're being told is that the values you're using in the name attribute are not part of the valid set of values you can use.
Ths WhatWG Website identifies many of the standard and other meta name values.
Hello to validate the Dublin Core tags, you must change dc. to dcterms.
Here you can see an example:
<meta name="dcterms.contributor" content="Your name" />
<meta name="dcterms.keywords" content="Your keywords here" />
Regards!