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! mod 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:
    You need to be logged in to view the code. Login or Register now!

    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.


    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

    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!

  • #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 "images" 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:	1
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:	1
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
                      You need to be logged in to view the quote. Login or Register now!
                      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