네이버 라인(line) 링크방식 공유버튼 티스토리에 적용하기 - 스크립트 로딩 없이!

라인은 아직까지 한국용 api를 공개하고있지 않습니다.

그래서 일본, 영어권용 라인 공유api를 적용했었는데요

http://media.line.me/howto/en/

그런데 이게 스크립트를 불러와 버튼을 만들어주는 방식이었기 때문에, 속도저하의 원인이 되었습니다.

▲구글 페이지스피드 인사이트(https://developers.google.com/speed/pagespeed/insights/) 검사에서 항상 지적당하는 라인 스크립트..

그래서 적용하기 조금 번거로울지라도 영어api를 참조하여 링크방식으로 변경하였습니다.

링크방식 라인 공유 버튼 적용

1.HTML/CSS편집에서 라인버튼 이미지를 업로드합니다.

(가로세로 30px 이미지입니다. 업로드할 때 이름이 line_button.png 인지 확인해주세요.)

다른 크기의 이미지는 http://media.line.me/img/linebutton_en.zip 여기서 받아 이름을 line_button.png로 바꿔서 업로드해주세요.

2. skin.html에서 공유버튼을 적용할 위치에 다음을 붙여넣습니다.

<span id="line"><img src="./images/line_button.png" width="32" onclick='window.open("http://line.me/R/msg/text/?["+document.getElementsByTagName("TITLE")[0].text+"]...더보기 : "+location.href+"?","_blank");'></span>

예) 본문 아래에 버튼을 만드려면

[##_article_rep_desc_##]

아랫줄에 붙여넣으면 됩니다.

jQuery를 적용한 스킨을 사용중이라면 다음 코드를 사용하여 포스트 내용을 일부 포함할 수 있습니다.

<span id="line"><img src="./images/line_button.png" width="32" onclick='window.open("http://line.me/R/msg/text/?["+document.getElementsByTagName("TITLE")[0].text+"] "+$(".article p:first-child,.article p:nth-child(2)").text()+"\n...더보기 : "+location.href+"?","_blank");'></span>

.

Addthis, 카카오톡, 카카오스토리 공유버튼과 함께 쓴 예시

Addthis 업데이트된 코드와,카카오링크 (카카오톡, 카카오스토리 공유) 스크립트를 함께 쓴 예시입니다. (공유버튼부분만)

<!-- Sharing Buttons -->

<span class="visible-xs" style="float:left">

  <span id="ktalk"><img src="./images/kakaotalk.png" width="32" onclick="executeURLLink()"></span>

  <span id="kstory"><img src="./images/kakaostory.png" width="32" onclick="executeKakaoStoryLink()"></span>

  <span id="line"><img src="./images/line_button.png" width="32" onclick='window.open("http://line.me/R/msg/text/?["+document.getElementsByTagName("TITLE")[0].text+"] "+$(".article p:first-child,.article p:nth-child(2)").text()+"\n...더보기 : "+location.href+"?","_blank");'></span>

</span>

<div class="addthis_sharing_toolbox"></div>