Integration with vBulletin - More Open Graph Images (Free) by BOP5

Brought to you by BirdOPrey5 / Qapla.com

If you don't know what Open Graph is, it is a standard which Facebook and other big social networking sites use to extract information from a web page being shared/posted on their site.

Open Graph meta tags tell Facebook the URL of the page to share, the title of the page, the type of content, and also one or more images to be used as the thumbnail when a page is shared.

A major limitation of vBulletin 4.x has always been the image. The only option vBulletin has is to enter the URL to 1 image in Facebook Options in the Admin CP, and the same image would be shared every time any page from your site was posted to Facebook. This would usually be your site's logo. While it was OK, it was really annoying you couldn't get a picture that had more to do with the exact thread being shared. For example if the thread was about Jeeps and had pictures of Jeeps in the thread it would be better to show one of those pictures instead of the site logo.

Now you can.

Live Demo: http://www.qapla.com/mods/showthread...e-images-tests (View the HTML source code)

This Free version will find-

• All images included via the [IMG] BBCode in the entire thread page
• All Embedded YouTube Video image thumbnails used on the thread page
• All Image file attachments (full size or thumb nails) on the thread page*

And add ALL of these as possible og meta tags on your thread page.

The Pro Version available on Qapla.com works on Blog Entries and CMS Articles as well, but is otherwise the same.

Note: The "Pro" version is bundled with my More Share Options TNG Pro mod, a subscription to one gives access to both.

Important Notes - This mod only promises to add the images, youtube videos, and attachments (if enabled) to the list of available of meta tags and this can be confirmed working by viewing the HTML source of the page or using the Facebook Debugger to see all images and other content scraped form your page: https://developers.facebook.com/tools/debug

This mod cannot promise Facebook will actually use these images! It is important to understand that giving these pictures as an option to Facebook is as far as any modification can go. After that it is up to Facebook's scraping algorithm to determine which, if any, images will be presented to the users as an option when sharing the page. Facebook does not publish strict details on how they make these choices. Search on Google and you'll quickly find many answers to the question but each one different.

Facebook does say that images should be (not must but should be) at least 200 by 200 pixels but they prefer even more a 1500 x 1500 pixel image. They prefer images closer to square than very long or tall. They will auto resize or crop as needed.

*It appears Facebook will never use vBulletin attachments even though the Facebook Debugger does pick them up and show them. I suspect the reason is because attachments are not to actual jpg/gif/png images but instead are links to attachment.php. Nevertheless I included the attachment option because Facebook may change this behavior one day and other social networks may not have this limitation.

There does not seem to be any ham in presenting multiple images to Facebook, they will choose what they want.

I have had more luck getting the option to choose between different thumbnails when using the older "Facebook Share" button as opposed to the "Facebook Like" (or Recommend) button that is default in vBulletin. If you use the free or Pro version of my More Share Options TNG mod you can easily change to the Facebook Share button.

Finally this mod knows how to deal with both https and regular http images. The og meta tags are slightly different for each, the correct one will be used based on the image source found.

Also, this mod is designed to work with or without the Facebook Platform enabled.

For use on vBulletin 4.x.x only. Tested on 4.07, 4.2.0, and 4.2.1.

------------------------------------------------------

Please "Mark as Installed" if you use this.
Donations always appreciated. :up:
Nominate MOTM if you LOVE it!

[BirdOPrey5]

Originally Posted by hugh_

BOP5 the link to your home page in the description is broken...

http//www.qapla.com/mods/showthread.php/1037-More-Open-Graph-Images-ogimage-Pro-by-BOP5

Thanks. Very annoying in Opera Next browser it doesn't auto erase the existing http:// like it does in other browsers when inserting a link.

Originally Posted by Budget101

This does actually add the image url, but unfortunately it displays is like so:

<meta property="og:type" content="article" /> <meta property="og:image" content="http://www.domainnamehere.com/attachment.php?attachmentid=7251" /> <meta property="og:image" content="http://www.domainnamehere.com/attachment.php?attachmentid=7252" /> <meta property="og:image" content="http://www.domainnamehere.com/attachment.php?attachmentid=7253" />

Which is not and cannot be parsed by Facebook. The only way to get this to work and display the image correctly is to link to an eternal image in order to get the url to resolve with an extension that Facebook will actually parse, example:

<meta property="og:image" content="http://www.domainnamehere.com/images/image.jpg" />

I use vbSEO and it will rewrite images to a readable URL, but unfortunately, it appears to rewrite them AFTER this mod executes, so they aren't displayed.

Currently the mod populates the og:image tag, but unfortunately it returns the code as

attachment.php?attachmentid=xx

