페이스북의 공유, 좋아요, 댓글수 조회하는 법

작년에 한 번 블로그 방문객 벼락 맞은 이후로, 정말 오랜만에 블로그가 흥했던 한 주였다. 블로그 방문객이 갑자기 팍 늘어나는 이유는 100% SNS 때문이고, 99% 페이스북 때문이다. 포스팅 URL을 트위터 개인 계정으로 공유하고 있긴 하지만 영향력이 미미하고, 이상한모임 페이스북 페이지로도 보내는데 그 덕을 많이 보고 있다. 페이스북 개인 계정은 거의 안 쓰고 있어서, 이쪽으로는 공유를 안 하고 있다. 어떤 글들이 페이스북에서 반응이 좋았는지 그리고 그런 글들만 뽑아두고 싶은 생각이 들어 간단히 작업해봤다. http://api.facebook.com/restserver.php?method=links.getStats&urls=조회하고싶은URL을 조회하면 XML형태로 리턴값이 나오는데, 좋아요/공유/댓글 수와 그 합산 값이 함께 표시된다. 블로그 포스팅 하단에 ‘좋아요’버튼에 표시되는 숫자는 합산된 수치다. 총 290여개의 글을 썼는데, 이 중에 합산 수치가 30개… Read the rest

[PHP] 태그의 attribute 값, 파라미터 값 추출 등

문자열 처리 하다보면 워낙 자주 쓰이는 것들인데, 그때마다 찾게 되어서 까먹지 않도록 정리. 속성 값 구하기 <img src=“OOOOO” width=“OOO” height=“OOO”> 와 같이 되어 있을 때, src, width, height 값을 구하는 수식 1234 function getAttribute($html,$tag) {     preg_match( '@'.$tag.'="([^"]+)"@' , $html, $match );    return array_pop($match);} 파라미터 값 구하기 http://www.dev-diary.com/index.php?a=OOO&b=OOO&c=OOO 와 같이 되어 있을 떄, a, b, c 값을 구하는 수식 12345 function getParameter($url,$tag) {    $parts = parse_url($url);    parse_str($parts['query'], $query);    return $query[$tag];        } 태그 사이값 구하기 <b>OOOOOOO</b> 와 같이 되어 있을 때, 태그 사이에 있는 값 구하는 수식 12345 function getTextBetweenTags($string, $tagname) {    $pattern = "/<$tagname>(.*?)<\/$tagname>/";    preg_match($pattern, $string, $matches);    return $matches[1];}  … Read the rest

[크롬 익스텐션 Tutorial] 내부, 외부 링크

