jQuery를 사용하여 OG : IMAGE 값 변경

모든 사진이 동적으로로드되는 단일 HTML 페이지로 이미지 포트폴리오를 구축합니다. 모든 것은 지금까지 멋지다, 페이스 북 META OG : IMAGE를 제외하고.jQuery를 사용하여 OG : IMAGE 값 변경

페이지가 한 번만로드되므로 OG : IMAGE URL을 한 번 할당 할 수 있습니다 ... 하지만 사진 앨범이므로 이미지는 각자의 OG : IMAGE를 갖고 싶습니다.

사진은 --li class = "open-pic"- 태그를 클릭하여로드합니다. -li class = "open-pic"- 태그를 클릭 할 때마다 OG : IMAGE 값을 변경하고 싶습니다.

가능합니까? 나는 이런 식으로 물건을 발견

$('meta[name=og\\:image]').attr('content', newImageUrl);

그러나, 나는 li.open - 그림의 onclick 이벤트에이를 연결하는 방법을 모르겠어요. 감사합니다. 한 번에 이미지 URL ...하지만 난 정말 자신의 OG 각 사진을 가지고 싶다 :

출처

2012-09-13 Cospefogo

한 번만 페이지가로드 이후

출처

2012-09-13 11:10:32

아쉽다 ... 너무 간단합니다. 난 내 자신이 부끄러워. 정말 고마워. – Cospefogo

감사의 필요성 :) ..이 도움이된다면 대답이나 upvote로 표시하는 것을 잊지 마십시오. 이것도 다른 사람들에게 도움이 될 수도 있습니다 –

나는 이것이 작동하지 않는다고 생각합니다 ... 예, 메타 태그의 가치를 바꿀 것입니다 ...하지만 페이스 북은 여전히 메타 태그에 등록 된 원본 이미지를 보여주기 때문에 쓸모가 없습니다 ... 참조 CBroe의 대답은 ... – dsdsdsdsd

$('li.open-pic').click(function(){ 
$('meta[name=og\\:image]').attr('content', newImageUrl); 
}); 
, 나는 OG를 할당 할 수 있습니다 이미지, 이것은 사진 앨범이기 때문에.

변경 OG 메타 태그 클라이언트 측이 실제 사용의 - 그것은 그들이 당신의 URL에 대한 HTTP 요청을하고 HTML 코드에 무엇이 있는지 의미 스크레이퍼,의를 통해 페이스 북이 해당 태그를 읽을 수 있기 때문에, 스크래퍼는 자바 스크립트를 실행하지 않습니다.

해결책 : 각 사진에 대한 개별 URL을 고유 한 메타 정보와 함께 제공하고 각 사진에 대해 해당 URL에서 FB 기능이 같은 버튼/공유 기능/모든 것을 갖도록하십시오.

(당신이 클라이언트 측 문제가되지 않는 일을 처리하는 방법 - 당신은 여전히 한 페이지에 모든 사진을 표시 할 수 있습니다 당신이 원하는대로 AJAX를 통해 새로운 콘텐츠를로드 -하지만 당신은 사진에 대해 별도의 URL을해야합니다 개별 Open Graph 개체로 인식 될 수 있습니다.)

출처

2012-09-13 11:44:44 CBroe

정말 고마워요, CBroe! 당신의 설명을 진심으로 감사드립니다. 나는 워드 프레스 환경에서 일하고 있으며, 결국 각 사진에 대해 하나의 페이지를 만들 것입니다. 거기에서 벗어날 수는 없습니다. – Cospefogo

콜론입니다. 작은 따옴표 &을 다음과 같이 큰 따옴표로 사용해보십시오.

var imgSrc = $(this).find('img').attr('src'); // image stored as variable 
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property

출처

2014-01-06 23:47:12 danwarfel

jQuery를 사용하여 OG : IMAGE 값 변경

답변

관련 문제