More Open Graph Images (Free) by BOP5

[BirdOPrey5]

Brought to you by BirdOPrey5 / Qapla.com (http://www.qapla.com/mods/)

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.php/1007-More-more-images-tests (View the HTML source code)

This Free version will find-

All images included via the 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 (http://www.qapla.com/mods/showthread.php/1037-More-Open-Graph-Images-ogimage-Pro-by-BOP5") 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 (https://vborg.vbsupport.ru/showthread.php?t=266159)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 "[I]Mark as Installed" if you use this. :)
Donations always appreciated. :up:
Nominate MOTM if you LOVE it! ;)

[BirdOPrey5]

Reserved.

[CAG CheechDogg]

Good stuff BOP5, will this work if you have facebook blocked with Symon Lloyd's Ban Spiders by User Agent Mod here? : https://vborg.vbsupport.ru/showthread.php?t=268208

[BirdOPrey5]

Good stuff BOP5, will this work if you have facebook blocked with Symon Lloyd's Ban Spiders by User Agent Mod here? : https://vborg.vbsupport.ru/showthread.php?t=268208

Yes, in that it will still create the open graph images.

However if the Facebook scraper is blocked Facebook will never be able to see/read your page so those images would only be useful to other sites that look for Open Graph images, it won't let Facebook work.

[CAG CheechDogg]

Good stuff BOP5, thanks for clarifying

[Justinphx]

Installed - but I have one question:


Response Code: 200
Fetched URL: http://mysite.com/forum/showthread.php/mytopic
Canonical URL: http://mysite.com/forum/showthread.php/showthread.php/mytopic


When using the debug it seems Facebook adds showthread.php again to the link which of course won't work and gives an error. Any idea why it does this? Thanks.

[BirdOPrey5]

Are you sure that doesn't happen with this mod disabled?

Yes I have seen that before and it is usually because the og url tag is missing or wrong.

Do you normally have Facebook platform enabled?

Can I get a link to your forum?

[player378]

wow very nice

[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

[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??

[BirdOPrey5]

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. :o

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]

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]

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.php/1043-Image-Testing-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/forums/showthread.php/12250-84-Camaro-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]

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/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=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 .

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&

Would yield:
Getting Tesla From Here to There - NYTimes.com (http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all&_r=2&)
https://vborg.vbsupport.ru/external/2013/08/4.jpg
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.

And would show up like this:

