{"id":790,"date":"2012-03-16T13:53:19","date_gmt":"2012-03-16T13:53:19","guid":{"rendered":"http:\/\/dpscomputing.com\/wordpress\/?p=790"},"modified":"2012-03-22T11:20:22","modified_gmt":"2012-03-22T11:20:22","slug":"facebook-development-for-websites-like-buttons","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2012\/03\/16\/facebook-development-for-websites-like-buttons\/","title":{"rendered":"Facebook Development for Websites – Like Buttons"},"content":{"rendered":"

\"\"<\/a>This article assumes that you have followed and completed our Getting Started<\/a> tutorial successfully.<\/p>\n

So, whats next? \u00a0Well there’s no point loading the JavaScript SDK and not using it! \u00a0So in this article we are going to go through one of the more simpler Facebook Development tasks – adding a like button to our website.<\/p>\n

‘Like’ buttons are extremely popular and having one on your site is instantly recognisable, useful and not too taxing coding wise.<\/p>\n

To make our task easier there is also a nice little ‘Like’ button generator<\/a> on the Facebook Developer site – great!<\/p>\n

So, firstly, you need to open the Facebook Like generator page linked above.<\/p>\n

Now, we need to customise our like button so that people can ‘Like’ our website.<\/p>\n

The first piece of information required by the generator is easy. \u00a0It’s the domain that we want people to ‘Like’, which is also the domain that we are hosting our webpage on. \u00a0If you are using a local development server then this needs to be “http:\/\/localhost”. \u00a0For a website which is hosted online it needs to be your website domain (for example, http:\/\/www.yourdomain.com).<\/p>\n

The rest of the information that we need to add to configure our ‘Like’ button is all down to personal preference. \u00a0The ‘Like’ button will now work for your website no matter what we add now (assuming that you have entered the correct domain above of course!).<\/p>\n

We’ll now go through these extra options:<\/p>\n

Send Button – Well for this one, do we want people who use our website to be able to suggest that one of their Facebook friends also ‘Like’ your website. \u00a0Tick if you would like there to be a send button next to your like button or untick if you don’t want the send button to appear. \u00a0For the purposes of being ‘social’ I would suggest that you do have the send button option ticked (which is the default setting).<\/p>\n

Layout Style – This can either be ‘standard’, ‘button count’ or ‘box count’. \u00a0Standard is the way that you will have probably seen on many websites. \u00a0It’s longer than the other two styles but it doesn’t display a count of how many people currently ‘Like’ your website. \u00a0In the early stages of your website development (or if on Facebook your website isn’t very popular at the moment) it may be advantageous to choose ‘standard’ so as not to give your visitors the impression that your site is not popular!! \u00a0However, as I have said previously, this is down to personal preference! \u00a0The ‘button count’ and ‘box count’ styles are basically the same style apart from button count is landscape and box count is portrait (and in a box). \u00a0These styles consist of the ‘Like’ button but also a count of how many people currently ‘Like’ your website.<\/p>\n

Width – this is quite simply, the width of your ‘Like’ button. \u00a0You can customise this so that it fits neatly into your website. \u00a0The value you choose here will depend on the design of your website. \u00a0The width value is measured in pixels (even though this not obviously indicated on the generator!).<\/p>\n

Show Faces – this is either ticked or unticked. \u00a0If you have ticked this option it will show the faces (small profile pictures) of a random selection of people that have liked your website. \u00a0If this is unticked, the faces will not be shown.<\/p>\n

Verb to display – this is whether you want you ‘Like’ button to say ‘Like’ or ‘Recommend’. \u00a0Seen as though this like button is going to be for our website in general I would recommend choosing ‘Like’. \u00a0If you subsequently make a like button for, for example, a product, then you may wish to choose ‘Recommend’. \u00a0This doesn’t change the functionality of the ‘Like’ button in any way.<\/p>\n

Colour Scheme – this can be either ‘light’ or ‘dark’. \u00a0These options basically translate to ‘white background’ and ‘black background’ respectively. \u00a0Your choice will obviously depend on the colour scheme of your site, but in most cases the ‘light’ (white background) will be the most suitable.<\/p>\n

Font – there are a number of different font styles that you can choose from so that the font style of your like button fits in with your websites design.<\/p>\n

Having completed all the fields we are now ready to retrieve the code using the ‘Get Code’ button. \u00a0Click it now.<\/p>\n

When the dialog pops up you need to select the app that you have created for your website (this will already be selected if you only have one app). \u00a0You need to change the drop down box after “This script uses the app ID of your app:” to the required value.<\/p>\n

As we have already initialised our page to use the Facebook JavaScript SDK we can ignore the first dialog box of code.<\/p>\n

The code for the like button is in the 2nd box (“2:”) and this needs to be added to the section of your HTML code where you would like (;)) your ‘Like’ button to appear.<\/p>\n

The code for our example (using yourdomain.com) is shown below:<\/p>\n

<div data-href=”http:\/\/www.domain.com” data-send=”true” data-layout=”box_count” data-width=”450″ data-show-faces=”true” data-font=”arial”><\/div><\/span><\/p>\n

And, hey presto, you now have a ‘Like’ button on your website :).<\/p>\n","protected":false},"excerpt":{"rendered":"

This article assumes that you have followed and completed our Getting Started tutorial successfully. So, whats next? \u00a0Well there’s no point loading the JavaScript SDK and not using it! \u00a0So in this article we...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[55,231],"tags":[209,219,230,215,224,223,226,225,229],"class_list":["post-790","post","type-post","status-publish","format-standard","hentry","category-articles","category-facebook-developer-series-articles","tag-facebook-developer","tag-facebook-developer-article","tag-facebook-developer-article-series","tag-facebook-development","tag-fb","tag-fb-development","tag-social-media","tag-social-networks","tag-social-website"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-cK","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":4,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/790\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}