I would like to alter it so that it displays the rewritten vbseo url into the og>:image tag (source code)

the code is:

$ogimages[] = $vbulletin->options['bburl'] . "/attachment.php?attachmentid=" . $thisattach['attachmentid'].

my attachment rewrite conditions are:

mydomain.com/ content/attachments/[attachment_id]-[original_filename]


I would like to rewrite the code so that it will publish the url in the same format as vbSEO does...

Could someone please help me with the correct syntax to use in this case??

That may be possible but before I waste time on it and find it doesn't work please post a link to an actual attached image from your forum so i can test it works.

[Budget101]

Originally Posted by BirdOPrey5

That may be possible but before I waste time on it and find it doesn't work please post a link to an actual attached image from your forum so i can test it works.

The following image is from my home page

 http://www.budget101.com/content/attachments/7251-strawberry-cheesecake-swirl.jpg



.

But the open graph mod displays that very same image in the source code as:

<meta property="og:image" content="http://www.budget101.com/attachment.php?attachmentid=7251" />

[BirdOPrey5]

Originally Posted by Budget101

The following image is from my home page

 http://www.budget101.com/content/attachments/7251-strawberry-cheesecake-swirl.jpg



.

But the open graph mod displays that very same image in the source code as:

<meta property="og:image" content="http://www.budget101.com/attachment.php?attachmentid=7251" />

Thanks, but it seems what I was afraid of is still true- Facebook can tell it is a redirect and not a real image and it still does't work.

Check out -
http://www.qapla.com/mods/showthread...sting-Facebook

Click the Facebook Share button

Your image isn't a option even though it is correct in the og tags.

[Budget101]

Oh Yeah, I see what you mean! Dang.

[cdoyle]

I just installed this, but not why it's not working.
Facebook always tries to use my banner image as the image on posts.

Here is a page, I've been testing with
http://www.caraudiocentral.net/forum...ro-Restoration

When I run it in the debugger, I get these errors.

Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://www.caraudiocentral.net/forums/images/misc/newbannerv4.png' will be used instead.
Mismatch og:url and canonical url: og:url tag in the header is not the same URL as rel='canonical' link in the html.

My images in the thread are over 200x200, so not sure why it's defaulting to the banner image. Any ideas?

[cdoyle]

Anyone know?

[BirdOPrey5]

Please "Mark as Instaled"

Try disabling using attachments in the mod settings, they don't work with Facebook anyway.

The wait a few days (week?) for the cache to clear or run it through the debugger again.

[dougdirac]

Haven't installed this mod yet, but it sounds useful. Too bad about attached images, though. The majority of my images are attached.

A couple off topic but related thoughts. Is it possible to set the description meta tag

<meta property="og:description" content="blah blah blah.">

so that it contains the first couple sentences of the first post? That seems more useful than all Likes from the entire website having the same description.

Now the inverse:
I have a problem with members that like to "drive-by" link post. Basically they just drop a link to an article they think is interesting but don't bother to leave a description. Would be great to have a mod that would scrape that open graph info and place it in the post. There are already mods that will get the page title for posted a URL. So why not an image and a description too?

[BirdOPrey5]

The better descriptions is a good idea, will see if I can add it to this mod.

The links are also a good idea but that would be a different mod, an updated title includer. Something I've been meaning to work on.

[dougdirac]

Originally Posted by BirdOPrey5

The links are also a good idea but that would be a different mod, an updated title includer. Something I've been meaning to work on.

Definitely a different mod. I'll just put the idea here so it's out there.

For example: http://www.nytimes.com/2013/08/24/bu...nted=all&_r=2&

Has these meta tags:

