공지사항
최근 포스트
최근 댓글
최근 트랙백
관리 메뉴

삶을 누리는 디비누스

헤드를 통핸 페북 관리 Moderate Facebook via Head 본문

컴퓨터/블로그

헤드를 통핸 페북 관리 Moderate Facebook via Head

케일럽 2011. 7. 27. 09:00

자신의 티스토리 블로그에 '좋아요' 및 '보내기' 버튼을 추가했는데 페이스북 월로 보내 보면 아래처럼 사진도 이상하게 나오고 글 설명도 이상하게 나올때 있죠?
You may have added 'Like' and 'Send' button to your blog... but when you check it out on your wall, it may be missing pictures and descriptions like the image below...

아래에 소개하는 방법으로 원하는 사진 선택 및 설명도 제대로 보이게 합시다!
With the following method, you can properly display all needed information, may it be your pictures or descriptions...

딴거 다 필요없고 다음 코드를 HTML의 <head> </head> 사이에 삽입하면 됩니다... >,<
All you need to do is to insert the following code in between <head> </head> tags...

 <!-- 페북 헤드 시작 -->

    <meta property="fb:admins" content="513xxxx72"/>
    <meta property="fb:app_id" content="1294xxxxxxx2167">
    <meta property="og:site_name" content="[**_title_**]"/>
    <meta property="og:title" content="[**_page_title_**]"/>
    <meta property="og:url" content="[**_blog_link_**]"/>
    <meta property="og:type" content="article"/>
    <meta property="og:image" content="http://cfs.tistory.com/custom/blog/78/789532/skin/images/Cross-Glow.jpg"/>
    <meta property="og:email" content="caleb1783@gmail.com" />

<!-- 페북 헤드 끝 -->

빨간색 코드는 티스토리 공유 치환자이므로 ** 표시를 ## 표시로 꼭 바꿔야 합니다...
Red codes are tistory values... you must change ** to ##...

이제 각 속성의 설명 및 찾는 방법을 알려드리겠습니다...
Let me explain each properties and ways to find them...

관리자 ID 속성
Admin ID Property

코멘트 소셜 댓글을 설치했다면 이 속성을 추가함으로 관리자로써 블로그 자체에서 댓글들을 관리할 수 있습니다... 페북 코멘트 설치로 이동하여 설치 방법을 알아보세요...
If you have installed comments function to your blog, adding this property will allow you to moderate comments right on the blog... Move to Install Facebook Comments for details on installing it on your site...

1. 자신의 페북 월로 들어가세요...
1. go to your facebook wall...

2. '프로필'로 들어가서 '사진'에 들아가세요.
2. go to 'Profile' > 'Photos' 

3. 주소창에 보면 ?id=xxx 라고 나옵니다... 그것이 바로 Admin ID 입니다... 아래 그림을 참고하세요.
3. when you look at the address bar, you will see ?id=xxx... thats your Admin ID... Refer to the picture below...

앱 ID 속성
App ID Property

각 포스트에 달려있는 댓글이나 좋아요를 일일이 확인하기 힘들죠? 이 속성을 추가함으로 자신의 블로그에 달린 모든 댓글을 한곳으로 모아주는 기능입니다...
Its hard to check every comments and likes on your posts... by adding this property, you can gather all of the comments into one location to moderate...

1. 아래 사이트에 들어가세요...
1. enter the following site...

https://www.facebook.com/developers/apps.php

2. 페북 좋아요 버튼을 이미 추가하였다면 '이름 없는 앱'이라고 나옵니다... 아직 추가를 안하셨다면 페북 좋아요 설치로 이동해서 설치부터 하세요~!
2. If you added Like button already, you will see 'Unnamed App'... if you didnt add the button yet, go to Install Facebook Like to install now~!

3. '앱 ID'가 필요한 앱 ID입니다...
3. 'App ID' is what we are looking for...

