CODEWITHSUNDEEP
javascriptfacebookthumbnailsfacebook-sharershare-open-graph
Davide
Davide

Reputation: 11

Use javascript to set the image shown by Facebook sharer

I'm trying to dynamically set the thumbnail shown when sharing to Facebook using javascript. I tried adding the meta tag "og:image" to the page (it's a JSP) and that works, but what I want to do now is to replace such image with another one dynamically loaded by javascript.

Basically, the page is calling an API upon loading, using javascript, and retrieves a list of images. I want to use one of those as the thumbnail.

I tried using javascript to replace the content of the meta tag, but Facebook doesn't seem to care abou t it (it does change if I check with my browser).

Is it possible to do this?

Thanks in advance!

Upvotes: 1

Views: 2035

Answers (2)

maramot
maramot

Reputation: 11

Here is a function I used to extract the image url from a flash object tag's flashvars parameter, and then assign it to a meta tag by using jquery:

$(window).load(function(){
//Use $(window).load() instead of $(document).ready(), so that the flash code has loaded and you have all the html you need process with javascript already in place when you start processing.
    var stringToExtractFrom = $('param[name="flashvars"]').attr('value');
//Get the flashvars parameter value which we'll use to extract the preview image url from.
    var pos = stringToExtractFrom.indexOf("&");
//Search for the position ampersand symbols which surround the image url.
    var stringToUse;
//The final string we'll use.
    var startOfImageSrc = null;
//The first position where we discover the ampersand
    var endOfImageSrc;
//The second position where we discover the ampersand
    var lengthToSubstract
//How many symbols to chop off the flashvars value.
    while(pos > -1) {
        if(startOfImageSrc == null){
            startOfImageSrc = pos;
        }
        else {
            endOfImageSrc = pos;
            lengthToSubstract = endOfImageSrc - startOfImageSrc;
        }
        pos = stringToExtractFrom.indexOf("&", pos+1);
    }
    stringToUse = stringToExtractFrom.substr(startOfImageSrc+7, lengthToSubstract-7);
    $('meta[property="og:image"]').attr('content', stringToUse); });

Upvotes: 1

Pooya Estakhri
Pooya Estakhri

Reputation: 1289

Facebook robot never runs a java script code but why you don't try to set og tags in in server-side ?

Upvotes: 0

Related Questions