1. This forum is dedicated to suggestions for our free & premium styles for XenForo. If you need to post a bug relating to XenBase or a style please use this forum for reporting bugs or this forum for style support. Alternatively you may submit a ticket here.

og:image vs. apple-touch-icon

Discussion in 'Resolved Suggestions' started by chatloxx, Mar 7, 2015.

  1. chatloxx

    chatloxx Customer

    2
    1
    3
    Hello Pixel Exit team,

    first of all: I bought Core and I really love it up to now. Worth every dollar! :)

    There is one thing, which would be a good feature. Whatever you put in the styles section as Facebook image is set as og:image as well as apple touch icon (meta property="og:image" as content & link rel="apple-touch-icon" as href). If you put in 200x200 pixel, both images are viewed as a square and that's fine. However, facebook recommends 1200x630px as og:image to get a "big" preview picture in the links, which is a great option as it is has a much better appearance in the feeds: https://developers.facebook.com/docs/sharing/best-practices#images

    And now comes the trade-off which one has. It is not a square. Using 1200x630px makes the apple-touch-icon look bad, using a square makes the facebook link preview look bad. (Using 200x200 makes both look good, but it's not retina ready in facebook and automatically uses the old link preview.)

    Therefore I'd recommend to slip this up in two fields:
    • Preview Image for Facebook, 1200x630 recommended
    • Apple Touch Icon for Apple devices, 192x192 (fixed proportion) or bigger recommended
    • (What would be awesome, is an option to remove the "Apple Touch Icon" line from the code)

    Best,
    Stefan
     
    Russ likes this.
  2. Russ

    Russ Designer

    8,399
    1,941
    113
    I like the idea, we can put it into our next update for 1.4.5. I think it'll be in the same position as the facebook logo(style properties wise) and if you don't fill it out it won't load the code at all.

    Thanks and glad you're liking the style! :)
     

Share This Page