Slide show

Facebook Like Button for the Web

A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a 


Step-by-Step

1. Choose URL or Page

Pick the URL of a website or Facebook Page you want to use with the like button.

2. Code Configurator

Paste the URL to the code configurator and adjust settings like the width of your like button. Click the Get Code button to generate your like button code.

3. Copy & Paste HTML snippet

Copy and past the snippet into the HTML of the destination website.

Like Button Configurator


Full Code Example

Copy & paste the code example to your website. Adjust the value data-href to your website URL. Next use the og:*** meta tags to adjust your link preview. og:url and data-href should use the same URL.
<html>
<head>
 <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
 <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
 <meta property="og:type"          content="website" />
 <meta property="og:title"         content="Your Website Title" />
 <meta property="og:description"   content="Your description" />
 <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

 <!-- Load Facebook SDK for JavaScript -->
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

 <!-- Your like button code -->
 <div class="fb-like" 
  data-href="http://www.your-domain.com/your-page.html" 
  data-layout="standard" 
  data-action="like" 
  data-show-faces="true">
 </div>

</body>
</html>

Settings

In addition to the settings above, you can also change the following:
SettingHTML5 AttributeDescriptionDefault
actiondata-actionThe verb to display on the button. Can be either like orrecommendlike
colorschemedata-colorschemeThe color scheme used by the plugin for any text outside of the button itself. Can belight or dark.light
hrefdata-hrefThe absolute URL of the page that will be liked.Current URL.
kid_directed_sitedata-kid-directed-siteIf your web site or online service, or a portion of your service, is directed to children under 13 you must enable thisfalse
layoutdata-layoutSelects one of the different layouts that are available for the plugin. Can be one ofstandard,button_count, buttonor box_count. See theFAQ for more details.standard
refdata-refA label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQfor more details.None
sharedata-shareSpecifies whether to include a share buttonbeside the Like button. This only works with the XFBML version.false
show_facesdata-show-facesSpecifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites.false
sizedata-sizeThe button is offered in 2 sizes i.e. large andsmall.small
widthdata-widthThe width of the plugin (standard layout only), which is subject to the minimum and default width. Please see Layout Settings belowfor more details.See standard inLayout Settings

Layout Settings

There are the following options:
LayoutDefault Sizes
standardMinimum width: 225 pixels.
Default width: 450 pixels.
Height: 35 pixels (without photos) or 80 pixels (with photos).
box_countMinimum width: 55 pixels.
Default width: 55 pixels.
Height: 65 pixels.
button_countMinimum width: 90 pixels.
Default width: 90 pixels.
Height: 20 pixels.
buttonMinimum width: 47 pixels.
Default width: 47 pixels.
Height: 20 pixels.

Adjust Language

You can adjust the language of the Like Button by loading a localized version of the Facebook JavaScript SDK. When you load the SDK adjust the value js.src to use your locale: Just replaced en_US by your locale, e.g. fr_FR for French (France):
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.7";
Supported locales are referenced in the Facebook Locales XML file. You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our Localization & Translation page.

Resource https://developers.facebook.com/docs/plugins/like-button


NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE


No comments:

Post a Comment