<title>Getting Tesla From Here to There - NYTimes.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta itemprop="inLanguage" content="en-US">
<meta itemprop="description" name="description" content="Tesla Motors gets raves for its Model S, and Wall Street loves the company's soaring stock. But it remains to be seen whether Tesla can actually sell the cars.">
<meta name="keywords" content="Automobiles,Electric and Hybrid Vehicles,Stocks and Bonds,Musk  Elon,Tesla Motors Inc">
<meta name="news_keywords" content="Cars">
<meta name="ROBOTS" content="NOARCHIVE">
<meta name="DISPLAYDATE" content="August 23, 2013">
<meta itemprop="dateModified" content="2013-08-23">
<meta itemprop="datePublished" content="2013-08-23">
<meta name="hdl" content="Getting Tesla From Here to There">
<meta itemprop="alternativeHeadline" name="hdl_p" content="Getting Tesla From Here To There">
<meta name="byl" content="By JAMES B. STEWART">
<meta name="lp" content="Tesla Motors gets raves for its Model S, and Wall Street loves the company’s soaring stock. But it remains to be seen whether Tesla can actually sell the cars.">
<meta itemprop="usageTerms" content="http://www.nytimes.com/content/help/rights/sale/terms-of-sale.html">
<meta name="cre" content="The New York Times">
<meta name="edt" content="NewYork">
<meta name="pdate" content="20130823">
<meta name="ttl" content="">
<meta name="des" content="Automobiles;Electric and Hybrid Vehicles;Stocks and Bonds">
<meta name="per" content="Musk, Elon">
<meta name="org" content="Tesla Motors Inc">
<meta name="geo" content="">
<meta name="ticker" content="Google Inc|GOOG|NASDAQ;Apple Inc|AAPL|NASDAQ;Zipcar Inc|ZIP|NASDAQ;Tesla Motors Inc|TSLA|NASDAQ;Morgan Stanley|MS|NYSE">
<meta name="slug" content="24stewart">
<meta name="utime" content="20130826120201">
<meta name="ptime" content="20130823150002">
<meta name="author" content="JAMES B. STEWART">
<meta name="dat" content="August 23, 2013">
<meta itemprop="genre" name="tom" content="News">
<meta name="cat" content="">
<meta name="col" content="Common Sense">
<meta itemprop="articleSection" name="dsk" content="Business Day">
<meta itemprop="identifier" name="articleid" content="100000002402814">
<meta name="ARTICLE_TEMPLATE_VERSION" CONTENT="700">
<meta name="hdr_img" content="/images/article/header/sect_business.gif">
<meta itemprop="thumbnailUrl" name="thumbnail" content="http://www.nytimes.com/images/2013/08/24/business/Stewart/Stewart-thumbStandard.jpg">
<meta name="thumbnail_height" content="75">
<meta name="thumbnail_width" content="75">
<meta name="thumbnail_150" content="http://www.nytimes.com/images/2013/08/24/business/Stewart/Stewart-thumbLarge.jpg">
<meta name="thumbnail_150_height" content="150">
<meta name="thumbnail_150_width" content="150">
<meta name="xlarge" content="images/2013/08/24/business/Stewart/Stewart-articleLarge.jpg">
<meta name="xlarge_height" content="400">
<meta name="xlarge_width" content="600">
<meta name="sectionfront_jsonp" content="http://json8.nytimes.com/pages/business/index.jsonp">
<meta name="CG" content="business">
<meta name="SCG" content="">
<meta name="PT" content="Article">
<meta name="PST" content="News">
<meta name="msapplication-starturl" content="http://www.nytimes.com/">
<link rel="canonical" href="http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all">
<meta property="og:url" content="http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Getting Tesla From Here to There"/>
<meta property="og:description" content="Tesla Motors gets raves for its Model S, and Wall Street loves the company’s soaring stock. But it remains to be seen whether Tesla can actually sell the cars.">
<meta property="og:image" content="http://graphics8.nytimes.com/images/2013/08/24/business/Stewart/Stewart-superJumbo.jpg"/>
<meta property="fb:app_id" content="9869919170"/>
<meta name="twitter:card" value="summary">
<meta name="twitter:site" value="@nytimes">
<meta name="twitter:url" content="http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all"/>
<meta name="twitter:title" content="Getting Tesla From Here to There"/>
<meta name="twitter:description" content="Tesla Motors gets raves for its Model S, and Wall Street loves the company’s soaring stock. But it remains to be seen whether Tesla can actually sell the cars."/>
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2013/08/24/business/Stewart/Stewart-thumbLarge.jpg"/>
<link rel="alternate" href="http://mobile.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html"/>

I'm thinking maybe a special BB code, perhaps [og].

So doing something like

[og]http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all&_r=2&[/og]

Would yield:
[URL=http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all&_r=2&]Getting Tesla From Here to There - NYTimes.com[/url]
[QUOTE=The New York Times][img]https://vborg.vbsupport.ru/external/2013/08/4.jpg[/img]
Tesla Motors gets raves for its Model S, and Wall Street loves the company’s soaring stock. But it remains to be seen whether Tesla can actually sell the cars.[/QUOTE]

And would show up like this:

Getting Tesla From Here to There - NYTimes.com

Originally Posted by The New York Times

Tesla Motors gets raves for its Model S, and Wall Street loves the company’s soaring stock. But it remains to be seen whether Tesla can actually sell the cars.

There are probably better ways. I kinda like this since you can edit it after the fact and it's clear that the content belongs to the source. It really is just like a title includer.

Speaking of title includes, the one I'm using now screws up asian characters and spits out junk. Would be cool if it could deal with that properly. Also it doesn't work if someone posts a link while in WIYSIWYG mode, since the link already has URL data with it, unless they paste the link as plain text. Cheers!