Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
More Open Graph Images (Free) by BOP5 Details »
More Open Graph Images (Free) by BOP5
Mod Version: 1.0.2, by BirdOPrey5 (IB Staff) BirdOPrey5 is offline
Developer Last Online: Feb 2019 I like it Show Printable Version Email this Page

vB Version: 4.x.x Rating: (8 votes - 5.00 average) Installs: 70
Released: 18 Jul 2013 Last Update: Never Downloads: 360
Supported Uses Plugins Auto-Template  

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.
Nominate MOTM if you LOVE it!

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	more_og_vb4_html_source.jpg
Views:	1223
Size:	55.1 KB
ID:	145774   Click image for larger version

Name:	more_og_vb4_settings.jpg
Views:	775
Size:	110.4 KB
ID:	145775  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Miscellaneous Hacks Open Internal Links in Same Tab - Ported by BOP5 (VB 4.x & VB 3.x) BirdOPrey5 vBulletin 4.x Add-ons 24 16 Oct 2014 10:05
Miscellaneous Hacks Open Internal Links in Same Tab - Ported by BOP5 (VB 3.x & VB 4.x) BirdOPrey5 vBulletin 3.8 Add-ons 12 30 Sep 2012 20:29

  #16  
Old 06 Aug 2013, 16:06
cdoyle cdoyle is offline
 
Join Date: Oct 2004
Anyone know?
Reply With Quote
  #17  
Old 17 Aug 2013, 14:03
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
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.
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #18  
Old 26 Aug 2013, 00:06
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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?

Last edited by dougdirac; 27 Aug 2013 at 18:05. Reason: typo: "why"-->"why not"
Reply With Quote
  #19  
Old 26 Aug 2013, 16:59
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
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.
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #20  
Old 26 Aug 2013, 19:57
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
Originally Posted by BirdOPrey5 View Post
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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://www.vbulletin.org/forum/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!

Last edited by dougdirac; 28 Aug 2013 at 20:29. Reason: Typo
Reply With Quote
  #21  
Old 27 Aug 2013, 14:30
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
Could you post a link with the Chinese characters that don't work in the existing mod?
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #22  
Old 27 Aug 2013, 18:13
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
Umm here's a link to where some showed up bad.
http://www.teslamotorsclub.com/showt...l=1#post420183
Reply With Quote
  #23  
Old 29 Aug 2013, 20:21
letipro letipro is offline
 
Join Date: Jun 2012
Real name: Nam Lee
please edit og:description to thread description
Reply With Quote
  #24  
Old 01 Sep 2013, 14:45
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
Originally Posted by dougdirac View Post
Umm here's a link to where some showed up bad.
http://www.teslamotorsclub.com/showt...l=1#post420183
I think the encoding of you page will need to be UTF-8 to display UTF-8 content.

Originally Posted by letipro View Post
please edit og:description to thread description
Will look into adding this option.
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #25  
Old 01 Sep 2013, 15:14
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
Originally Posted by BirdOPrey5 View Post
I think the encoding of you page will need to be UTF-8 to display UTF-8 content.
Hmm, how do I do that?


Originally Posted by BirdOPrey5 View Post
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.
Reply With Quote
  #26  
Old 01 Sep 2013, 15:48
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
Originally Posted by dougdirac View Post
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?

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.
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #27  
Old 01 Sep 2013, 23:30
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
Originally Posted by BirdOPrey5 View Post
Not sure I know what you mean by "those twitter tags" and "the card" is?
"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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Originally Posted by BirdOPrey5 View Post
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!
Reply With Quote
  #28  
Old 02 Sep 2013, 00:03
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
 
Join Date: Jun 2008
Real name: Joe D.
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...-upgrade-of-VB
__________________
-Joe
Former vBulletin.org Staff Member

(@BirdOPrey5) Former vb.org Moderator. Fighting for a free & independent vb.org.
BirdOPrey5.com - Exclusive VB Mods! (Formerly Qapla.com) | Joe's Ultimate Off Topic
Note - I do not read my PMs often, do not expect quick replies.
Reply With Quote
  #29  
Old 02 Sep 2013, 07:14
dougdirac's Avatar
dougdirac dougdirac is offline
 
Join Date: Nov 2011
So if you include those twitter meta tags, a tweet that includes a link to your site can look more like this:


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.
Reply With Quote
  #30  
Old 10 Nov 2013, 14:09
SimonB SimonB is offline
 
Join Date: Jun 2012
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.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 11:07.

Layout Options | Width: Wide Color: