티스토리, 나의 링크에 새글 표시하기.. (Preview 기능 있는 버전)

2020년 11월 말경 티스토리 API가 고장난 관계로 현재까지 제대로 작동하지 않음.

Demo & Code

티스토리, 나의 링크에 새글 표시하기 with 카카오 API..

카카오 개발자 포럼에 가서 앱을 등록해야 하며, REST API 키가 필요함.. Demo

ddamddon.tistory.com

카카오 개발자 포럼에 가서 앱을 등록해야 하며, REST API 키가 필요함..

* 내용 추가 - 2020. 9. 9.

    <script>
       $(document).ready(function(){

            var links = new Array();
            $("#my_links ul li a").each(function() {
                    links.push($(this).attr("href"));
            });

            for(var i=0; i<links.length; i++){
                $.ajax({
                    type: "get",
                    url: "https://dapi.kakao.com/v2/search/blog",
                    headers: {'Authorization': 'KakaoAK '+ 'API 키'},
                    contentType: 'application/json; charset=utf-8',
                    data: { query : links[i], size: 1 },
                    success: function(data) {

                        var time1 = new Date(data.documents[0].datetime);
                        var time2 = new Date();
                        var gap = time2.getTime() - time1.getTime();
                        var date = gap / 1000 / 60 / 60; /* 시간 */

                        var thumb = data.documents[0].thumbnail;
                        var title = data.documents[0].title;
                        var time3 = data.documents[0].datetime;
                        time3 = time3.substr(0, 10).replaceAll("-", ". ") + ".";

                        if ( date <= 72 ) {
                            t_url = data.documents[0].url;
                            t_url = t_url.split("/");
                            t_url = t_url[1] + t_url[2];
                            t_url = t_url.replace("www.", "");
                            
                            /* 블로그 주소로 이동 혹은 */
                            $("#my_links ul a[href*='"+t_url+"']").attr({"class": "new", "data-thumb": thumb, "data-title": title, "data-time": time3});
                            
                            /* 최근 글로 이동 양자 택일! */
                            $("#my_links ul a[href*='"+t_url+"']").attr({"class": "new", "data-thumb": thumb, "data-title": title, "data-time": time3, "href": data.documents[0].url});

                            /* Cursor 위치 잡기 */
                            var mouseX, mouseY;
                            $(document).mousemove(function(e) {
                                mouseX = e.pageX;
                                mouseY = e.pageY;
                            });

                            /* 해당 링크에 마우스를 올리면 프리뷰 레이어 생성 */
                            $("#my_links ul li a.new").mouseenter(function(){
                                $("#link_preview").append("<div><img src='" + $(this).attr("data-thumb") + "'><br><span class='title'>" + $(this).attr("data-title") + "</span><br><span class='date'>" + $(this).attr("data-time") + "</span></div>");
                                $("#link_preview div").css({"left": mouseX-120, "top": mouseY-230});
                            });

                            /* 마우스가 벗어나면 레이어 삭제 */
                            $("#my_links ul li a.new").mouseleave(function(){
                                $("#link_preview div").remove();
                            });
                        }
                    }      
                });
            }

       });
    </script>

    <style>
        /* css는 스킨에 맞게끔 수정을.. */
        #link_preview div { position:absolute; width:240px; height:200px; text-align:center;
                font-size:16px; background-color:#000; color:#fff; padding:16px 12px; border-radius:6px;
                white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:1.4 }
        #link_preview div .date { font-size: 12px; opacity:.6 }
    </style>


<body>
    /* skin.html의 적당한 위치에 맹꽁이 <div>를 하나 만들어준다 */
    ...
    ...
    ...
    ...

    <div id="link_preview"></div>
</body>

다운로드

내링크에_새글_표시하기_with_카카오API(Preview 기능).txt

3.2 kB