Getting Tesla From Here to There - NYTimes.com (http://www.nytimes.com/2013/08/24/business/wondering-if-tesla-can-get-there-from-here.html?pagewanted=all&_r=2&)
https://vborg.vbsupport.ru/external/2013/08/4.jpg
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!

[BirdOPrey5]

Could you post a link with the Chinese characters that don't work in the existing mod?

[dougdirac]

Umm here's a link to where some showed up bad.
http://www.teslamotorsclub.com/showthread.php/19478-Tesla-Goes-to-China?p=420183&viewfull=1#post420183

[letipro]

please edit og:description to thread description

[BirdOPrey5]

Umm here's a link to where some showed up bad.
http://www.teslamotorsclub.com/showthread.php/19478-Tesla-Goes-to-China?p=420183&viewfull=1#post420183

I think the encoding of you page will need to be UTF-8 to display UTF-8 content.

please edit og:description to thread description

Will look into adding this option.

[dougdirac]

I think the encoding of you page will need to be UTF-8 to display UTF-8 content.
Hmm, how do I do that?



Will look into adding this option.
Think you could add an option for those Twitter tags while you're at it? Would be great if tweets from my site had "the card" show up. :)

[BirdOPrey5]

Hmm, how do I do that?



Think you could add an option for those Twitter tags while you're at it? Would be great if tweets from my site had "the card" show up. :)

Not sure I know what you mean by "those twitter tags" and "the card" is? :confused:

To change the page encoding go to Admin CP -> Languages & Phrases -> Language Manager -> Edit your Language,

Change charset from ISO-8859-1 to UTF-8

Note- I'm not sure if other steps may be required- I did this on my _TEST_ forum and it seemed to work, I did not do extensive testing. Please do your own testing or keep an eye on things to make sure nothing breaks by this change.

[dougdirac]

Not sure I know what you mean by "those twitter tags" and "the card" is? :confused:

"The card" or Twitter Cards are little previews you get sometimes when a link is included in a tweet. Twitter uses meta tags not unlike the open graph tags facebook uses. So I figure if you're doing one, it's not much trouble to also do the other.

These are the twitter tags from the NYTimes example I posted above.
<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"/>
See it's basically the same stuff. There are different types of cards as you can see here: https://dev.twitter.com/docs/cards
But we're probably just interested in the summary card. https://dev.twitter.com/docs/cards/types/summary-card


To change the page encoding go to Admin CP -> Languages & Phrases -> Language Manager -> Edit your Language,

Change charset from ISO-8859-1 to UTF-8

Note- I'm not sure if other steps may be required- I did this on my _TEST_ forum and it seemed to work, I did not do extensive testing. Please do your own testing or keep an eye on things to make sure nothing breaks by this change.
Thanks, I'll give it a try!

[BirdOPrey5]

I have a twitter mod in the works... You can see a preview of it at the bottom of this thread-

http://www.qapla.com/mods/showthread.php/1066-Urgent-Delete-your-entire-install-directory-after-installation-or-upgrade-of-VB

[dougdirac]

So if you include those twitter meta tags, a tweet that includes a link to your site can look more like this:
https://dev.twitter.com/sites/default/files/images_documentation/web_summary_1.png

Perhaps Twitter will play nicer with attached images. I think, though, you only tell it to use one (like the first image of the thread). If no image is available it's better to skip it. The only tags that are required are title and description. Title would obviously just be the thread title. Description would be the first couple hundred characters of the first post like we'd like for facebook.

For the pro version would be cool to get the first bit of blog text for the description for both twitter and open graph. CMS articles already have description filled out for open graph. Should just copy that into twitter as well.

[SimonB]

I there any way to get a specific default image displayed when a vbulletin thread is posted to facebook? I have installed this mod which does a good hob of fetching other thumbnails, but it seems to pick up smilies and icons, about which FB seems to complain because they are less than 200px, and then for some reason facebook uses my site logo image (which I do not want because it has transparency). I have specified a "default" in the facebook options in vBulletin, but it gets overridden if there are smaller than 200px images.

[BirdOPrey5]

For those looking for a title/description fix I released it as a separate mod - https://vborg.vbsupport.ru/showthread.php?t=305162

[SSG.D]

Pulling my hair out.. Tried everything have both mods installed og image and og description and FB will not pick up the right image in the article even if I have it as a inline image and not attachment. http://www.2a-protection-graa.net Need help BOP I think if I use the FB debugger much more they will start charging me. s.o.s. running 4.2.2 full VB suite

[BirdOPrey5]

The free version doesn't work on articles... DO you have a link to a thread where the images aren't being picked up? A specific thread?

If you have the Premium version then please post in the mod forum on Qapla.com.

[SSG.D]

I keep my forums on lockdown I have no image share there to public, but I guess I will need the paid version for Articles. My blogs are the same , it only scrapes the header logo. http://www.2a-protection-graa.net/entry.php?4-Gun-Rights-Across-America-Sweepstakes-AR-15-Ammo

[BirdOPrey5]

I would suggest you don't get the pro version on account you can't properly test the free version.

[SSG.D]

Light at the end of the tunnel FB did post this right. http://www.2a-protection-graa.net/entry.php?6-Graphics-by-SSG-D Thanks for the Heads up. And thank you for your awesome Mod work.

[m2006]

Hi Bird

Test on vBulletin 3.8.7 not work please

[BirdOPrey5]

Hi Bird

Test on vBulletin 3.8.7 not work please

Thsi is a VB4 mod, it does not work on VB 3.x- VB 3.x has no Facebook support built in.

[RichieBoy67]

Does this work in 4.2.2 BOP?

Thanks,
Rich

[BirdOPrey5]

Yes.

[RichieBoy67]

Great work! Thanks

[fxdigi-cash]

Thanks for the great mod. There is something I don't understand. why only external images displayed, but not thumbnails??

even I change the option from the settings to thumbnail, still the same images, no thumbnails.

[BirdOPrey5]

Facebook won't recognize images going through a PHP page, only direct links to real images.

[fxdigi-cash]

Facebook won't recognize images going through a PHP page, only direct links to real images.

but it does recognize the 1st and 2nd pictures made as attachments... however, no more than 2 images...

[BirdOPrey5]

but it does recognize the 1st and 2nd pictures made as attachments... however, no more than 2 images...

That must be new behavior then. I did extensive testing months ago and it would not use any vBulletin attachments as images. They would be a big improvement on FB's part.

[mykkal]

Does this work on vb 4.2.3? I have php 5.5 running

[BirdOPrey5]

I don't see why it wouldn't, but I haven't tested against 5.5 specifically.

[m2006]

install on vbulletin 4.2.3 worked

[NeutralizeR]

Not sure why (I moved the website to HTTPS a few weeks ago), but i had to disable the ":secure_url" in the plugin to make it work for attachments:

// if(strtolower(substr($thisimg, 0, 5)) == 'https') //If https site // $secure_og = ':secure_url'; // else $secure_og = '';

With secure_url enabled:

Object at URL ... of type 'article' is invalid because a required property 'og:image:url' of type 'url' was not provided.
Test platform: https://developers.facebook.com/tools/debug/og/object/

[NeutralizeR]

vBSEO deals with attachment URL's like this:
if(!isset($VBSEO_REWRITE_TEXTURLS)){$r_tags = 'a|span|iframe';if(VBSEO_ABSOLUTE_PATH_IN_URL){$r_ tags .= '|form|script|link';}if(VBSEO_ABSOLUTE_PATH_IN_URL ||VBSEO_REWRITE_ATTACHMENTS||VBSEO_REWRITE_AVATAR) {$r_tags .= '|img';}$r_tattr = 'href|src|action|url|\.open|\.location';$newtext = preg_replace ('#(<(?:'.$r_tags.')([^>]*?)(?:'.$r_tattr.')\s*[=\(]\s*["\'])([^"\'>\)]*)(.*?[\>])([^<]*)(</a>)?#ise','vbseo_replace_urls(\'$1\', \'$3\', \'$2\', \'$4\', \'$5\', \'$6\')',$newtext);

So changing "content" to "href" makes the URL use vbseo version$bop5_og_tags .= "<meta property="og:image$secure_og" content="$thisimg" />\r\n";

But of course, we can't use href attribute with meta tag.

Adding meta and content to the regexp makes all meta content tags start with forum URL.

Do you have any advice how to use vbseo powered attachment URLs in og:image?

[NeutralizeR]

VBSEO fix = Edit functions_vbseo.php:

find:
$r_tags .= '|img';replace with:
$r_tags .= '|img|meta property="og:image"';find:
$r_tattr = 'href|src|action|url|\.open|\.location';replace with:
$r_tattr = 'href|content|src|action|url|\.open|\.location';

[dariyos]

this mod only generate og:images like this:

<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32693" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32694" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32692" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32573" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32575" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32574" />
<meta property="og:image" content="http://www.sps-forum.de/attachment.php?attachmentid=32517" />

Facebook can't read that ...

Facebook want it like this:


<meta property="og:image" content="http://www.sps-forum.de/image.png />


do you have an other solution for this?

If I post external links with the IMG-Tag, it works, but I see only ONE Image when I click on "SHARE" ...
Can't change between the images when I have more than 1 external images.

[BirdOPrey5]

I see no difference between what the mod makes and what you say works.

However, please see in my original description of the mod:


*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.


Using attachments simply isn't going to work. Facebook doesn't use them for whatever reason. Other services that use og:images might, so I left the option in the mod, but Facebook does not.

[dariyos]

thats bad,

at google+ it works, but I can't change the image in the sharer window, there is only one image available, no arrows to change the image. I think the "sharer" window picks only the first image from the quellcode... any ideas?

I use DBSeo

How can I rewrite the attachment-urls from

http://domain.com/attachment.php?attachmentid=1234

to

http://domain.com/attachments/1234/originalbildname.png

?

[BirdOPrey5]

Even rewriting the URLs using DBSEO or VBSEO doesn't help. Facebook knows it's not a "real" link somehow (likely because of the redirect involved) and just doesn't use it. I've tried for months, feel free to keep trying, but ultimately it is of my opinion attachments will simply never work with Facebook.

As for the Google issue, I can't imagine any way to specify which would be the first image for every single thread on your site.

The first image will be the first image using [IMG] in a post on the page, you could add an image to the first post using an [IMG] tag to force it to be the first one created by the mod. Maybe created a custom BB Code to hide the image using CSS display:none so regular users don't even see it, but seems like a lot more work to me then it is worth.

[dariyos]

Google+:

When I activate the mod, and delete the static picture to show on every thread, the sharer displays the first image, and this is my Logo from the header - not from the post-content.

is it not possible to show all pictures in a row - with arrows I can change the pictures?

[BirdOPrey5]

It would be up to Google to show arrows that can change the picture, not this mod.

If you want to move the extra pictures by this mod below the picture included on every page in your Facebook settings so Google sees that one first, do the following-

1) Edit your headinclude template. Add this code at the very bottom of the template:
<!-- Extra og images -->

Save changes.

2) Edit the plugin Insert Open Graph Tags find the line:
$bpfind = '<meta property="og:type" content="article" />';
Change it to:
$bpfind = '<!-- Extra og images -->';

