로그인

검색

Extra Form
추천지수 9

오래된 게시판 스킨의 트위터 공유 기능이 잘 동작하지 않는 경우가 있습니다. 아마도 트위터에서 공유 방식이 변경되어서 그런 것 같은데 이를 반영하지 못해서 그런 것 같은데 제가 스케치북5 스킨의 예를 들어 한번 수정한 것을 적어 보겠습니다.

 

*의외로 최신 스킨에도 예전 코드가 그대로 사용되는 경우가 많아 공유가 안되고 있습니다.

 

/js/board.js 파일에 sns공유하는 코드가 있습니다.

 

라인 수는 제가 가진 파일 기준이라 조금씩 다를 수 있습니다.

 

// To SNS
bd.find('.to_sns a').click(function(){
var t = $(this);
var type = t.data('type');
var p = t.parent();
var href = p.data('url');
var permanentUrl = p.data('permanenturl');
var title = p.data('title');
var img = bd.find('div.xe_content img:first').attr('src');
if(!type){
return;
} else if(type=="facebook"){
var loc = '//www.facebook.com/sharer/sharer.php?u='+href+'&t='+title;
} else if(type=="twitter"){
loc = '//twitter.com/home?status='+encodeURIComponent(title)+' '+href;
} else if(type=="google"){
loc = '//plus.google.com/share?url='+href;
} else if(type=="pinterest"){
if(!img){
alert('No Image!');
return false;
};
loc = '//www.pinterest.com/pin/create/button/?url='+href+'&media='+img+'&description='+encodeURIComponent(title);
} else if(type=="kakaostory"){
loc = 'https://story.kakao.com/share?url='+encodeURIComponent(href);
} else if(type=="band"){
loc = 'http://www.band.us/plugin/share?body='+encodeURIComponent(title)+'%0A'+encodeURIComponent(href);
} else if(type=="kakao"){
if(img){
Kakao.Link.sendTalkLink({
label:title,
image:{
src:img,
width: '300',
height: '200'
},
webLink:{
text:permanentUrl,
url:href
}
});
} else {
Kakao.Link.sendTalkLink({
label:title,
webLink:{
text:permanentUrl,
url:href
}
});
};
return false;
};
window.open(loc);
return false;
});

 

 

위 코드 내용 중에 트위터 부분 1줄을 바꿔야 합니다.

 

// To SNS
bd.find('.to_sns a').click(function(){
var t = $(this);
var type = t.data('type');
var p = t.parent();
var href = p.data('url');
var permanentUrl = p.data('permanenturl');
var title = p.data('title');
var img = bd.find('div.xe_content img:first').attr('src');
if(!type){
return;
} else if(type=="facebook"){
var loc = '//www.facebook.com/sharer/sharer.php?u='+href+'&t='+title;
} else if(type=="twitter"){
loc = '//twitter.com/share?text='+encodeURIComponent(title)+' '+'&url='+href;
} else if(type=="google"){
loc = '//plus.google.com/share?url='+href;
} else if(type=="pinterest"){
if(!img){
alert('No Image!');
return false;
};
loc = '//www.pinterest.com/pin/create/button/?url='+href+'&media='+img+'&description='+encodeURIComponent(title);
} else if(type=="kakaostory"){
loc = 'https://story.kakao.com/share?url='+encodeURIComponent(href);
} else if(type=="band"){
loc = 'http://www.band.us/plugin/share?body='+encodeURIComponent(title)+'%0A'+encodeURIComponent(href);
} else if(type=="kakao"){
if(img){
Kakao.Link.sendTalkLink({
label:title,
image:{
src:img,
width: '300',
height: '200'
},
webLink:{
text:permanentUrl,
url:href
}
});
} else {
Kakao.Link.sendTalkLink({
label:title,
webLink:{
text:permanentUrl,
url:href
}
});
};
return false;
};
window.open(loc);
return false;
});

 

