{"id":119954,"date":"2014-09-12T11:10:45","date_gmt":"2014-09-12T09:10:45","guid":{"rendered":"http:\/\/designmodo.com\/?p=119954"},"modified":"2025-11-11T10:13:11","modified_gmt":"2025-11-11T10:13:11","slug":"wordpress-facebook-like-box","status":"publish","type":"post","link":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/","title":{"rendered":"Building a Facebook Like Box WordPress Widget"},"content":{"rendered":"<p>WordPress arguably has become the de facto content management system (CMS) in the world powering over 20 percent of websites globally. One of the platform&#8217;s most loved feature is <strong>widgets<\/strong> that seamlessly add content and features to sidebars.<\/p>\n<p>Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of WordPress themes to users, which is available on properly &#8220;widgetized&#8221; themes to include the header, footer, and elsewhere in the design and structure.<\/p>\n<p>Widgets require no code experience or expertise. They can be added, removed and rearranged in the WordPress Administration <strong>Appearance &gt; Widgets<\/strong> panel.<\/p>\n<p>What about a Facebook Like Box?<\/p>\n<p>In this tutorial, we will code a WordPress widget plugin that displays a <em>Like Box<\/em>.<\/p>\n<h2>Facebook Like Box Widget Development<\/h2>\n<p>Since the widget is going to be a plugin and not bundled with a theme, the plugin header (information about the plugin for use by WordPress internal) would be the first thing to go into the plugin PHP file.<\/p>\n<p>Below is our Widget plugin header:<\/p>\n<p>[php]<br \/>\n&lt;?php<\/p>\n<p>\/*<br \/>\n  Plugin Name: Designmodo Facebook Like Box<br \/>\n  Plugin URI: https:\/\/designmodo.com<br \/>\n  Description: Facebook Like Box Widget that just work<br \/>\n  Version: 1.0<br \/>\n  Author: Agbonghama Collins<br \/>\n  Author URI: https:\/\/w3guy.com<br \/>\n *\/<br \/>\n[\/php]<\/p>\n<p>Creating widgets for WordPress is easy &#8212; extend the standard <code>WP_Widget<\/code> class, include the required methods and finally register the widget.<br \/>\nWe will go over the above widget development stages as we build our beloved <strong>Facebook Like Box<\/strong>.<\/p>\n<p>First, create a PHP class extending the <code>WP_Widget<\/code>.<\/p>\n<p>[php]<br \/>\nclass Designmodo_Facebook_Like_Box extends WP_Widget {<br \/>\n\/\/ &#8230;<br \/>\n}<br \/>\n[php]<\/p>\n<p>&amp;lt;strong&amp;gt;Note:&amp;lt;\/strong&amp;gt; all subsequent methods created in this tutorial will go into the above PHP class unless otherwise stated.<\/p>\n<p>Using the &amp;lt;code&amp;gt;__construct()&amp;lt;\/code&amp;gt; magic PHP method, we will give the widget a name and description.<\/p>\n<p>[php]<br \/>\nfunction __construct() {<br \/>\n\t\tparent::__construct(<br \/>\n\t\t\t&#8216;designmodo_flb&#8217;, \/\/ Base ID<br \/>\n\t\t\t__( &#8216;Designmodo Facebook Like Box&#8217;, &#8216;designmodo&#8217; ), \/\/ Name<br \/>\n\t\t\tarray( &#8216;description&#8217; =&gt; __( &#8216;Facebook Like Box Widget that just work&#8217;, &#8216;designmodo&#8217; ), ) \/\/ Args<br \/>\n\t\t);<br \/>\n\t}<br \/>\n[\/php]<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-119956\" src=\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2024\/06\/image-11.png\" alt=\"Widget in WordPress Dashboard\" width=\"422\" height=\"205\" \/><\/p>\n<p>Widget options will consist of two input fields that will contain the widget title and Facebook-page username and three check boxes for other configurable options.<\/p>\n<p>Below is a screenshot of what the widget option will look like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-119957\" src=\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2024\/06\/image-21.png\" alt=\"Facebook Widget Setup\" width=\"305\" height=\"342\" \/><\/p>\n<p>The codes in <code>form()<\/code> method or function below will create the widget option form.<\/p>\n<p>[php]public function form( $instance ) {<br \/>\n\t\tif ( isset( $instance[&#8216;title&#8217;] ) ) {<br \/>\n\t\t\t$title = $instance[&#8216;title&#8217;];<br \/>\n\t\t} else {<br \/>\n\t\t\t$title = __( &#8216;Facebook Like Box&#8217;, &#8216;text_domain&#8217; );<br \/>\n\t\t}<\/p>\n<p>\t\tif ( isset( $instance[&#8216;page_username&#8217;] ) ) {<br \/>\n\t\t\t$page_username = $instance[&#8216;page_username&#8217;];<br \/>\n\t\t}<\/p>\n<p>\t\tif ( isset( $instance[&#8216;show_friends_faces&#8217;] ) ) {<br \/>\n\t\t\t$show_friends_faces = $instance[&#8216;show_friends_faces&#8217;];<br \/>\n\t\t} else {<br \/>\n\t\t\t$show_friends_faces = &#8216;on&#8217;;<br \/>\n\t\t}<\/p>\n<p>\t\tif ( isset( $instance[&#8216;show_Header&#8217;] ) ) {<br \/>\n\t\t\t$show_Header = $instance[&#8216;show_Header&#8217;];<br \/>\n\t\t} else {<br \/>\n\t\t\t$show_Header = &#8216;on&#8217;;<br \/>\n\t\t}<\/p>\n<p>\t\tif ( isset( $instance[&#8216;show_border&#8217;] ) ) {<br \/>\n\t\t\t$show_border = $instance[&#8216;show_border&#8217;];<br \/>\n\t\t} else {<br \/>\n\t\t\t$show_border = &#8216;on&#8217;;<br \/>\n\t\t}<\/p>\n<p>\t\t?&gt;<br \/>\n\t\t&lt;p&gt;<br \/>\n\t\t\t&lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;title&#8217; ); ?&gt;&quot;&gt;&lt;?php _e( &#8216;Title:&#8217; ); ?&gt;&lt;\/label&gt;<br \/>\n\t\t\t&lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;title&#8217; ); ?&gt;&quot;<br \/>\n\t\t\t       name=&quot;&lt;?php echo $this-&gt;get_field_name( &#8216;title&#8217; ); ?&gt;&quot; type=&quot;text&quot;<br \/>\n\t\t\t       value=&quot;&lt;?php echo esc_attr( $title ); ?&gt;&quot;&gt;<br \/>\n\t\t&lt;\/p&gt;<\/p>\n<p>\t\t&lt;p&gt;<br \/>\n\t\t\t&lt;label<br \/>\n\t\t\t\tfor=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;page_username&#8217; ); ?&gt;&quot;&gt;&lt;?php _e( &#8216;Facebook-page username:&#8217; ); ?&gt;&lt;\/label&gt;<br \/>\n\t\t\t&lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;page_username&#8217; ); ?&gt;&quot;<br \/>\n\t\t\t       name=&quot;&lt;?php echo $this-&gt;get_field_name( &#8216;page_username&#8217; ); ?&gt;&quot; type=&quot;text&quot;<br \/>\n\t\t\t       value=&quot;&lt;?php echo esc_attr( $page_username ); ?&gt;&quot;&gt;<br \/>\n\t\t&lt;\/p&gt;<\/p>\n<p>\t\t&lt;p&gt;<br \/>\n\t\t\t&lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_friends_faces&#8217; ); ?&gt;&quot;<br \/>\n\t\t\t       name=&quot;&lt;?php echo $this-&gt;get_field_name( &#8216;show_friends_faces&#8217; ); ?&gt;&quot; type=&quot;checkbox&quot;<br \/>\n\t\t\t       value=&quot;on&quot; &lt;?php checked( $show_friends_faces, &#8216;on&#8217; ); ?&gt;&gt;<br \/>\n\t\t\t&lt;label<br \/>\n\t\t\t\tfor=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_friends_faces&#8217; ); ?&gt;&quot;&gt;&lt;?php _e( &#8216;Show Friends\\&#8217; Faces&#8217; ); ?&gt;&lt;\/label&gt;<br \/>\n\t\t&lt;\/p&gt;<\/p>\n<p>\t\t&lt;p&gt;<br \/>\n\t\t\t&lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_Header&#8217; ); ?&gt;&quot;<br \/>\n\t\t\t       name=&quot;&lt;?php echo $this-&gt;get_field_name( &#8216;show_Header&#8217; ); ?&gt;&quot; type=&quot;checkbox&quot;<br \/>\n\t\t\t       value=&quot;on&quot; &lt;?php checked( $show_Header, &#8216;on&#8217; ); ?&gt;&gt;<br \/>\n\t\t\t&lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_Header&#8217; ); ?&gt;&quot;&gt;&lt;?php _e( &#8216;Show Header&#8217; ); ?&gt;&lt;\/label&gt;<br \/>\n\t\t&lt;\/p&gt;<\/p>\n<p>\t\t&lt;p&gt;<br \/>\n\t\t\t&lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_border&#8217; ); ?&gt;&quot;<br \/>\n\t\t\t       name=&quot;&lt;?php echo $this-&gt;get_field_name( &#8216;show_border&#8217; ); ?&gt;&quot; type=&quot;checkbox&quot;<br \/>\n\t\t\t       value=&quot;on&quot; &lt;?php checked( $show_border, &#8216;on&#8217; ); ?&gt;&gt;<br \/>\n\t\t\t&lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id( &#8216;show_border&#8217; ); ?&gt;&quot;&gt;&lt;?php _e( &#8216;Show Border&#8217; ); ?&gt;&lt;\/label&gt;<br \/>\n\t\t&lt;\/p&gt;<\/p>\n<p>\t&lt;?php<br \/>\n\t}<br \/>\n[\/php]<\/p>\n<p>When widget form is filled out, the entered data should be saved to the database for reuse.<br \/>\nThe <code>update()<\/code> method sanitizes and saves form data to the database.<\/p>\n<p>[php]<br \/>\npublic function update( $new_instance, $old_instance ) {<br \/>\n\t\t$instance                       = array();<br \/>\n\t\t$instance[&#8216;title&#8217;]              = ( ! empty( $new_instance[&#8216;title&#8217;] ) ) ? strip_tags( $new_instance[&#8216;title&#8217;] ) : &#8221;;<br \/>\n\t\t$instance[&#8216;page_username&#8217;]      = ( ! empty( $new_instance[&#8216;page_username&#8217;] ) ) ? strip_tags( $new_instance[&#8216;page_username&#8217;] ) : &#8221;;<br \/>\n\t\t$instance[&#8216;show_friends_faces&#8217;] = ( ! empty( $new_instance[&#8216;show_friends_faces&#8217;] ) ) ? strip_tags( $new_instance[&#8216;show_friends_faces&#8217;] ) : &#8221;;<br \/>\n\t\t$instance[&#8216;show_Header&#8217;]        = ( ! empty( $new_instance[&#8216;show_Header&#8217;] ) ) ? strip_tags( $new_instance[&#8216;show_Header&#8217;] ) : &#8221;;<br \/>\n\t\t$instance[&#8216;show_border&#8217;]        = ( ! empty( $new_instance[&#8216;show_border&#8217;] ) ) ? strip_tags( $new_instance[&#8216;show_border&#8217;] ) : &#8221;;<\/p>\n<p>\t\treturn $instance;<br \/>\n\t}<br \/>\n[\/php]<\/p>\n<p>So far, we&#8217;ve developed the widget settings that will receive the entered form data and also added the ability to save the data to the database.<\/p>\n<p>Next is the <code>widget()<\/code> method or function that will display the <strong>Facebook Like Box<\/strong>.<\/p>\n<p>[php]<br \/>\npublic function widget( $args, $instance ) {<br \/>\n\t\t$title              = apply_filters( &#8216;widget_title&#8217;, $instance[&#8216;title&#8217;] );<br \/>\n\t\t$page_username      = $instance[&#8216;page_username&#8217;];<br \/>\n\t\t$show_friends_faces = $instance[&#8216;show_friends_faces&#8217;];<br \/>\n\t\t$show_Header        = $instance[&#8216;show_Header&#8217;];<br \/>\n\t\t$show_border        = $instance[&#8216;show_border&#8217;];<\/p>\n<p>\t\techo $args[&#8216;before_widget&#8217;];<br \/>\n\t\tif ( ! empty( $title ) ) {<br \/>\n\t\t\techo $args[&#8216;before_title&#8217;] . $title . $args[&#8216;after_title&#8217;];<br \/>\n\t\t}<\/p>\n<p>\t\tif ( empty( $page_username ) ) {<br \/>\n\t\t\techo &quot;Facebook username is missing in Widget settings.&quot;;<br \/>\n\t\t} else {<br \/>\n\t\t\t?&gt;<br \/>\n\t\t\t&lt;div class=&quot;fb-like-box&quot; data-href=&quot;https:\/\/www.facebook.com\/&lt;?php echo $page_username; ?&gt;&quot;<br \/>\n\t\t\t     data-colorscheme=&quot;light&quot;<br \/>\n\t\t\t     data-show-faces=&quot;&lt;?php echo ( $show_friends_faces == &#8216;on&#8217; ) ? &#8216;true&#8217; : &#8216;false&#8217;; ?&gt;&quot;<br \/>\n\t\t\t     data-header=&quot;&lt;?php echo ( $show_Header == &#8216;on&#8217; ) ? &#8216;true&#8217; : &#8216;false&#8217;; ?&gt;&quot;<br \/>\n\t\t\t     data-show-border=&quot;&lt;?php echo ( $show_border == &#8216;on&#8217; ) ? &#8216;true&#8217; : &#8216;false&#8217;; ?&gt;&quot;&gt;&lt;\/div&gt;<\/p>\n<p>\t\t&lt;?php<br \/>\n\t\t}<\/p>\n<p>\t\techo $args[&#8216;after_widget&#8217;];<br \/>\n\t}<br \/>\n[\/php]<\/p>\n<p>Let me briefly explain what the code above does.<\/p>\n<p>The Facebook page username and other widget options saved to the database via the widget form are retrieved and saved to their respective PHP variables. These options are then applied to the <em>Facebook Like Box<\/em> HTML5 code.<\/p>\n<p>The widget class <code>Designmodo_Facebook_Like_Box<\/code> is finally registered using the <code>widgets_init<\/code> hook so it is recognized by WordPress.<\/p>\n<p>[php]<br \/>\n\/\/ register the widget to WordPress<br \/>\nfunction register_designmodo_facebook_like_box_widget() {<br \/>\n\tregister_widget( &#8216;Designmodo_Facebook_Like_Box&#8217; );<br \/>\n}<\/p>\n<p>add_action( &#8216;widgets_init&#8217;, &#8216;register_designmodo_facebook_like_box_widget&#8217; );<br \/>\n[\/php]<\/p>\n<p>In order for the <strong>Like Box<\/strong> to display when the widget is activated, we need to include it JavaScript SDK to WordPress header. To achieve this, a PHP function that will contain the JavaScript SDK will be created and hooked to <code>wp_head<\/code>.<\/p>\n<p>[php]<br \/>\nfunction designmodo_facebook_javaScript_sdk() {<br \/>\n\t?&gt;<br \/>\n\t&lt;div id=&quot;fb-root&quot;&gt;&lt;\/div&gt;<br \/>\n\t&lt;script&gt;(function (d, s, id) {<br \/>\n\t\t\tvar js, fjs = d.getElementsByTagName(s)[0];<br \/>\n\t\t\tif (d.getElementById(id)) return;<br \/>\n\t\t\tjs = d.createElement(s);<br \/>\n\t\t\tjs.id = id;<br \/>\n\t\t\tjs.src = &quot;\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&amp;version=v2.0&quot;;<br \/>\n\t\t\tfjs.parentNode.insertBefore(js, fjs);<br \/>\n\t\t}(document, &#8216;script&#8217;, &#8216;facebook-jssdk&#8217;));&lt;\/script&gt;<br \/>\n&lt;?php<br \/>\n}<\/p>\n<p>add_action( &#8216;wp_head&#8217;, &#8216;designmodo_facebook_javaScript_sdk&#8217; );<br \/>\n[\/php]<\/p>\n<p>Voila! We are done coding the Facebook Like Box widget plugin.<\/p>\n<p>When the widget gets activated you would see the display as depicted in the image below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-119963\" src=\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2024\/06\/image-31.png\" alt=\"The Facebook Like Widget in Action\" width=\"313\" height=\"324\" \/><\/p>\n<h2>Wrap Up<\/h2>\n<p>[emaillocker]<br \/>\nHere is a <a href=\"https:\/\/www.dropbox.com\/scl\/fi\/sq2xeqlw11f1p73rwjpqm\/designmodo-facebook-like-box.zip?rlkey=0vj2q10a3gmoxsch3avrw64ia&amp;e=1&amp;dl=0\">link to the widget plugin file<\/a> just in case you want to use in your WordPress site and also study the code to learn how it works.<br \/>\n[\/emaillocker]<br \/>\nIf you have any questions, contributions or suggestions for code improvement, let us know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress arguably has become the de facto content management system (CMS) in the world powering over 20 percent of websites globally. One of the platform&#8217;s most loved feature is widgets that seamlessly add content and features to sidebars. Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":120879,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-119954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Facebook Like Box WordPress Widget - WordPress Guides<\/title>\n<meta name=\"description\" content=\"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Facebook Like Box WordPress Widget - WordPress Guides\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Guides\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-12T09:10:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T10:13:11+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3\"},\"headline\":\"Building a Facebook Like Box WordPress Widget\",\"datePublished\":\"2014-09-12T09:10:45+00:00\",\"dateModified\":\"2025-11-11T10:13:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\"},\"wordCount\":1468,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\",\"url\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\",\"name\":\"Building a Facebook Like Box WordPress Widget - WordPress Guides\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2014-09-12T09:10:45+00:00\",\"dateModified\":\"2025-11-11T10:13:11+00:00\",\"description\":\"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.\",\"breadcrumb\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/strictthemes.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Facebook Like Box WordPress Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#website\",\"url\":\"https:\/\/strictthemes.com\/articles\/\",\"name\":\"WordPress Guides\",\"description\":\"Create WordPress websites for begginers.\",\"publisher\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/strictthemes.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\",\"name\":\"WordPress Guides\",\"url\":\"https:\/\/strictthemes.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png\",\"contentUrl\":\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png\",\"width\":500,\"height\":500,\"caption\":\"WordPress Guides\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/strictthemes.com\/articles\"],\"url\":\"https:\/\/strictthemes.com\/articles\/author\/andrian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Facebook Like Box WordPress Widget - WordPress Guides","description":"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/","og_locale":"en_US","og_type":"article","og_title":"Building a Facebook Like Box WordPress Widget - WordPress Guides","og_description":"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.","og_url":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/","og_site_name":"WordPress Guides","article_published_time":"2014-09-12T09:10:45+00:00","article_modified_time":"2025-11-11T10:13:11+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#article","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/"},"author":{"name":"admin","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3"},"headline":"Building a Facebook Like Box WordPress Widget","datePublished":"2014-09-12T09:10:45+00:00","dateModified":"2025-11-11T10:13:11+00:00","mainEntityOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/"},"wordCount":1468,"commentCount":2,"publisher":{"@id":"https:\/\/strictthemes.com\/articles\/#organization"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage"},"thumbnailUrl":"","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/","url":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/","name":"Building a Facebook Like Box WordPress Widget - WordPress Guides","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage"},"thumbnailUrl":"","datePublished":"2014-09-12T09:10:45+00:00","dateModified":"2025-11-11T10:13:11+00:00","description":"In this tutorial we will code a WordPress widget plugin that display the Facebook Like Box at the front-end of our website.","breadcrumb":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/strictthemes.com\/articles\/wordpress-facebook-like-box\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/strictthemes.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Building a Facebook Like Box WordPress Widget"}]},{"@type":"WebSite","@id":"https:\/\/strictthemes.com\/articles\/#website","url":"https:\/\/strictthemes.com\/articles\/","name":"WordPress Guides","description":"Create WordPress websites for begginers.","publisher":{"@id":"https:\/\/strictthemes.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/strictthemes.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/strictthemes.com\/articles\/#organization","name":"WordPress Guides","url":"https:\/\/strictthemes.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png","contentUrl":"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2021\/02\/logo.png","width":500,"height":500,"caption":"WordPress Guides"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f3e4f16181fb8c4f52d8ce92b721be0a10c6988bdb5a145b784cde45f5ef679?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/strictthemes.com\/articles"],"url":"https:\/\/strictthemes.com\/articles\/author\/andrian\/"}]}},"_links":{"self":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/119954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/comments?post=119954"}],"version-history":[{"count":3,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/119954\/revisions"}],"predecessor-version":[{"id":690249,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/119954\/revisions\/690249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/media?parent=119954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/categories?post=119954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/tags?post=119954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}