MACE's life blog

Facebook share 본문

비즈니스&IT

Facebook share

mace-lifelog 2012. 3. 28. 16:35
반응형

[원문보기 : http://developers.facebook.com/docs/share/ ]

** 페이스북에서 정책이 변경될 수 있으므로, 주요 프로젝트 진행할 때는 원문에서 변동사항있는지 확인 바람.

[Meta tag 정리]

<meta property="og:locale:alternate" content="ko_KR" />

<meta property="og:type" content="website">

<meta property="og:title" content="콘텐츠의 제목"/>

<meta property="og:image" content="이미지, 썸네일 경로"/>

<meta property="og:description" content="컨텐츠설명"/>

<meta property="og:url" content="표출될 url"/>

<meta property="og:site_name" content="사이트명"/>


Facebook Share

The Share button has been deprecated in favor of the Like button, and will no longer be supported.

Please use the Like button whenever possible to drive maximum traffic to your apps.

Implementing Facebook Share

You can render the Facebook Share button in an anchor (<a>) tag that takes the following attributes:

  • name: You must specify fb_share for this attribute.
  • type: The type of Share button or link to render, with or without a count included. Specify one of box_count, button_count, button, icon_link, or icon. The box_count and button_count options displays a count of the total number of times the page was shared on Facebook, how many comments were added to the story shared on Facebook, and how many times friends Liked the shared story. If you don't specify a type, then this attribute defaults to button_count.
  • share_url: The URL for the page you want to share. If you don't specify a share_url, then this attribute defaults to the current page.

To put a Facebook Share button on your site, copy and paste the following code into the page you want to share:

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Because you didn't specify the type and share_url attributes, the button defaults to the button_count type and shares the URL of the page where you placed it.

You need to include the script tag only once, no matter how many Share buttons you put on the same page. Place it after the first anchor tag on the page. If you can't place it there, you should put it high up on the page to ensure fast loading (in the page head works well).

Note: You cannot share pages on the facebook.com domain.

WordPress Plugin

You can integrate Facebook Share using this WordPress plug-in.

Styling Your Share Button

If you want, you can choose from a variety of styles for your Share button.

Using this code...Renders this button...Of this size…
<a name="fb_share" type="button" share_url="YOUR_URL">56x18 pixels
<a name="fb_share" type="icon_link" share_url="YOUR_URL">51x15 pixels
<a name="fb_share" type="icon" share_url="YOUR_URL">18x15 pixels

Translating Your Share Button

If your site is written in another language, you can easily customize the Share button so it appears that language. To do this, simply wrap the text you want to appear within the anchor tags. For example, if your site is written in Spanish, you could specify your Share button like this:

<a name="fb_share" type="icon_link" 
   share_url="YOUR_URL">Compartir en Facebook</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Sharing Rich Media

You can share rich media like images, audio, and video from your page. To do this, you need to include meta tags in the <head> element in your HTML code.

Configuring Meta Tags for Facebook Share

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user's profile and when a user tries to share it. You do this with <meta> tags.

Facebook Share passes along the URL of your page to our servers, which in turn looks up certain HTML tags within it. Those tags are used to display a preview of the page. In order to provide this preview, we always look for the title of the page, a summary of the main content and an image. If there's media content on the page, those media files are also important to identify.

Basic Tags

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don't tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

So an example news story could have the following:

<meta property="og:title" content="Smith hails 'unique' Wable legacy" /> 
<meta property="og:description" content="John Smith claims beautiful football 
            is the main legacy of Akhil Wable's decade at the club. " /> 
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.

Specifying a "medium" Type

You may also specify the type of content being shared by using the following tag:

<meta name="medium" content="medium_type" />

Valid values for medium_type are audio, image, video, news, blog, and mult.

Specifying Multimedia Tags

By default, Facebook Share assumes that the page being shared is a full page, and a link or URL will be shared in the user's Feed.

If you specifically want to share audio or Flash content that renders and plays inline on Facebook, you need to specifically tag your page to identify the Flash content.

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to a Web page that contains the <meta> tags described above (title, description, image) along with some additional <meta> tags:

Audio (required)

<meta property="og:title" content="page title" /> 
<meta property="og:description" content="audio description" /> 
<meta property="og:image" content="audio image url (eg. album art)" /> 
<meta property="og:audio" content="audio url (.mp3 only)" />

Audio (optional)

<meta property="og:audio:type" content="Content-Type header field" />
<meta property="og:audio:title" content="audio title (eg. song name)" /> 
<meta property="og:audio:artist" content="audio artist name" /> 
<meta property="og:audio:album" content="audio album name" />

Flash (required)

In order to embed Flash content with Facebook Share, you must add a few additional meta tags along with title and description from above:

<meta property="og:title" content="video title" /> 
<meta property="og:description" content="video description" /> 
<meta property="og:image" content="video screenshot image url" /> 
<meta property="og:video" content="video url (.swf only)"/>

Flash (optional)

<meta property="og:video:height" content="video height" /> 
<meta property="og:video:width" content="video width" /> 
<meta property="og:video:type" content="application/x-shockwave-flash" />

Notes

  • Facebook supports embedding video in SWF format only.

Video Example

Here is an example of embedded Flash video:

<embed src="http://www.example.com/player.swf" flashvars="video_id=123456789"
       width="300" height="200" type="application/x-shockwave-flash" />

For that video, the appropriate metadata would look like this:

<meta property="og:video" content="http://www.example.com/player.swf?video_id=123456789"/> 
<meta name="og:video:height" content="200" /> 
<meta name="og:video:width" content="300" />
<meta name="og:video:type" content="application/x-shockwave-flash" />

Using Facebook Share on a Facebook-enabled Website

If you have already implemented the Facebook JS SDK on your website, we recommend you migrate to the XFBML version of the Like button.

Alternatively, you add your own link, which when clicked, invokes stream.publish or stream.share from the FB.ui()method of the Facebook JS SDK.

We no longer support the XFBML version of the Share button.

Creating Your Own Share URL

However you implement Facebook Share, it always uses the following URL format to display the preview to the user.

http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>

Feel free to create your own implementation based on this. Make sure you URL encode the u and t parameters -- use the JavaScript function "encodeURIComponent(). For example:

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sadtrombone.com%2F&t=Sad%20Trombone

반응형
저작자표시 비영리 동일조건

'비즈니스&IT' 카테고리의 다른 글

2011 소비자 행태조사 보고서(요약)  (0) 2012.03.28
웹표준의 장점(혜택)  (0) 2012.03.28
주요 Mobile Device의 ai파일  (0) 2012.03.23
온라인 파일 변환 컨버터(Convert) Site  (0) 2012.03.22
[health] EMR, EPR, CPR  (0) 2012.03.02
공유하기 링크
'비즈니스&IT' Related Articles more
Comments