Extra Form
PHP PHP 7.4
CMS Rhymix 2.0

라이믹스 용 으로 커스텀된 스케치 북 게시판 을 사용 중 입니다 

 

스케치북 게시판을 사용하시는 분들은 다들 아시겠죠? 

스케치북 게시판의 하단에 sns 공유 링크가 있죠?

 

오류내용 문의 .jpg

 

첫번쩨 궁금 한것은요 

pin 공유가 xe 코어를 사용 할때는 작동 했었는데 라이믹스로 업데이트후 공유를 시도하면 대표이미지 로드가 실패 하여서 공유가 안되는 현상이 나타납니다;;

 

pin공유시이미지로드실패.jpg

위에 이미지 처럼 표안에 이미지가 로드 되어야 핀에 정상적으로 공유가 가능한데 이 부분이 라이믹스로 업데이트후 이미지 로드에 실패 하는 이유가 궁금하네요;

 

board.js 의 sns 공유 관련 내용 

 

388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
// 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;
    });
cs

 

 

그리고 두번쩨 질문 은요 

 

지금은 서비스가 중지된 구글 플러스 해당 공유 링크를 네이버 API 를 이용해서 커스텀 하고 싶은데 그럼 스크립트 안의 구글 플러스 스크립트 부분을 네이버 스크립트 url로 변경해야 하겠죠? 그럼 이 부분의 구글을 -> 네이버로 변경하여 커스텀 작업을 진행 하고 싶습니다 .

 

해당 pinterest 과 google 스크립트 관련 내용 

 

403
404
405
406
407
408
409
410
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);
cs

 

 

이 코드 안의 구글 링크 내용을 수정 해야 할듯한데 핀 공유시 이미지 로드 실패 하는 부분의 원인과 이를 수정하려면 건드려야할 부분을 알고 싶고 또 사용하지 않는 구글 플러스의 내용을 -> 네이버 블로그 공유로 바꾸기 위한 loc link 의 내용 변경을 어떤식으로 해야 할지 알고싶어 질문을 드리게 됬습니다.

 

위 board.js파일을 수정하여 가능 하다면 이파일에서 작업 하고싶습니다만 혹 직접 카카오톡 커스텀 부분 처럼 개시판 board.html 에 직접 들어가는 방식이 수월 하다면 그렇게 진행해 보고도 싶습니다.

 

지금 커스텀된 카카오 공유링크 부분 : 카카오 공유 링크 내용은 _read.html 내용에 직접 추가해 적용 했습니다 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--// 최상상단 카카오공유 내용 추가 소스-->
            <load target="//developers.kakao.com/sdk/js/kakao.min.js" />
            <!--<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>-->
            <script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('{$mi->kakao_key}');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendScrap({
      requestUrl: '{$sns_link}'
      });
    }
  //]]>
</script>
<!--// 게시판 시작 //-->
cs

 

 

카카오 톡의 공유 링크는 구글 검색으로 나온 내용을 기반으로 작업 했습니다.

 

구글 내용을 -> 네이버로 변경 커스텀 할때도 이런식으로 개시판에 직접 내용을추가해 주는것으로 해결 해야될까요 아니면 board.js 파일에서 수정으로 가능 할지 또 가능하다면 해당 부분을 어떤식으로 변경해 줘야할지 조언을 듣고 싶습니다.

 

그리고 pinterest 공유 실행시 이미지를 불러오지 못하는 오류는 무었이 원인인지 이 부분에 대한 조언을 부탁 드립니다 

 

 

