{"id":393,"date":"2014-09-21T14:44:14","date_gmt":"2014-09-21T14:44:14","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=393"},"modified":"2021-02-19T07:40:26","modified_gmt":"2021-02-19T07:40:26","slug":"add-facebook-like-box-change-language-local","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/add-facebook-like-box-change-language-local\/","title":{"rendered":"How to add Facebook Like Box and change language to local"},"content":{"rendered":"<p>Facebook Like Box\u00a0allows website owners to provide their visitors with an easy way to join their facebook community and get updates right in their Facebook news feed with a click to like from\u00a0their website. It\u00a0is\u00a0a good\u00a0way\u00a0to promote a \u00a0Facebook Page. Facebook Like Box only works for Facebook Pages, this isn&#8217;t working for Facebook Profiles<!--more--><\/p>\n<p><strong>Adding Facebook Like manually without a plugin<\/strong><\/p>\n<p>Login to your Facebook account. Go to <a title=\"Like Box - Facebook Social Plugins\" href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/like-box\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook Social Plugin\u2019s Like Box<\/a> page. Provide the URL of your Facebook page and configure the looks of the like box.<\/p>\n<p>There three methods to add Facebook Like Box after we click Get Code button, <strong>HTML5, IFRAME\u00a0and XFBML<\/strong>.<\/p>\n<p><strong>HTML5<\/strong><\/p>\n<p>As instruction say there,\u00a0copy the first part of the code (JavaScriptSDK) and paste it right after <code>&lt;body&gt;<\/code> tag which is usually found in header.php file, e.g<\/p>\n<pre><pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">&amp;amp;lt;\/pre&amp;amp;gt;\n&amp;amp;lt;div id=&quot;fb-root&quot;&amp;amp;gt;&amp;amp;lt;\/div&amp;amp;gt;\n&amp;amp;lt;pre&amp;amp;gt;&amp;amp;lt;script&amp;amp;gt;\/\/ &amp;amp;lt;!&#x5B;CDATA&#x5B;\n(function(d, s, id) {\nvar js, &amp;amp;lt;span class=&quot;hiddenSpellError&quot; pre=&quot;&quot; data-mce-bogus=&quot;1&quot;&amp;amp;gt;fjs&amp;amp;lt;\/span&amp;amp;gt; = d.getElementsByTagName(s)&#x5B;0];\nif (d.getElementById(id)) return;\njs = d.createElement(s); js.id = id;\njs.src = &quot;\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&amp;amp;amp;appId=370859723023930&amp;amp;amp;version=v2.0&quot;;\nfjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));\n\/\/ ]]&amp;amp;gt;&amp;amp;lt;\/script&amp;amp;gt;<\/pre>\n<p>After that we could copy second part of code underneath first part of code<\/p>\n<pre><pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">&amp;amp;lt;div class=&quot;fb-like-box&quot; data-href=&quot;https:\/\/www.facebook.com\/PixelInsert&quot; data-colorscheme=&quot;light&quot; data-show-faces=&quot;true&quot; data-header=&quot;true&quot; data-stream=&quot;false&quot; data-show-border=&quot;true&quot;&amp;amp;gt;&amp;amp;lt;\/div&amp;amp;gt;<\/pre>\n<p>This part of the code tells JavaScript SDK that we loaded earlier to display the like box at this location with these parameters.<\/p>\n<p>We are using Text Widget to add Facebook Like Box to sidebar of our site.\u00a0 Go to <strong>Appearance \u00bb Widgets<\/strong>. Drag and drop a text widget to your sidebar and paste all\u00a0inside it. Save\u00a0the text\u00a0widget<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"411\" data-permalink=\"https:\/\/pixert.com\/blog\/add-facebook-like-box-change-language-local\/facebooklikebox\/\" data-orig-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?fit=447%2C547&amp;ssl=1\" data-orig-size=\"447,547\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Facebook Like Box\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?fit=245%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?fit=447%2C547&amp;ssl=1\" class=\"aligncenter size-full wp-image-411\" src=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?resize=447%2C547\" alt=\"Facebook Like Box\" width=\"447\" height=\"547\" srcset=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?w=447&amp;ssl=1 447w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?resize=245%2C300&amp;ssl=1 245w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/a><\/p>\n<p><strong>IFRAME<\/strong><\/p>\n<p>Iframe is the easiest way to add Facebook Like Box.\u00a0Drag and drop a text widget to your sidebar, copy iframe code from <a title=\"Like Box - Facebook Social Plugins\" href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/like-box\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook Social Plugin\u2019s Like Box<\/a>\u00a0and\u00a0\u00a0paste iframe code\u00a0inside\u00a0it. Save\u00a0the text\u00a0widget. That&#8217;s it<\/p>\n<p><strong>XFBML<\/strong><\/p>\n<p>Steps to add XFBML almost same with HTML5 method, except for XML Namespace.<\/p>\n<pre><pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">\nxmlns:fb=&quot;http:\/\/ogp.me\/ns\/fb#&quot;&amp;amp;gt;\n<\/pre>\n<p>Add XML Namespace \u00a0to the &lt;html&gt; tag of your \u00a0header.php, before &lt;body&gt;<\/p>\n<p>After that, copy first code and third code (JavaScript SDK and fb:like-box) from\u00a0<a title=\"Like Box - Facebook Social Plugins\" href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/like-box\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook Social Plugin\u2019s Like Box<\/a>\u00a0and\u00a0\u00a0paste the code\u00a0inside text widget<\/p>\n<p><strong>Change Facebook Like Box language (localization)<\/strong><\/p>\n<p>HTML5 and XFBML<\/p>\n<p>Find following code in JavaScript SDK<\/p>\n<pre><pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">js.src = &quot;\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&amp;amp;amp;appId=370859723023930&amp;amp;amp;version=v2.0&quot;;<\/pre>\n<p>See en_US in above code, change it to local language<\/p>\n<p>IFRAME<\/p>\n<p>We need to add locale operator to iframe code, e.g<\/p>\n<pre><pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">&amp;amp;lt;iframe src=&quot;\/\/www.facebook.com\/plugins\/likebox.php?locale=fr_FR&amp;amp;amp;href=https%3A%2F%2Fwww.facebook.com%2FPixelInsert&amp;amp;amp;width&amp;amp;amp;height=290&amp;amp;amp;colorscheme=light&amp;amp;amp;show_faces=true&amp;amp;amp;header=true&amp;amp;amp;stream=false&amp;amp;amp;show_border=true&amp;amp;amp;appId=203533006486565&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; height:290px;&quot; allowTransparency=&quot;true&quot;&amp;amp;gt;<\/pre>\n<p>See this part of code above<\/p>\n<p><strong>locale=fr_FR<\/strong><\/p>\n<p><a title=\"List of Local Languages for Facebook\" href=\"https:\/\/www.facebook.com\/translations\/FacebookLocales.xml\"><strong>List of Local Languages for Facebook<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facebook Like Box\u00a0allows website owners to provide their visitors with an easy way to join their facebook community and get updates right in their Facebook news feed with a click to like from\u00a0their website. It\u00a0is\u00a0a good\u00a0way\u00a0to promote a \u00a0Facebook Page. Facebook Like Box only works for Facebook Pages, this isn&#8217;t working for Facebook Profiles<\/p>\n","protected":false},"author":1,"featured_media":411,"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":""},"categories":[5],"tags":[19,140,88,141,142,6],"class_list":["post-393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-facebook","tag-facebook-like-box","tag-html5","tag-iframe","tag-localization","tag-wordpress-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/09\/facebooklikebox.jpg?fit=447%2C547&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-6l","jetpack-related-posts":[{"id":42,"url":"https:\/\/pixert.com\/blog\/add-facebook-like-to-wordpress\/","url_meta":{"origin":393,"position":0},"title":"Add Facebook Like to WordPress","author":"Pixel Insert \/ Pixert","date":"March 10, 2011","format":false,"excerpt":"Facebook released Social Plugin in their recent F8 conference. It lets you see what friends have liked, commented on or shared on sites across the web. The Facebook button enables users to post pages from that site back to your Facebook profile with one click I added Facebook button manually\u2026","rel":"","context":"In &quot;WordPress&quot;","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/do-you-have-facebook.jpg?fit=500%2C373&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":105,"url":"https:\/\/pixert.com\/blog\/facebook-share-button\/","url_meta":{"origin":393,"position":1},"title":"Facebook Share Button","author":"Pixel Insert \/ Pixert","date":"May 14, 2011","format":false,"excerpt":"Facebook Share is one of the most powerful and simple ways for users to share articles, pages, video, or Flash content from your site with their friends on Facebook. Over 1 billion pieces of content are shared each week on Facebook, and many of those are links shared using Facebook\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/05\/fbshare.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":186,"url":"https:\/\/pixert.com\/blog\/block-distracting-websites-with-cold-turkey\/","url_meta":{"origin":393,"position":2},"title":"Block Distracting Websites with Cold Turkey","author":"Pixel Insert \/ Pixert","date":"January 8, 2012","format":false,"excerpt":"Whenever you are working on PC, everything else suddenly starts seeming a lot more interesting than the actual work. Facebook and numerous other \u00a0 websites provide you with a constant source of distraction. An app called Cold Turkey presents a solution for this problem. Cold Turkey is a free\/open- source\u2026","rel":"","context":"In &quot;Windows&quot;","block_context":{"text":"Windows","link":"https:\/\/pixert.com\/blog\/category\/windows\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/01\/coldturkey1.jpg?fit=450%2C638&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":177,"url":"https:\/\/pixert.com\/blog\/how-to-find-facebook-page-profile-id\/","url_meta":{"origin":393,"position":3},"title":"How to Find Facebook Page\/Profile IDs","author":"Pixel Insert \/ Pixert","date":"December 14, 2011","format":false,"excerpt":"Many\u00a0Facebook\u00a0Applications need Facebook Page ID and Profile ID or Admin ID.\u00a0\u00a0If you are using a custom username for your Facebook profile or page,e.g facebook.com\/PixelInsert then unique ID will not appear. Facebook social plugins require this unique ID 1. Facebook Graph API Facebook Graph API help detecting Facebook Page\/Profile\/Admin ID from\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/fbpageid.gif?fit=1200%2C269&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/fbpageid.gif?fit=1200%2C269&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/fbpageid.gif?fit=1200%2C269&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/fbpageid.gif?fit=1200%2C269&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/fbpageid.gif?fit=1200%2C269&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":207,"url":"https:\/\/pixert.com\/blog\/remove-border-from-iframe\/","url_meta":{"origin":393,"position":4},"title":"Remove border from iframe","author":"Pixel Insert \/ Pixert","date":"February 28, 2012","format":false,"excerpt":"Add the frameBorder attribute. It's case-sensitive [php]<iframe src=\"iframe.php\" width=\"300\" height=\"300\" frameBorder=\"0\" scrolling=\"no\">Browser not compatible<\/iframe>[\/php]","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":206,"url":"https:\/\/pixert.com\/blog\/how-to-make-ie-to-display-iframes-with-transparent-background\/","url_meta":{"origin":393,"position":5},"title":"How to make IE to display iframes with transparent background?","author":"Pixel Insert \/ Pixert","date":"February 28, 2012","format":false,"excerpt":"1. Add allowTransparency=\"true\" property to the iframe [php]<iframe id=\"frame_one\" src=\"iframe.php\" allowTransparency=\"true\">Browser not compatible<\/iframe>[\/php] 2. Add background:transparent to it's body tag or internal styles in the head section of an HTML page [php]<body style=\"background:transparent\"><\/body>[\/php] or [php] <style type=\"text\/css\"> html,body { background: transparent; } <\/style> [\/php]","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media\/411"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}