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

    Paid Mod 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: $25 (no vBMods.rocks branding)

    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!

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

    Last edited by glennrocksvb; 11-03-2023, 11:38 AM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Actual Facebook and Twitter posts:


    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


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

    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.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


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

        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.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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:	515
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:	530
Size:	40.2 KB
ID:	1378


          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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.

            Comment


              #9
              You can use whatever default image you think would be best for advertising your site.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              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


                Advertising on a small budget: the best thing I didwas get a website from homestead simple to use and they li... https://t.co/QzV3vrFZ13
                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?

                  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.
                  Website: https://streetvibrations.net
                  https://mitchysfunsite.com
                  Streets FB: https://www.facebook.com/StreetVibrationsSL

                  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?
                    Website: https://streetvibrations.net
                    https://mitchysfunsite.com
                    Streets FB: https://www.facebook.com/StreetVibrationsSL

                    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.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      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?

                        Website: https://streetvibrations.net
                        https://mitchysfunsite.com
                        Streets FB: https://www.facebook.com/StreetVibrationsSL

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"