크롬 익스텐션 Tutorial 내부, 외부 링크 링크 설정할 때, 익스텐션 내부에서 움직이는 것과 브라우저의 페이지를 변경하는 것 2가지가 있는데, 파라미터 전달하는 부분이 약간 다르다. html 1234567891011121314151617 <!doctype html><html lang="ko">    <head>    <meta charset="utf-8">            <title>Chrome Extension Test</title>    <style>    body {        min-width: 400px;        margin: 10px;    }    </style>    <script src="test.js"></script>     </head>    <body>                    <div id="result"></div>    </body></html> js 123456789101112131415161718192021222324 document.addEventListener('DOMContentLoaded', function () {    document.getElementById('result').innerHTML="<span id='outlink' style='cursor:pointer;'>comixest.com</span><br><span id='inlink' style='cursor:pointer;'>다른 페이지</span>";    document.getElementById("outlink").addEventListener("click", myFunc, false);    document.getElementById("outlink").myParam = "http://www.comixest.com";    function myFunc(evt) {        goURL(evt.target.myParam);    }            document.getElementById("inlink").addEventListener("click", myFunc2, false);    document.getElementById("inlink").myParam = "page2.html";    function myFunc2(evt) {        goURLin(evt.target.myParam);    }       }); function goURL(key) {     chrome.tabs.getCurrent(function (tab) {      chrome.tabs.update({url: key});    });} function goURLin(key) {     document.location.href=key;} html은 그냥 div로 영역만 잡아 놓고, 나머지는 전부 js에서 했다. 브라우저의 URL을 변경하려면 permission 에서 tabs 를 설정해야 한다. 123 "permissions": [](#)"tabs"],… Read the rest

[크롬 익스텐션 Tutorial] GET, POST 방식 호출하기

이번에 웹툰 뷰어 크롬 익스텐션을 만들면서, 가장 중요한 것은 서버의 데이터를 가져와서 뿌리는 부분이었다. 여기서는 간단하게 이미지만 출력하는 부분을 구현하였다. html, js, json을 만들어내는 php 3가지가 필요하다. html 1234567891011121314151617 <!doctype html><html lang="ko">    <head>    <meta charset="utf-8">            <title>Chrome Extension Test</title>    <style>    body {        min-width: 400px;        margin: 10px;    }    </style>    <script src="test.js"></script>     </head>    <body>                    <div id="result"></div>    </body></html> js 1234567891011121314151617181920212223242526 var test = {    requestImages: function() {        var req = new XMLHttpRequest();        req.open("GET", "http://www.comixest.com/chrome/getListTest.php?no=1", true);        req.onload = this.showImages.bind(this);        req.send(null);    },    showImages: function (e) {        var response = eval('(' + e.target.responseText + ')');         for (var i = 0; i < response.data.length; i++) {            var div = document.createElement('div');             div.id="list"+i;            document.getElementById('result').appendChild(div);                         var img = document.createElement('img');            img.src = response.data[i].cover_img;             document.getElementById(div.id).appendChild(img);        }        },}; document.addEventListener('DOMContentLoaded', function () {    test.requestImages();}); json 1 {"data":[{"cover_img":"http:\/\/www.comixest.com\/img_data\/6825w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/2698w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/4183w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/3044w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6146w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6273w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8159w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8779w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8442w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8847w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9133w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9147w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9045w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9156w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6610w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9037w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9041w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9029w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9127w.png"}]} php는 DB끌어와서 json 만들어내는 부분 밖에 없으니, 코드는… Read the rest

PHP Tutorial 사이트 추천 – PHPGang

나 같이 막 코딩하는 사람에겐 무엇보다 튜토리얼이 참 많은 도움이 되는데, 자주 찾게 되는 튜토리얼만 잘 모아놓은 사이트가 있어서 추천. 유명해서 알만한 사람은 다 알 것 같다는 생각도 들지만, 구글링해보면 국내 게시물 중에서는 언급한 게시물이 별로 없는 것 같기도. Facebook 연동 부분을 찾다가 알게된 사이트인데, 페북 연동 외에 다양한 기능에 대한 설명을 볼 수 있다. http://demo.phpgang.com/… Read the rest

PNG 파일 사이즈를 줄여주는 맥용 앱 Pngyu 추천

웹서비스를 운영하면 이미지 사이즈에 민감해질 수 밖에 없다. 계정 용량도 그렇지만, 트래픽이 문제기 때문이다. 트래픽이 많아져도, 없어도 고민 😡 가능하면 유입량은 많으면서 트래픽 사이즈는 줄이는게 중요한데, 그래서 이미지 사이즈를 줄여주는 것을 많이 찾아봤지만 이 앱이 가장 좋은 것 같다. 딱 기능이 1개 밖에 없는 앱이라서 가볍고, 압축 속도도 이 정도면 충분히 빠른 것 같다. 그 동안 tinypng를 오래 썼었는데, 올리고 다운 받는 과정이 생략되어 매우 만족스럽게 쓰고 있다. 2년 가까이 업데이트가 이뤄지고 있지 않아 이 버전이 마지막 버전이라고 보면 될 것 같다. 그리고 사용해보진 않았지만 윈도우용으로도 있다. Pngyu 다운 받기… Read the rest

워드프레스 테마 설치 시, 400 Bad Requeset 오류 해결 방법

Your browser sent a request that this server could not understand. 오늘 cafe24에 새 계정에 워드프레스 설치를 도와줄 일이 있어서 하는데, 테마 업로드 시에 위와 같은 에러가 나왔다. 평소에 본 적이 없는 에러라서 이게 왜 발생하나 알아봤더니, PHP 5.5 에서는 저런 에러가 발생한다고. PHP 5.3 이하 버전에서는 상관없는데, 5.5에서는 7메가(?) 이상의 용량을 올릴 때 위와 같은 에러가 난다고 한다. (7메가가 기준인지는 확실치 않음. 내가 올린 테마는 9메가) php.ini 파일을 설정해주면 해결이 된다고 하나, 웹호스팅 업체의 신세를 지고 있는 입장이라면 그게 쉽지 않을테니, 5.3이하로 다운그레이드를 하면 매우 쉽게 해결된다.… Read the rest

페이스북 공유시 썸네일 이미지 바로잡기

웹사이트에 좋아요, 공유하기 버튼을 설치하면 알아서 제목과 썸네일 이미지를 잡는다. 그런데 엉뚱한 제목이나 내용, 썸네일 이미지가 들어갈 수 있기 때문에 meta 태그에서 올바르게 설정해줘야 제대로 된 내용이 들어간다. 123 <meta property="og:title" content=“제목” /><meta property="og:description" content=“내용” /><meta property="og:image" content=“이미지 경로” /> 그런데 문제는 이미지다. meta 태그로 제대로 설정해도 나오지 않는 경우가 있는데, 이럴 때는 사이즈가 문제가 될 때가 있다. 200 x 200 사이즈를 넘지 않으면 다른 이미지를 가져오는 경우가 있다. 내가 작업하는 페이지는 페이지별 대표 이미지가 180 x 260 사이즈였는데, 억지로 200 x 289 사이즈로 조정하니 그 이후에는 정상적으로 표기됐다. 이렇게 수정해도 바로 반영이 되지 않을 경우에는 페이스북 디버거 페이지에 접속하여,… Read the rest

[HTML&CSS] 모바일웹 하단 광고 고정

앱처럼 모바일웹에도 배너를 하단에 고정시킬 수 있다면 수익이 좀 생길까 싶어서 알아봤는데, 일단 구글 애드센스는 불가능했다. 그런 사례가 걸린다면 계정을 없애버린다고. 잠깐 다른 이야기지만, 예전에 사이트 운영할 때 3~4년 걸려서 $100이 모였는데 불법 클릭을 유도했다며 어느 날 갑자기 계정을 없애버렸던 것을 생각하면 지금도 열받는다. 아무 것도 한 것이 없읐는데. 여하튼, 구글은 그 쪽에서 결정한 것이 곧 법이기 때문에 거슬리는 일을 해서는 안 된다. 그래서 다른 곳을 알아봤다. 다음의 애드핏(구 아담)과 카울리는 앱이 아닌 모바일웹에도 광고를 게재할 수 있도록 해주며, 둘 다 하단 광고 고정에 대해서는 별다른 규제가 없다. 아래 샘플은 카울리 광고다. <head>에 css와 js 정의하고, 12345678910111213141516171819202122 @media only screen… Read the rest

[PHP, jQuery Tutorial] 검색어 자동완성 구현하기

  만화책 제목으로 검색할 때, 앞부분만 맞으면 아래에 목록을 표시하는 기능을 구현하였다. 요즘은 너무나도 흔한 기능이지만, 꽤 오랫동안 구현하고자 생각만 하다가 이번 리뉴얼에 맞춰서 작업을 했다. 처음에 개념이 잘 안 잡혀서 고생한 탓에, 최소한의 소스로 정리하였다.   1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link href="css/bootstrap.min.css" rel="stylesheet">        <link href="css/font-awesome.min.css" rel="stylesheet">         <script src="js/jquery.js"></script>        <script src="js/bootstrap.min.js"></script>         <style>            #display {                width:100%;                display:none;                position:absolute;                z-index:9999;                           float:right;                border-left:solid 1px #dedede;                border-right:solid 1px #dedede;                border-bottom:solid 1px #dedede;                overflow:hidden;            }                .display_box {                padding:4px;                font-size:12px;                height:80px;                background:#FFFFFF;                color: #333333;            }                        .display_box:hover {                background:#fcffaa;                color: black;                cursor: pointer;            }                        .boximage {                 float:left;                margin-right:10px;            }        </style>              <script>            $(document).ready(function () {                $("#keyword").keyup(function()   {                    var keyword = $(this).val();                    var dataString = 'searchword='+ keyword;                                                                                                    if(keyword=='') {                         $("#display").hide();                    } else {                            $.ajax({                        type: "POST",                        url: "suggestions.php",                        data: dataString,                        cache: false,                        success: function(html) {                                           $("#display").html(html).show();                            }                        });                    } return false;                                             });                 });                  function goDetail(no) {                 document.location.href="detail.php?no="+no;            }                           function checkSearch() {                 var searchKeyword=document.getElementById("keyword").value;                                if(!searchKeyword.trim())                    alert('검색어를 입력해주세요');                else {                    location.href='searchresult.php?q='+searchKeyword;                }            }             </script>    </head><!--/head-->     <body>            <form action="javascript:checkSearch();">            <div… Read the rest