Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:
    Click image for larger version  Name:	open-graph-min.png Views:	1 Size:	45.0 KB ID:	1351

    The thread has the following meta tags automatically generated by this mod:
    HTML Code:
    <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:
    Click image for larger version  Name:	open-graph-settings-min.png Views:	1 Size:	13.0 KB ID:	1352

    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

    Buy Now Add to Cart View Cart

    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.

    Add to Cart View Cart


    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!
    Last edited by glennrocksvb; 03-04-2019, 11:11 PM.

    #2
    Actual Facebook and Twitter posts:


    Comment


    #3
    Glenn, the image selected as default, would that be for all users?
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    Comment


      #4
      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.

      Comment


        #5
        So i could have a larger version of my ico file as an image?
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        Comment


          #6
          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.

          Comment


          • NumNum
            NumNum commented
            Editing a comment
            Is there a preferred directory?

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            You can upload anywhere but the most appropriate location is the &quot;images&quot; folder.

          #7
          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. Click image for larger version

Name:	og.png
Views:	24
Size:	116.9 KB
ID:	1377


          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. Click image for larger version

Name:	og2.png
Views:	21
Size:	40.2 KB
ID:	1378


          Comment


            #8
            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.
            If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

            Comment


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

              Comment


                #10
                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/coverandcus...92223227651846
                Last edited by gcombe74; 09-27-2016, 09:47 AM.

                Comment


                  #11
                  Glenn, is the logo always above the post, or can it be to the left of the post?
                  If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    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
                    NumNum commented
                    Editing a comment
                    Ok, thanks.

                  #12
                  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.

                  Comment


                    #13
                    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?

                    Comment


                      #14
                      Originally posted by Ashlar217 View Post
                      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.

                      Comment


                        #15
                        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?

                        Comment

                        Working...
                        X