Save changes.

That should do it, the default Facebook image will be the first og:image on every page.

[dariyos]

When I set a Facebook Image here:

Settings -> Facebook Connection -> Logo URL

then this image is the first image that will show on every site.
when I delete that URL, then my first Image is the Header-Logo. <- thats wrong.

I want it like this:

If a thread has no external Image included, then show the default Facebook Logo.
If a thread has an external Image included, then show the included image, NOT the FB-Logo.

when I set a default Facebook Logo, then it shows always the Facebook Logo, on every site.

[BirdOPrey5]

I'm sorry but if Google finds your header logo first, that's the way their algorithm works. There's no way I know of it control what order the pictures are chosen other than the ordering they are written to the page. The header-logo and such is beyond my control.

[VICOS]

The FB OG Debugger complains about the meta tags being outside of the <head></head> section and refuses to consider them:

Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.

Please fix this in order for the tags to be usable.

I believe the HTML standard also prohibits this.

[BirdOPrey5]

This mod does put them in the <head> area of the page, at least on the default vBulletin styles.

If you have Facebook enabled on your site the mod looks for the text

<meta property="og:type" content="article" />

which is in the <head> area when Facebook integration is enabled and adds the extra og:image tags below it.

If the Facebook platform is not enabled it looks for

<!--[if IE]></base><![endif]-->

