현재 URL이 아닌 특정 URL에 소셜 공유 링크 (FB Like, Google+)를 추가하는 방법

Question

내 웹 사이트 홈페이지에 기사 티저 목록이 있습니다. 나는 티저에 사회적 공유 링크를 추가하고 싶다. 그러나 모든 시도는 사회적 링크가 사용자가있는 현재 페이지의 게시물을 생성하고 티저는 연결된 실제 페이지가 아닙니다.

의견을 보내 주시면 대단히 감사하겠습니다.

Answer 1

Facebook Like 버튼과 Google +1 버튼은 다른 페이지를 타겟팅하는 것을 지원하지만 기술은 약간 다릅니다.

+1 +1 button docs에서이 조각을 바탕으로 버튼

, 당신은 href 속성 또는 페이지의 헤더에 rel=canonical 링크 요소를 사용하여 현재 페이지를 대상의 기본 동작을 재정의 할 수 있습니다. +1입니다

URL은 순서대로 세 가지 중 하나에 의해 결정됩니다

1. 버튼의 href 속성을. 예 : <g:plusone href="http://example.com"></g:plusone>은 http://example.com을 타겟팅합니다.

2. 페이지의 <link rel="canonical" ... /> 태그 +1 버튼의 href 속성이 제공되지 않으면 Google은 페이지의 정규 URL을 사용합니다. 페이지의 정규 URL 정의에 대한 자세한 내용은 this help article을 참조하십시오. 또한 유용하게 사용할 수있는 configuration tool있다 document.location.href

에서 제공

URL입니다.

페이스 북과 같은 버튼

에 기초 official documentation 당신이 href 속성 또는 오픈 그래프 마크 업을 사용할 수 있습니다.

href 속성은 +1 버튼과 매우 비슷합니다. http://example.com을 타겟팅하는 버튼이 있습니다.

<div class="fb-like" data-href="http://example.com" 
    data-send="true" data-width="450" data-show-faces="true"></div> 

OpenGraph 옵션을 사용하려면 문서 헤더에 meta 요소를 추가해야합니다. 여기 http://example.com을 대상으로 오픈 그래프 요소입니다 :

<meta property="og:url" content="http://example.com" /> 

Answer 2

당신은 각 사회 매체에 대한 사용자 정의 공유 버튼을 만들 수 있습니다. 다음은 인기있는 링크에 대한 공유 링크입니다.

https://www.facebook.com/sharer.php?u=

https://twitter.com/share?url=

당신은 사용자 정의 URL의 인코딩 된 버전으로 위에서 "= ... URL"을 각각 apend해야합니다.당신은 몇 제품이있는 경우 수동으로 수행 할 수 있지만 많은 경우, 당신은 사용할 수 있습니다

encodeURIComponent(varURL) 

을 그리고 다음과 같이 볼 수 있었다 기사의 SRC, 잡아하여 varURL을 생성합니다

를

varURL = $('.articleDiv').children().attr('src');