페이지 URL을 사용하여 og : 이미지를 표시하는 방법

Question

쇼핑 추천 사이트가있어 사용자가 추천하는 항목에 대한 URL을 게시 할 수 있습니다.

양식에 현재 주요 제품 페이지에 대한 URL 입력이 하나만 포함되어 있습니다.

사용자가 다음과 같은 링크를 게시한다면

:

http://www.homedepot.com/webapp/wcs/stores/servlet/ProductDisplay?productId=203533553&storeId=10051&langId=-1&catalogId=10053&cm_sp=BlackFriday-_-11_23-_-Hero_C-_-349_Each_GE_Washer_Dryer_Special_Buy#.UK-DHuOe_VQ

나는 OG의 이미지 태그를 보여주고 싶은 것 : 이미지는이 URL에 포함되어 있습니다.

페이스 북의 오픈 그래프 프로토콜 페이지를 사용하여, 나는 위의 URL의 예는 참으로 자책골을 않는 것을 볼 : 이미지 :

http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.homedepot.com%2Fwebapp%2Fwcs%2Fstores%2Fservlet%2FProductDisplay%3FproductId%3D203533553%26storeId%3D10051%26langId%3D-1%26catalogId%3D10053%26cm_sp%3DBlackFriday-_-11_23-_-Hero_C-_-349_Each_GE_Washer_Dryer_Special_Buy%23.UK-DHuOe_VQ

가 어떻게이 자책골로 URL을 추출 가야합니까 이미지?

Answer 1

Railscasts으로이 자습서에 많이 의존하면서 아래처럼 Nokogiri을 사용하여 끝났습니다.

def photo_from_url(url) 
    if !Nokogiri::HTML(open(url)).css("meta[property='og:image']").blank? 
    photo_url = Nokogiri::HTML(open(url)).css("meta[property='og:image']").first.attributes["content"] 
    self.photo = URI.parse(photo_url) 
    self.save 
    end 
end 

나는 이것이 opengraph gem보다 더 신뢰할 수 발견 : 소스 코드에서 이미지 태그 :

url_with_photo = opengraph.fetch(url) 
url_with_photo.image 

는 다음과 같이이 두 번째 방법은 때로는 심지어 자책골이 페이지에 작동하지 않습니다. (일부 페이지에서 작동 했으므로 완전히 잘못 구현하지 않았습니다 ...).

Answer 2

페이지에 Open Graph 태그가 없습니다. 설명 및 예는 여기를 참조하십시오. http://ogp.me/

사용자가 링크를 공유하면 Facebook에서 해당 태그를 읽습니다.

유추 속성 :

디버거는 BTW 무엇을 알려주는 'OG : 홈페이지'속성 값이 다른 태그에서 추론 할 수있는 경우에도 명시 적으로 제공해야한다.

유추 속성 : 다른 태그에서 값을 추론 할 수있는 경우 'og : title'속성을 명시 적으로 제공해야합니다 (심지어 ).

유추 속성 : 값을 다른 태그에서 유추 할 수있는 경우에도 'og : description'속성을 명시 적으로 제공해야합니다.

유추 속성 : 을 다른 태그에서 유추 할 수있는 경우에도 'og : image'속성을 명시 적으로 제공해야합니다.

(매우 중요하고 유용한) 태그가 없어도 페이스 북에서 내 링크를 공유 할 수 있으며 잘 작동합니다.

Answer 3

페이지의 ID를 알고있는 경우 그래프 API URL 끝에/picture를 추가하여 명시 적이든 묵시적이든 관계없이 이미지와 연결된 이미지로 리디렉션 할 수 있습니다.

예를 들어, 아래의 주석 작성자 중 한 명이 ID 10150708135007395 (http : //www.devils-heaven.COM/Heroku가-무료-SSL-모피 - 페이스 북 - 애플 리케이션 /), 그래서 썸네일 이미지를 얻기 위해, 단순히 잡아 :

https://graph.facebook.com/10150708135007395/picture 

Answer 4

module MetaParser 

    require 'open-uri' 

    COMMON_USER_AGENTS = ['Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0','Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36'] 

    def self.parse_doc(url) 
    Nokogiri::HTML.parse(open(url,'User-Agent' => COMMON_USER_AGENTS.sample)) 
    end 

    module Facebook 
    def self.get_attributes(url) 
     attributes = {} 
     doc = MetaParser.parse_doc(url) 

     attributes[:url] = url 
     attributes[:site_name] = doc.at('meta[property="og:site_name"]')['content'] 
     attributes[:title] = doc.at('meta[property="og:title"]')['content'] 
     attributes[:description] = doc.at('meta[property="og:description"]')['content'] 
     attributes[:image] = doc.at('meta[property="og:image"]')['content'] 

     return attributes 
    end 
    end # Facebook 

    module Twitter 
    def self.get_attributes(url) 
     attributes = {} 
     doc = MetaParser.parse_doc(url) 

     attributes[:url] = url 
     attributes[:site_name] = doc.at('meta[name="twitter:site"]')['content'] 
     attributes[:title] = doc.at('meta[name="twitter:title"]')['content'] 
     attributes[:description] = doc.at('meta[name="twitter:description"]')['content'] 
     attributes[:image] = doc.at('meta[name="twitter:image"]')['content'] 

     return attributes 
    end 
    end # Twitter  

end 

사용법 :

MetaParser :: Facebook.get_attributes (" google.com ") MetaParser :: Twitter.get_attributes ("google.com ")