위와 같이 바꿔주면 트위터 공유가 정상적으로 됩니다. 여기 라이믹스 꿀팁도 방금 고쳤습니다. 예전 코드 그대로 두면 트위터 공유가 안되고 그냥 트위터 홈화면으로 이동하게 됩니다.

 

 

7월 15일 오전 11시 30분 경 수정되었습니다. url 부분이 조금 바뀌었습니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
  • 스크린샷 2021-04-21 19.20.22.png

    덕분에 트위터도 이제 돌아갑니다. 그런데 왜 저는 내용이 깔끔하게 안나올까요.

     

  • profile
    꿀팁관리소장 2021.04.21 19:25
    To.벨로위키

    글쎄요. encodeURIComponent(title) 이런코드가 제대로 url로 한글등이 전달되어야 할텐데요. 무엇을 잘못하신건지 어떤 차이가 나는지 제가 알 수는 없네요.

     

    제가 언급한 코드 말고 나머지 코드도 저와 일치하는지도 검토해 보세요.

  • profile
    To.벨로위키

    화면 캡처 2021-04-21 193747.png.jpg

     

    소스로보면 이미 전달해야할 제목 부분이 인코딩이 이상하게 되어 있는지 한글이 아닌 상태로 되어 있습니다. 아마도 미리 인코딩이 되어 있는게 아닌가 의심이 되어 보이네요.

     

    만약에 저랑 같은 소스라면 공유버튼 모여 있는 곳에 data-title="{$sns_title}" 이렇게 제목을 불러오는 코드가 있을 겁니다. 

     

    $sns_title이 일치한다면 $sns_title = '이곳에 무엇이 오는지 확인해 보세요'

     

    _read.html 파일에 있을 겁니다. 공유를 위한 타이틀 등을 미리 변수에 담아 놓는 코드가 상단에 있습니다.

     

     

     

    저부분이 문제가 맞네요. 제가 개발자도구로 해당 이상한 글자 지우고 한글로 테스트로 몇자 적어서 고친 다음 공유 해보면 잘 됩니다.

     

    화면 캡처 2021-04-21 200804.png

     

     

    제가 말씀 드린 문서의 sns 공유용 제목을 담아 놓은 곳 코드를 살펴보세요.

  • 벨로위키 2021.04.22 09:06
    To.꿀팁관리소장

    직접 소스코드도 확인해 주셔서 감사 합니다. 

    이상한 글짜 같은건 안보이고 이렇게 되어 있네요. 

    <div cond="$mi->to_sns=='3'" class="to_sns big" style="text-align:{$mi->to_sns_big}" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}"> 

     

    ++지금보니 밴드도 같은 현상이 있네요. 다른 버젼 스케치북5 스킨과 비교하면서 문제점을 찾고 있습니다. 

  • profile
    꿀팁관리소장 2021.04.22 09:20
    To.벨로위키
    $sns_title 이 상단에 어떻게 작성되어 있는지 확인하시라는 거에요. $sns_title이 게시글 제목 담아놓은 변수입니다.
  • 벨로위키 2021.04.22 09:22
    To.꿀팁관리소장
    $sns_title=urlencode($oDocument->getTitle());
    }
    이렇게 되어 있습니다.
  • profile
    꿀팁관리소장 2021.04.22 09:23
    To.벨로위키

    urlencode를 제거하세요. 스케치북 스킨이 흠.... 아무튼 제거해야 합니다.

    $sns_title=$oDocument->getTitleText();

  • profile
    꿀팁관리소장 2021.04.22 09:22
    To.벨로위키
    게시글 제목 $sns_title에 담아놓고 그걸 밴드에서도 이용하니 그렇습니다.
  • 벨로위키 2021.04.22 09:31
    To.꿀팁관리소장
    감사 합니다. 덕분에 이것도 해결 되었습니다. 다른 여러 버전을 검색해도 다 이렇게 되어 있다보니 지금실력으로는 문제점을 찾을수가 없었네요
  • profile
    꿀팁관리소장 2021.04.22 09:33
    To.벨로위키
    지금 사용하시는 버전이 무언지 잘 모르겠는데 문제가 많은 것을 쓰시는 것 같네요. 라이믹스용으로 최신까지 유지보수 되는 것을 쓰시던지 아니면 XE용으로 배포된 것 중 최신버전을 쓰셔야 할 것 같습니다.
    이렇게 고쳐서 쓰면 어디서 문제가 생길지 모릅니다.
  • 벨로위키 2021.04.22 09:43
    To.꿀팁관리소장
    아마도 스케치북5 버전과 라이믹스 버전중에 일전에 이야기 드린대로 서로 내비라든지 공유 버튼 문제등으로 되는게 있고 안되는게 있어서 두개 파일을 통째로 복사해서 넣는 과정에서 문제가 발생한것 같습니다. 지금 깃허브 자료를 보니 제가 사용하는 라이믹스 스케치북은 원래 정상적이였었네요. 이 과정에서 read.html 파일 내용이 서로 바뀌었었나봅니다. 꼼꼼하게 비교해서 라이믹스 스케치북을 베이스로 수정 내용을 반영하겠습니다. 정말 고맙습니다. 한가지 궁금한점이 있는데 질문게시판이 따로 없어서 여기에 써볼게요. 스케치북의 남은 마지막 과제가 다크모드 반영입니다. 제가 사용하는 해시태그의 경우 사용자가 다크모드 버튼을 클릭하면 다크모드가 적용 되는데 구형 위젯도 문제지만 가장 큰 걸림돌이 바로 스케치북 게시판이네요. 제작자가 별도 판매하는 게시판을 구매해서 쓰려고 했더니 이 게시판은 테이블형 보기옵션이 없어서 운영하는 커뮤니티 속성과 맞지 않습니다. 스케치북 라이믹스 버전도 다크모드는 아니지만 배경색을 흰색/검은색 옵션으로 변경하면 검은색 일때 다크모드가 어느 정도 커버 되더군요. 하지만 일일이 모든 게시판의 옵션을 다 변경하기도 쉽지 않고 그래서 생각한게 어차피 레이아웃 다크모드 버튼을 클릭할때 스케이북 라이믹스 검은색 배경 옵션버튼도 함께 실행해 주면 되는것 아닌가 하는 생각이 들더군요. 이 부분이 실제 가능한지 궁금합니다.
  • profile
    꿀팁관리소장 2021.04.22 09:46
    To.벨로위키

    다크모드는 제가 답변드릴 수 없는 문제구요.
    스케치북 버전이 다른 것을 섞어서 쓰면 안됩니다. 라이믹스 버전을 쓰시고 계신다면 모든 파일을 다 라이믹스용 원래 파일을 쓰시고 특정 파일 내용 전체를 다른 버전에서 가져오거나 하지 않으시길.

     

    사이드 내비가 작동이 안되다가 js 코드를 예전 방식?으로 바꾸셨다는 댓글을 적어주셨는데 그것도 이런 잘못된 방법이 일으킨 문제일 것이고 다른분에게 제공하면 안되는 정보 같습니다.

  • 벨로위키 2021.04.22 09:53
    To.꿀팁관리소장
    네 알겠습니다. 라이믹스 버전의 네비를 움직이고 싶어서 아마도 read.html , read_sns.html, read_nav? 정도의 파일만 바꿨던걸로 기억 합니다.
  • profile
    꿀팁관리소장 2021.04.22 09:54
    To.벨로위키
    그걸 바꾸지 않고도 되야 하는게 맞구요. 그걸 하기 위해 파일을 바꾼게 더 큰문제를 일으킵니다. 지금 하나가 발견된 것이구요.
  • 벨로위키 2021.04.22 10:00
    To.꿀팁관리소장
    에디터에서 코드 비교하기로 걸러내고 있습니다. 참 네이버블로그 공유도 가능한 라이믹스 사이트가 있던데 이 부분은 검색해보니 내용이 잘 나오지 않더라구요. 라이믹스 꿀팁도 네이버 블로그는 연동이 되지 않은것 같은데 혹시 이 부분은 연결이 어려운가요? 사이트 홍보용으로 보통 글 작성하고 페이스북에는 공유하기로 블로그는 수동으로 업데이트 해주고 있습니다.
  • profile
    꿀팁관리소장 2021.04.22 10:04
    To.벨로위키
    많은 곳에서 요구가 되지 않는 기능은 기본적으로 제공되지 않을 확율이 매우 높죠. 유료로 판매되는 스킨이나 공유버튼 노출 애드온 등에서도 네이버 블로그 공유는 다루지 않습니다.
    직접 구현하고 싶으시다면 관련 커뮤니티에 질문을 해보세요. 원하는 소스코드를 얻지는 못하실 것 같긴 합니다.
  • profile
    꿀팁관리소장 2021.04.22 10:07
    To.벨로위키
    https://xetown.com/tips/525708

    관련 팁이 오래전에 작성된게 있는데 지금도 잘 되는지 모르겠네요.
  • 벨로위키 2021.04.22 10:13
    To.꿀팁관리소장

    감사 합니다. 한 번 시도해 봐야겠네요 

  • 벨로위키 2021.04.22 11:23
    To.꿀팁관리소장
    안되서 다른 방법을 응용하려고 몇 번 시도해 봤는데 실패 했습니다. 아직 제실력으로는 무리네요.
    https://developers.naver.com/docs/share/navershare/
  • profile
    꿀팁관리소장 2021.04.22 13:11
    To.벨로위키
    일단 눈에 띄는 것은 https://share.naver.com/web/shareView?url= 이렇게 주소가 달라보이네요.
  • profile
    꿀팁관리소장 2021.04.22 13:23
    To.벨로위키
    그런데 이걸 굳이 사용도 없을텐데 사이트에 노출시킬 필요가? 있을지 의문입니다.
    너무 많은 것 중 선택해야 하는 것에 어려움이 있어 실제로 사용 가능한 것 위주로 선택해서 노출해 놓는 것이 좋아 보입니다.

    네이버 블로그 공유라고 해봐야 네이버 글쓰기 정도 열어주는 정도 역할일텐데요.

    블로그 글 쓰기 하면서 사이트의 게시글 링크 하나만 삽입해도 embed로 자동으로 잘 보여줄텐데요.
    물론 운영자마다 생각이 다를 수 있으니 저와 다른 생각으로 네이버공유까지 넣으시려고 하시는 것이겠죠.

    개인적으로는 굳이 자리 하나를 마련해야 할 정도의 중요한 공유로 보이지 않아서요.
  • 벨로위키 2021.04.22 22:01
    To.꿀팁관리소장

    그렇긴 하네요. 꿀팁 게시판  코멘트 스킨이 살짝 변경 된것 처럼 보입니다.

  • profile
    꿀팁관리소장 2021.04.22 22:03
    To.벨로위키
    살짝이 아니고 많이 변경되었죠 ㅋㅋ 살짝 구조만 바꿨지만 모습은 많이 바뀐거죠.
    https://rxtip.kr/free/5616

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. 중복 글/댓글 방지 애드온

    Date2020.07.27 Category기능 Views224 Votes2
    Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. XE 레이아웃 메뉴에 폰트어썸이나 XEICON을 출력하기 3

    Date2020.07.20 Category기타 Views287 Votes2
    Read More
  15. Read More
  16. 라이믹스용 스케치북5 스킨이 있습니다. 10

    Date2020.07.18 Category기능 Views1302 Votes5
    Read More
  17. Read More
  18. Read More
  19. 인기글을 게시판의 공지에 올려주는 애드온

    Date2020.07.16 Category기능 Views242 Votes2
    Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
Prev 1 2 3 4 Next
/ 4