The comment on Bottomless’s Like Button didn’t load properly because some of the html tags were stripped off, so I reposted it here in full.

One problem I’ve noticed with Facebook and Open Graph is that, if you manually post a link on facebook to a page that has some Open Graph header info, facebook no longer scans the page for images, it just uses og:image instead. If og:image isnt specified, but other Open Graph metadata IS specified, it does NOT scan the page for images to use as the share thumbnail. Instead, it just shows nothing because its expecting og:image because there are other og tags.

So that means that all pages will be lacking a thumbnail preview no matter how its shared on facebook. I didn’t want every page to have the same preview image throughout the site regardless of share method, so, I found a way to make it dynamically pick an image from whatever page you’re on for use in the og:image field instead of using one static image for the entire site.

I’m currently using the popular theme “suffusion”, which has a built in function that it uses to feature an image for a particular post. That function is suffusion_get_image($options = array()) located in actions.php. This function can be easily adapted.

Its a very smart function. First, it checks to see if you’ve selected an image to feature in that post using the theme-added button in the post editor. If there isn’t a featured image, it checks to see if you’ve got a post thumbnail. If there’s no post thumbnail, it checks the gallery. If there’s no gallery, it checks for embedded images. It then resizes it with timthumb, and spits out a linked picture with html code. The function could easily be adapted to work here in a future revision by cutting out all the theme-specific stuff and sticking to the barebones essentials of the function.


Since I’m lazy, I did it the ugly, cheap, half-assed way. I just used the existing theme function as-is, where-is, and just added the following to your function tt_like_widget_header_meta()



//So that it knows what post we’re on right now global

$post;


//Pull up the special proprietary function from the popular theme suffusion that I am currently using.

$thedamnthing = suffusion_get_image(array(‘mag-excerpt’ => true));


//Strip out half of the html that gets inserted in the output from the theme’s function

$replacethedamnthing = “<a href=”\” mce_href=”\”””.get_permalink($post->ID).”\”><img src=”\” mce_src=”\”””;


//Yes, I could’ve done it as a single replacement array instead of two strings and two replacements, but I was lazy.

$partonereplacement = str_replace($replacethedamnthing, “”, $thedamnthing);


//Stuff to strip out the rest of the HTML

$replacetheotherdamnthing = “\” alt=\””.$post->post_title.”\” /></a>”;


//With the HTML stripped out, I’m left only with the address of the thumbnail. No link, no html, no alt text.

$theimagelocationurl = str_replace($replacetheotherdamnthing, “”, $partonereplacement);



I then changed variable in the og:image section from $image to $theimagelocationurl

if($theimagelocationurl!='”‘) { echo ”.”\n”; }


and viola! I now have dynamically generated og:image tags for each post.

Leave a Reply

(required)

(required)

Designed by DC Nightlife, DC Nightclubs, and DC Clubs.  ©2015 Club Glow. | Privacy Policy