and uses that instead. In both cases the code remains inside the <head> section of the source code.

[VICOS]

This mod does put them in the <head> area of the page, at least on the default vBulletin styles.

If you have Facebook enabled on your site the mod looks for the text

<meta property="og:type" content="article" />

which is in the <head> area when Facebook integration is enabled and adds the extra og:image tags below it.

If the Facebook platform is not enabled it looks for

<!--[if IE]></base><![endif]-->

and uses that instead. In both cases the code remains inside the <head> section of the source code.

Hi Joe,

My bad and my apologies for the incorrect assessment.

You code was not inserting anything due to the admin settings I had chosen. I had added the other meta og:image code in the postbit_attachmentthumbnail template many months ago and had forgotten about it.

It all works now as you say.

Again, my apologies.

[VICOS]

Not sure why (I moved the website to HTTPS a few weeks ago), but i had to disable the ":secure_url" in the plugin to make it work for attachments:

// if(strtolower(substr($thisimg, 0, 5)) == 'https') //If https site // $secure_og = ':secure_url'; // else $secure_og = '';

I just confirmed this issue when using SSL for your forum. The FB debugger loses it mind and FB actual refuses to see the images.

As soon as I comment out ":secure_url" in the plugin, FB debugger is happy and FB actual sees ALL images and lets you choose which one you want.

It even works when using attachment images, i.e. the image url is:

