opengraph - How does Facebook Sharer select Images and other metadata when sharing my URL? -


when using facebook sharer, facebook offer user option of using 1 of few images pulled source preview link. how these images selected, , how can ensure particular image on page always included in list?

how tell facebook image use when page gets shared?

facebook has set of open-graph meta tags looks @ decide image show.

the keys 1 facebook image are:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

and should present inside <head></head> tag @ top of page.

if these tags not present, older method of specifying image: <link rel="image_src" href="/myimage.jpg"/>. if neither present, facebook @ content of page , choose images page meet share image criteria: image must @ least 200px 200px, have maximum aspect ratio of 3:1, , in png, jpeg or gif format.

can specify multiple images allow user select image?

yes, need add multiple image meta tags in order want them appear in. user presented image selector dialog:
facebook image selector

i specified appropriate image meta tags. why isn't facebook accepting changes?

once url has been shared, facebook's crawler, has user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), access page , cache meta information. force facebook servers clear cache, use facebook url debugger / linter tool launched in june 2010 refresh cache , troubleshoot meta tag issues on page.

also, images on page must publicly accessible facebook crawler. should specify absolute url's http://example.com/yourimage.jpg instead of /yourimage.jpg.

can update these meta tags client side code javascript or jquery? no. search engine crawlers, facebook scraper not execute scripts whatever meta tags present when page downloaded meta tags used image selection.

adding these tags causes page no longer validate. how can fix this?

you can add necessary facebook namespaces tag , page should pass validation:

<html xmlns="http://www.w3.org/1999/xhtml"       xmlns:og="http://ogp.me/ns#"       xmlns:fb="https://www.facebook.com/2008/fbml">

Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more