Official - Paid Open Graph Meta Tags for Facebook and Twitter and all social media sites

[glennrocksvb]

Content is king. But what is a king without followers? In this day and age, when you want your forum to reach a broader audience, you'd share on social media. The huge popularity of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential?

This mod enables you to use Open Graph meta tags that gives you control on what appears on the shared post. This allows you to control on what image or description is used that is associated with the URL. For Twitter, they have this so called Twitter Cards feature that allows you to attach prominently large photos to tweets instead of just square thumbnails.

Open Graph meta tags are recognized and supported by all social media sites. So this mod will work not just on Facebook and Twitter but also on other sites such as Google+ and the like and even in other non-social media sites that support Open Graph protocol.

This mod automatically picks up the first attached photo in a post and uses it in the og:image meta tag. If no photo is attached or if the shared link is not a topic page in your forum (e.g. Homepage), then the default image you configured in the Open Graph Settings will be used.

Demo:
If you share the Tag Cloud Module That Rocks! page on Facebook and Twitter, you would see this:


The thread has the following meta tags automatically generated by this mod:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@vbmodsthatrocks"/>
<meta name="twitter:creator" content="@vbmodsthatrocks"/>
<meta property="og:url" content="https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-custom-modules/1262-tag-cloud-module-that-rocks"/>
<meta property="og:title" content="Tag Cloud Module That Rocks! - vBulletin Mods That Rock!"/>
<meta property="og:description" content="Tired of the boring and uncustomizable default Tag Cloud Module? Rejoice, here comes the Tag Cloud Module That Rocks! :cool:  Features: - Has awesome animation"/>
<meta property="og:image" content="https://vbmods.rocks/filedata/fetch?type=large&amp;id=1330"/>

Open Graph Settings in AdminCP:


Note: Make sure that "Unregistered / Not Logged In" usergroup has permission to view the attachments. Otherwise, Facebook and Twitter and other sites which access your site as a guest will not be able to find and download the image attachments in the post you are sharing.

vB 5.3.4+ Conflict:
Starting vB 5.3.4+, Open Graph is implemented by default. But it still lacks all the features of this mod at this time. So this mod is still better than the default. You must disable the default "Show Open Graph Meta Tags" option in AdminCP > Settings > Options > Facebook Options when using this mod to prevent duplicate meta tags.

Version History:

v1.4

• Added og:image:width and og:image:height tags to ensure Facebook renders the image immediately even if page is shared for the very first time.

v1.3

• Fixed issue where an image attached using the Camera icon was not picked up and used in og:image meta tag.
• Fixed the Facebook Share debugger warning "Tag specified as 'name' instead of 'property'" for fb:app_id property.

v1.2

• Fixed issue when the first attached image was not an image file (e.g. zip file) and the next attachment was an image, the generated Open Graph Meta tag for image did not use the next attached image but instead used the default fallback image. It should now use the first available image in the attachments (not necessarily the first attachment in the list) if any.

v1.1

• Fixed empty 'twitter:site' and 'twitter:creator' meta tags if 'Twitter username' was not set in AdminCP Open Graph settings or left with default value of '@';
• Fixed non-topic pages wherein only the og:image meta tag was present. All pages across the site should now have Open Graph meta tags and og:image will use the default image for non-topic pages.
• Fixed a bug where image attachments with file extension in uppercase letters were ignored and default image was used.
• Added Facebook App ID option in Open Graph Settings.

v1.0

• Initial version

Instructions:
Please refer to the installation document included in the file.

Price: $20

Payment Accepted: PayPal or Debit/Credit Card

Need help or not comfortable installing this mod? Purchase the installation service below:

Product Installation Add-On: $20

Purchase this product add-on to get professional installation of this mod from us.

Don't have a PayPal account yet or want to use a new account to purchase this mod? Sign up with PayPal now and get $5 reward!

Want to pay using Credit/Debit Card? Contact us and we will send you an invoice where you can use your own card.

[glennrocksvb]

Actual Facebook and Twitter posts:

[glennrocksvb]

I don't know why the embedded Facebook post is not loading. Here's the direct link to the post:

https://www.facebook.com/vbmods.rocks/posts/1145335695545640

[NumNum]

Glenn, the image selected as default, would that be for all users?

[glennrocksvb]

Yes the default image you provide will be used regardless of who the user is. But note that when Facebook or other social media site extracts the meta tag from your site, they will be visiting the link as a guest.

[NumNum]

So i could have a larger version of my ico file as an image?

[glennrocksvb]

Yes, just save it as jpg or png and then upload it to your site then use its URL as the default image in the Open Graph settings.

[NumNum]

Is there a preferred directory?

[glennrocksvb]

You can upload anywhere but the most appropriate location is the "images" folder.

[glennrocksvb]

If you share this thread on Facebook, this is how it would look like. Notice the attached image in the first post is used prominently as the thumbnail in the Facebook post.


If you share a post in this forum or any page that doesn't have an attached image, you would see a bigger version of the site logo. This is the image that I configured to be used as default.

[NumNum]

I like the idea of the site logo, my problem is mine spans the entire banner. So, in this case i probably will use the larger ico file.

[glennrocksvb]

You can use whatever default image you think would be best for advertising your site.

[gcombe74]

hmm.... I wonder who gave you this great idea! ahahah its a killer mod for those looking to brand or pick what gets posted to FB from your site.. or think bigger.. your RSS feed! We rotate our sponsor images based on the code base glen wrote. (this is an updated better version) The biggest add for us is the blur code that Glenn came up with. So now i can have my site wide open.. have RSS build the feed on all forums, and then post out that to our FB page 2 times a day and post a sponsor image with it! I pull my rss with twitterfeed.com

https://www.facebook.com/coverandcushion/posts/592223227651846

[NumNum]

Glenn, is the logo always above the post, or can it be to the left of the post?

[glennrocksvb]

I think it depends on the width of the image. If it's narrow enough, I think Facebook displays it on the left side.

[NumNum]

Ok, thanks.

[Ashlar217]

Just installed and tested on my 5.2.4 board. I don't see any change in the way my shares appear on twitter or facebook.

[Ashlar217]

Ok I managed to follow the dev tools info for Twitter/Facebook. Now all I need to know is what is the best size for the default image?

[glennrocksvb]

Now all I need to know is what is the best size for the default image?

Ashlar217, thanks for purchasing this mod.

For Facebook, the image should be at least 200x200 in dimensions. Otherwise, Facebook will not display the image in the post.

For Twitter, the image should be at least 120x120 (for Summary Card) and 280x150 (for Summary Card with Large Image) and must be less than 1MB in file size.

[Ashlar217]

Awesome. I am having trouble trying to get any other image to show other than the one i set as the default. Even if the page/article/post im trying to share has images.

Any suggestion?