attachment.php?attachmentid=###

BTW, I am using vB 4.2.3 PL2.

[elsa23]

Hi, I use a Highslide image resize , so all pictures in are resized. I had created a [img2] bbcode that not resize image, I use it to show full size in presentation
Is it possible to use [img2] for Open Graph image instead of [IMG] tag or use both together ?
Thanks

Edit
in the xml to import, I had remplaced :
$picfindregex = "\[img](.+)\";

with:
$picfindregex = "\(.+)\";

Now, Open Graph uses [img2] instead of [img]
Is it possible ton use [img] and [img2] together please

[BirdOPrey5]

if you put an asterisk after the 2 it should tell the regex the 2 is optional and work either way:


$picfindregex = "\[img2*](.+)\[/img2*]";


But not tested. Worse case just go back to the way you had it, no lasting damage.

[elsa23]

if you put an asterisk after the 2 it should tell the regex the 2 is optional and work either way:


$picfindregex = "\[img2*](.+)\[/img2*]";


But not tested. Worse case just go back to the way you had it, no lasting damage.

Great, it works!! Thanks a lot http://forum-elodiefrege.com/images/smilies/elo036.gif

[elsa23]

Hi, I use @MarkFL youtube bbcode
https://vborg.vbsupport.ru/showthread.php?t=319623

So the bbcode is :


<iframe src="http://www.youtube.com/embed/{param}?hd=1&vq=hd1080"></iframe>

I tried to edit this line but it does not work, can you help me please

$picfindregex = "\.+\";

[BirdOPrey5]

Hi, I use @MarkFL youtube bbcode
https://vborg.vbsupport.ru/showthread.php?t=319623

So the bbcode is :


<iframe src="http://www.youtube.com/embed/{param}?hd=1&vq=hd1080"></iframe>

I tried to edit this line but it does not work, can you help me please

$picfindregex = "\.+\";

Try...


$picfindregex = "\(.+)\";

[elsa23]

Try...


$picfindregex = "\(.+)\";



Thank you so much https://vborg.vbsupport.ru/external/2017/04/2.gif

[chikuru]

How can I set default image if theres no attachment?

[BirdOPrey5]

The default image if there are no other images is set in the Admin CP -> Settings => Options -> Facebook Settings

[chikuru]

The default image if there are no other images is set in the Admin CP -> Settings => Options -> Facebook Settings

Hmm, looks like that doesnt work. If theres no image, the image that appear is one of the image from the theme

[BirdOPrey5]

Does the image show up in the open graph codes in the source code of the page? If it does then perhaps Facebook simply hasn't cleared its cache or doesn't like the image you chose (too small, too big, too wide or tall, etc...) Google "Facebook Debugger" and use that to check what Facebook is seeing. You can also force Facebook to re-scrape the page.

[ikymbo]

Why doesnt works with https images?

[bmwfans]

Perfect!!! Thank you very much, works great on 4.2.3!!!!

[bmwfans]

I just confirmed this issue when using SSL for your forum. The FB debugger loses it mind and FB actual refuses to see the images.

As soon as I comment out ":secure_url" in the plugin, FB debugger is happy and FB actual sees ALL images and lets you choose which one you want.

It even works when using attachment images, i.e. the image url is:

attachment.php?attachmentid=###

BTW, I am using vB 4.2.3 PL2.

Why doesnt works with https images?

Unfortunately the same here! We recently applied SSL and with https the issue came up!
Any suggestions? :confused:

[bmwfans]

With the following modification on the plugin, now everything seems OK again :)

previously:
if(strtolower(substr($thisimg, 0, 5)) == 'https') //If https site
$secure_og = 'secure_url';
else
$secure_og = '';

$bop5_og_tags .= "<meta property=\"og:image$secure_og\" content=\"$thisimg\" />\r\n";

now:
if(strtolower(substr($thisimg, 0, 5)) == 'https') //If https site
$secure_og = 'secure_url';
else
$secure_og = '';

$bop5_og_tags .= "<meta property=\"og:image\" content=\"$thisimg\" />\r\n<meta property=\"og:image$secure_og\" content=\"$thisimg\" />\r\n";