4. 그리고 '댓글 관리'에 들어가면 블로그의 각 포스트에 달린 댓글을 관리할 수 있습니다... 그리고 'Moderator View'로 들어가 '웹사이트 방문'을 클릭하면 댓글이 달린 포스트로 이동합니다...
4. 'Moderate Comments' is where all the comments on your blog is gathered.  If you go to 'Moderator View' and 'Visit Website' you will be taken to the post where the comment can be found...

사이트 이름 / 제목 / URL / 이메일 속성
Site name / Title / URL / email Property

뭐 이름 그대로이죠... 치환자로 해도 되고.. 설정해도 되고...
As the name implies... just leave it as it is... or you can define them...

종류 속성
Type Property

페북에서 포스트를 분류하는데 사용됩니다... 티스토리는 블로그이므로 article로 정하시죠...
Used by facebook to categorize the post... since tistory is a blog, make it an article...

사진 속성
Image Property

티스토리의 단점이 헤드 부분에는 치환자가 한정되있다는 것입니다... 그리고 만약 이 부분을 설정 안했을 때 페북에서 자동으로 젤 처음 나오는 <img> 태그를 가져가는데, 첫 그림에서 보듯... 애매한 사진을 가져갈때가 있죠...
Because tistory uses some different codes to display images, facebook tend to grab first <img> tag, which may not be related to the post... as you can see on the first picture...

전 그래서 아예 제 이미지를 올려서 링크 걸어두었습니다... 혹시 포스트의 첫 사진을 헤드부분에 보일 수 있게 하는 방법 아시면 꼭 알려주세요!!! 
So i uploaded my image and linked it... if you figure out how to properly show the first image to facebook, please tell me!!!

설명 속성
Description Property

위에는 없는 속성인데 빼 놓은 이유가 있죠... 이것은 포스트를 설명하는 부분... 만약 헤드 부분에 지정해 두면 어떤 포스트를 보내기 하더라도 항상 같은 설명이 나오죠...
this property is not mentioned above for a reason... this property is the description of the post... if you are to predefine it on the head, any posts you send will end up having same descriptions...

저처럼 빼두면 포스트의 첫 <p> </p>을 불러 갑니다...
If you leave it out, it will grab the first <p> </p>....

보통 티스토리를 처음 시작하면 글쓰기 창에서 엔터를 누르면 '<br> 줄 바꿈'이므로 <p>가 전혀 없는 포스트가 생성됩니다...
when you first start tistory & write a post... when you press enter, it creates <br>, resulting in a post wihout any <p>...

그러면 페북에서 설명을 불러갈 때 첫 사진처럼 애매한 것을 가져갈 확율이 높습니다...
Thus, when facebook tries to grab the first paragraph as description, it probably will grab something else like the first picture...

글쓰기 엔터 시 항상 <p>가 추가되어 페북에서 첫 문단을 설명으로 사용하게 하려면 티스토리 관리자 > 환경 설정 > 기타 설정으로 들어가 아래처럼 '<p>문단 바꿈'으로 바꿔주면 된다... 이전 포스트는 다시 작성하면 된다 ㅠㅠ
To have <p> on your post, goto your other settings and change accordingly... Older posts, you gotta edit them... T,T

아니면 아까 말한듯 임의로 설명을 정해줄 수 도 있는데... 페북에는 매번 같은 설명만 뜨기에 비추천한다...
Or, as mentioned above, you can pre-define it... but i dont recommend it because you will have same descriptions over and over again...

완성품
Finished Product

이것은 모든 것이 제대로 설정 되었을 때 보내기 화면이다...설명은 첫 문단... 그림은 내가 지정한것... 글 제목 및 링크도 다 제대로 나온다...
This is the final product with the proper settings... description is the first paragraph, picture that i've uploaded... and correct link and title...

모두 잘 설정하시기를~!
Hope you get what i get~!!!




댓글 건 | 트랙백 건