/    Sign up×
Community /Pin to ProfileBookmark

Youtube vide embed thumbnail / Firefox messes up page layout

Hello everyone,

I have two questions,

  • 1. I have a webshop on shopify.com. There I have a shop with products and a blog. I have succesfully embeded a facebook “like” Button to each product and to each blog article. So if someone likes a product, on his facebook profile the product picture is displayd. so is when someone likes a blog article. we then see the picture from that blog article on his facebook profile. so fine so good.
  • if I now post a video (youtube or vimeo) on my blog and someone likes it, it is displayed on his facebook profile but facebook doesnot know what picture to display and uses a picture from my footer… which isnt great! people on facebook should be able to see a thumbnail of the video.

    i have did some research and found out that this code in the main html is responsible for the thumbnails on facebook:

    <meta property=”og:site_name” content=”{{ shop.name }}” />
    {% if template contains ‘product’ %}
    <meta property=”og:image” content=”{{ product.featured_image | product_img_url: ‘compact’ }}” />
    {% elsif template contains ‘article’ %}
    {% if article.content contains ‘<img’ %}
    {% assign src = article.content | split: ‘src=”‘ %}
    {% assign src = src[1] | split: ‘”‘ | first | replace: ‘//cdn’, ‘http://cdn‘ | replace: ‘http:[url]http://'[/url], ‘http://’ %}
    {% if src %}<meta property=”og:image” content=”{{ src }}” />{% endif %}
    {% endif %}
    {% else %}
    {% if settings.use_logo %}
    <meta property=”og:image” content=”{{ ‘http://cdn.shopify.com/s/files/1/0165/9620/files/fblogo.jpg?2650‘ }}” />
    {% endif %}
    {% endif %}

    I kind of understand the above but unfortunately I’m not that advanced in programming that i’m able to code something like that by my self.
    I know by now that youtube generates thumbnails like this: img.youtube.com/vi/VIDEO_ID/1.jpg

    What I need would be something like: “if theres a video in the article you have to take this image: img.youtube.com/vi/VIDEO_ID/1.jpg anyone knows how to code that? or maybe someone knows a webpage where such a code is already posted, I assume i’m not the only one who needs such a code.


    ————-

    My 2nd question is that a single page of my webpage is messed up in firefox. safari and chrome are able to show it correctly. but in firefox the whole layout is kind of pushed down. heres the link: [url]http://www.demesamis.com/collections/t-shirts/products/crest[/url]
    this applies to all products. but all the other pages are fine in all browsers.

    Anyone knows why?

    Thanks in advance for any help

    Best regards comi

    to post a comment
    Full-stack Developer

    2 Comments(s)

    Copy linkTweet thisAlerts:
    @comiauthorOct 05.2012 — oh i think i found the solution myself for the second problem. i set this: div.row.clearfix [CODE]{ margin-bottom: 60px }[/CODE] to 0px. i have no idea why it worked but it did!
    Copy linkTweet thisAlerts:
    @Harry14Oct 05.2012 — Good!,i wish i could be lke you,finding solutions to my own problems.
    ×

    Success!

    Help @comi spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...