Ѽ҅҅҅҅ДzНдскегѕ҅҅҅҅Ѽ: 2012

Jumat, 13 Juli 2012

Car Buat Subscribe Button

Subscribe Button

The Subscribe button lets a user subscribe to your public updates on Facebook.

There are two Subscribe button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, and requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display.

To get started, just use the configurator below to get code to add to your site.

Get Your Subscribe Button Code

Profile URL (?)

Layout Style (?)

standard

Show Faces (?)

Show faces

Color Scheme (?)

light

Font (?)

Width (?)

Get Code

Attributes

href - profile URL of the user to subscribe to. This must be a facebook.com profile URL.
layout - there are three options.
- standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
- button_count - displays the total number of subscribers to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
- box_count - displays the total number of subscribers above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces - specifies whether to display profile photos below the button (standard layout only)
colorscheme - the color scheme for the plugin. Options: 'light' (default) and 'dark'
font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
width - the width of the plugin.

Step 1 - Get Like Button Code

URL to Like (?)

Send Button (XFBML Only) (?)

Send Button

Layout Style (?)

standard

Width (?)

Show Faces (?)

Show faces

Verb to display (?)

Color Scheme (?)

light

Font (?)

Get Code

Attributes

href - the URL to like. The XFBML version defaults to the current page.
send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
layout - there are three options.
- standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
- button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
- box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces - specifies whether to display profile photos below the button (standard layout only)
width - the width of the Like button.
action - the verb to display on the button. Options: 'like', 'recommend'
font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
colorscheme - the color scheme for the like button. Options: 'light', 'dark'
ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
- fb_ref - the ref parameter
- fb_source - the stream type ('home', 'profile', 'search', 'ticker', 'tickerdialog' or 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

Step 2 - Get Open Graph Tags

Title (?)

Type (?)

URL (?)

Image (?)

Site name (?)

Admin (?)

Get Tags

Open Graph Tags

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

<meta property="og:tag name" content="tag value"/>

If you use Open Graph tags, the following six are required:

og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation .

FAQ

How do I know when a user clicks a Like button?

If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.

When will users have the option to add a comment to the like?

If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.

What analytics are available about the Like button?

If you visit facebook.com/insights and register your domain, you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.

Can I link the Like button to my Facebook page?

Yes. Simply specify the URL of your Facebook page in the href parameter of the button.

What is the best way to know which Like button on my page generated the traffic?

Add the 'ref' parameter to the plugin (see "Attributes" above).

Examples:

<fb:like ref="top_left"></fb:like>

<iframe src="...&ref=top_left"></iframe>

When a user clicks a link back to your website, we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL. Example:

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline

Aggregated stream stories contain all ref parameters, concatenated with commas.

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site.

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

The user agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"

How do I display the Like button in different languages?

If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:

'//connect.facebook.net/en_US/all.js';

If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Example:

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."

You may need to adjust the width of the Like button to accommodate different languages.

What makes up the number shown on my Like button?

The number shown is the sum of:

The number of likes of this URL
The number of shares of this URL (this includes copy/pasting a link back to Facebook)
The number of likes and comments on stories on Facebook about this URL
The number of inbox messages containing this URL as an attachment.

What happened to the old Share button?

We deprecated the Share Button when we launched the Like button, because the Like button improves clickthrough rates by allowing users to connect with one click, and by allowing them to see which of their friends have already connected. For reference, the Share button documentation is still available here.

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

Attributes

href - the URL of the page. The plugin will display photos of users who have liked this page.
action - an action type. The plugin will display photos of users who have connected to your app via this action.
app_id - if you want the plugin to display users who have connected to your site, specify your application id as this parameter. This parameter is only available in the iframe version of the Facepile. If you are using the XFBML version of the plugin, specify your application id when you initialize the Javascript library.
max_rows - the maximum number of rows of faces to display. The XFBML version will dynamically size its height; if you specify a maximum of four rows of faces, but there are only enough friends to fill two rows, the XFBML version of the plugin will set its height for two rows of faces. Default: 1.
width - width of the plugin in pixels. Default width: 300px.
size - size of the photos and social context. Default size: medium.
colorscheme - the color scheme for the like button. Options: 'light', 'dark'.

Why is nothing displaying?

The plugin only displays friends photos. If the user does not have friends who have liked your page or have connected to your site, no faces will be shown.

If you are displaying users who have liked your page, and no users have liked it yet, the plugin will render nothing. If some users have liked your page, but none of the viewing users friends have liked it, the plugin will display the total number of users who have liked your page.

If you are displaying users who have connected to your site, and none of the users friends have connected yet, the plugin will render nothing.

How to show users who have connected to your site

You need to specify your application id. If you are using the iframe version simply include it as another query parameter. Example:

<iframe src="http://www.facebook.com/plugins/facepile.php? 
app_id={YOUR_APP_ID}" scrolling="no" frameborder="0" style="border:none;  
overflow:hidden; width:200px;" allowTransparency="true"></iframe>

If you are using the XFBML version specify your application id when you initialize the Javascript library. Example:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js
#appId={YOUR_APP_ID}&amp;xfbml=1"></script><fb:facepile></fb:facepile>

Attributes

href - the URL for this Comments plugin. News feed stories on Facebook will link to this URL.
width - the width of the plugin in pixels. Minimum recommended width: 400px.
colorscheme - the color scheme for the plugin. Options: 'light', 'dark'
num_posts - the number of comments to show by default. Default: 10. Minimum: 1
mobile - whether to show the mobile-optimized version. Default: auto-detect.

Moderation tools

Admins can choose to make the default for new comments entered either “visible to everyone” or “has limited visibility” on the site (i.e., the comment is only visible to the commenter and their friends), to help mitigate irrelevant content.

Admins can also blacklist words and ban users. If a new comment is published from a banned user or contains a blacklisted word, this comment will automatically have limited visibility.

To moderate, you need to list yourself as an admin. To do this, simply include open graph meta tags on the URL specified as the href parameter of the plugin. These tags must be included in the <head> of the document. Include:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

To add multiple moderators, separate the uids by comma without spaces.

If your site has many comments boxes, we strongly recommend you specify a Facebook app id as the administrator (all administrators of the app will be able to moderate comments). Doing this enables a moderator interface on Facebook where comments from all plugins administered by your app id can be easily moderated together. This tag should be specified in the <head>.

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

You can moderate comments from just this plugin inline. If you have specified your app id as the admin, you can moderate all your plugins at http://developers.facebook.com/tools/comments.

When you implement multiple comments boxes on your site and tie them together using an app_id, the moderation settings you choose will apply to all your comments boxes. For example, changing the moderation setting to 'has limited visibility' will affect all comments boxes under the same app_id. If you need to apply different moderation paradigms in different areas of your site, you should use two or more app_ids. You may then apply different moderation settings each group of comments boxes.

FAQ

How do I access the number of comments left of my page?

The fb:comments-count tag will emit the number of comments on your URL in a <span> tag. You can then style this however appropriate to match your site. Note this is currently not available in HTML5. For example, to show the number of comments on example.com:.

<fb:comments-count href=http://example.com/></fb:comments-count> awesome comments

Will emit:

awesome comments

You can also load an iframe from Facebook which will display the number of comments with a link to your URL.
For example, this shows the number of comments for example.com.

<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe>

The number of comments left on a particular URL can be accessed via the Graph API. For example, the number of comments on example.com is the 'comments' field of: https://graph.facebook.com/?ids=http://example.com/.

You can also use the comment FQL table.

How do I know when someone comments on my site?

You can subscribe to the 'comment.create' and 'comment.remove' events through FB.Event.subscribe.

What does the grammar filter do?

Adds punctuation (e.g. periods at the end of sentences)
Trims extra whitespace
Expands slang words (e.g. plz becomes please)
Adds a space after punctuation (e.g. Hi,Cat would become Hi, Cat)
Fix common grammar mistakes (e.g. convert ‘dont' to ‘don’t’)

You can enable the grammar filter from the settings section of the plugin.

How do I access the comments left on my site?

The comments for every URL can be accessed via the graph API. Simply go to: https://graph.facebook.com/comments/?ids={YOUR_URL}.

For example, the comments on this URL can be accessed via: https://graph.facebook.com/comments/?ids=http://developers.facebook.com/docs/reference/plugins/comments.

Sample code for pulling comments can be found on this blog post.

How can I get an SEO boost from the comments left on my site?

The Facebook comments box is rendered in an iframe on your page, and most search engines will not crawl content within an iframe. However, you can access all the comments left on your site via the graph API as described above. Simply grab the comments from the API and render them in the body of your page behind the comments box. We recommend you cache the results, as pulling the comments from the graph API on each page load could slow down the rendering time of the page.

How do I enable users to comment using other login providers?

On the settings section of the plugin, you can choose to enable third party login on your comments boxes. Currently this will enable users to comment using a Yahoo!, AOL or Hotmail account.

How does the blacklisting words work?

You can enter blacklisted terms from the settings section of the comments box. The content of new comments is checked against the blacklist of terms to see if this comment should have limited visibility. The comment is checked via substring matching. This means if you blacklist the word 'at', if the comment contains the sequence 'a' 't' anywhere it will be marked with limited visibility; e.g. if the comment contained the words 'bat', 'hat', 'attend', etc it would be caught.

I have the first version of the Facebook Comments box, how do I upgrade?

If you are using the original version of the Facebook Comments box, just add 'migrated=1' to the <fb:comments> tag, and the comments box will automatically switch to the new version. In this case, you should not specify the href parameter, and you must keep the XID parameter the same. Once you migrate, you can access the comments as described above. Note that the moderation tools only work with the newer version of the comments plugin (with href specified instead of migrated=1).