TAG •
  • profile
    구글 -> 네이버 수정은 여기 타운의 이에 관련된 게시글을 기준삼아 진행하면 가능할듯 싶네요 이 부분을 사용않는 구글 플러스에 적용하는 방법을 생각해 봐야 겠어요

    https://xetown.com/tips/525708
  • profile
    그런데 pinterest 공유시 이미지 로드가 안되는 원인은 뭘까요? 혹시 스케치북 5 스킨 을 사용 하시는 다른 분들도 이런 현상이 있으신가요? 라이믹스 업그레이드 전에는 문제없던 pinterest 공유의 이미지 로드가 라이믹스ㅡ 업그레이드 후에 문제가 생긴 원인이 뭔지 ;;;
  • profile ?
    이미지의 소스를 가져와서 핀터레스트로 보내는데 이미지 소스가 로컬 주소 그러니까 /files/로 시작하는 주소입니다. 아마 xe코어는 이미지 주소를 앞에 https:// 이렇게 시작하도록 풀로 저장을 했었나본데 라이믹스는 그렇게 안하거든요. 이건 소스를 수정해서 이미지 주소 앞에 사이트 주소를 붙여주던가 아니면 첨부된 이미지의 주소가 풀url로 저장될 수 있도록 하던가 (근데 라이믹스에서 이게 가능하던가요? 안되는거 같던데) 뭐 그래야 할겁니다
  • ? profile

    감사합니다 단비아빠님 적용해 보도록 살펴보겠습니다 일단 사용않는 구글 플레이 -> 네이버는 board.js 파일과 해당 css 파일등 수정 으로 간단히 적용이 됬습니다 핀터 레스트도 한번 다시 살펴봐야 겠네요

  • ? profile
    말씀대로 핀터레스트 공유 링크시 생성된 url을 살펴보니 도메인 /files... 이 아니라 /files 이런식의 상대 경로로 로컬url 만 생성되 이미지를 못긁어 가는군요

    그런데 이게 희한한게 예를들어 유투브 영상링크로 자동 생성된 섬네일 이미지는 등록이 되는군요...

    이때도 이미지가 파일로 첨부되 있으면 실패하게되고
    첨부된 이미지 없이 유투브 영상만 올라가 있으면 유투브의 섬네일을 긁어가는군요

    1. 유투브 + 이미지 파일 = 공유실패

    ex : https://hothoney.co.kr/youtube/10307

    2 유투브 영상 자동 생성된 섬네일 = 공유성공

    ex : https://hothoney.co.kr/youtube/10298

    이런 식입니다;;

    제가 보기엔 스케치북5 게시판 스킨의 board.js 파일의 핀터레스트 공유 링크인 //www.pinterest.com/pin/create/button/?url=

    (이미지 파일과 사이트 게시글 링크를 읽어오는 코드)
    '+href+'&media='+img+'&description='+encodeURIComponent(title);

    이 코드가 사이트의 절대 url 을 불러오지 못하고 파일(files) 의 로컬 상대 경로만 불러 오는듯 한데 이 부분을 도메인을 포함한 절대 경로를 불러오는 xe 문법이 어떤게 있을까요?
  • ? profile
    감사 합니다 단비 아빠님 덕분에 힌트를 얻어 수정할수 있었습니다.

    핀터레스트 로 이미지를 보내는 링크 코드에 절대경로가 없으니 상대경로에서 이미지를 긁어가지 못하는 오류는
    이미지 파일과 사이트 타이틀만 읽어오는 부분에 +url을 추가해 주니 해결되더군요;;

    코드 수정 부분은 '+href+'&media='+img+'&description='+encodeURIComponent(title);
    이 부분에 &media 이부분에 &mediaurl 이렇게 이미지의 절대경로 url을 불러 올수있게 추가해주니 해결 되었습니다.

    이렇게 해서 팬터레스트 이미지 로드 오류와 서비스 중지로 사용 못하는 구글 플러스 -> 네이버 블로그 공유로 변경 부분을 모두 해결 했습니다

    가장 결정적인 힌트를 주셔서 다시 한번 감사 드립니다 ^^

    혹시 저와 빗슷한 라이믹스 업그레이드 이후 핀터레스트 sns 공유 오류가 있으신 분들은 참고 하시길 바랍니다