{"id":116980,"date":"2014-05-30T11:56:41","date_gmt":"2014-05-30T09:56:41","guid":{"rendered":"http:\/\/designmodo.com\/?p=116980"},"modified":"2025-11-11T10:13:40","modified_gmt":"2025-11-11T10:13:40","slug":"wordpress-social-media-widget","status":"publish","type":"post","link":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/","title":{"rendered":"How To Build a Social Media Profile Widget in WordPress"},"content":{"rendered":"<p>One of the core feature of WordPress is <a href=\"https:\/\/wordpress.org\/documentation\/article\/manage-wordpress-widgets\/\">widget areas<\/a>, which are used to add content to theme sidebars or other widgetized areas. Activating a widget in your theme sidebar is as easy as dragging and dropping the widget in the desired widgetized area. (<em>Recommended reading &#8211; Understanding and Using Widgets in WordPress.)<\/em><\/p>\n<p>Many of today&#8217;s websites contain social network icons that link to profiles. This can be accomplished in WordPress using widgets. In this tutorial, we will build a <strong>WordPress widget that links to the profile of social networks<\/strong>. To keep things simple, the widget will support Facebook, Twitter, LinkedIn and Google+ profiles using <a href=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a> social network icons.<\/p>\n<h2>Coding a Social Network Profile Widget<\/h2>\n<p>Let&#8217;s get started with widget development. First, we need to include the plugin header. Without the header, WordPress won&#8217;t recognize the widget.<\/p>\n<p>[php]<br \/>\n&lt;?php<br \/>\n\/*<br \/>\n  Plugin Name: Designmodo Social Profile Widget<br \/>\n  Plugin URI: https:\/\/designmodo<br \/>\n  Description: Links to Author social media profile<br \/>\n  Author: Agbonghama Collins<br \/>\n  Author URI: https:\/\/designmodo.com<br \/>\n*\/<br \/>\n[\/php]<\/p>\n<p>To create a WordPress widget, you need to extend the standard <code>WP_Widget<\/code> class and include it required methods (known as functions in PHP procedural programming) and register the widget.<\/p>\n<p>Create the class extending the <code>WP_Widget<\/code>.<\/p>\n<p>[php]<br \/>\nclass Designmodo_Social_Profile extends WP_Widget { &#8230; }<br \/>\n[\/php]<\/p>\n<p>Give the widget a name and description using the <code>__construct()<\/code> magic method.<\/p>\n<p>[php]<br \/>\n        function __construct() {<br \/>\n        parent::__construct(<br \/>\n                &#8216;Designmodo_Social_Profile&#8217;,<br \/>\n                __(&#8216;Social Networks Profiles&#8217;, &#8216;translation_domain&#8217;), \/\/ Name<br \/>\n                array(&#8216;description&#8217; =&amp;gt; __(&#8216;Links to Author social media profile&#8217;, &#8216;translation_domain&#8217;),)<br \/>\n        );<br \/>\n    }<br \/>\n[\/php]<\/p>\n<p>The widget settings options will consist of five form fields that contain the title of the widget, Facebook, Twitter, Google+ and LinkedIn profile links.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-116982\" src=\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2024\/06\/widget-designmodo-settings.jpg\" alt=\"Widget Settings\" width=\"600\" height=\"436\" \/><\/p>\n<p>The codes in <code>form()<\/code> method or function will create the widget settings form.<\/p>\n<p>[php]<br \/>\npublic function form($instance) {<br \/>\n        isset($instance[&#8216;title&#8217;]) ? $title = $instance[&#8216;title&#8217;] : null;<br \/>\n        empty($instance[&#8216;title&#8217;]) ? $title = &#8216;My Social Profile&#8217; : null;<\/p>\n<p>        isset($instance[&#8216;facebook&#8217;]) ? $facebook = $instance[&#8216;facebook&#8217;] : null;<br \/>\n        isset($instance[&#8216;twitter&#8217;]) ? $twitter = $instance[&#8216;twitter&#8217;] : null;<br \/>\n        isset($instance[&#8216;google&#8217;]) ? $google = $instance[&#8216;google&#8217;] : null;<br \/>\n        isset($instance[&#8216;linkedin&#8217;]) ? $linkedin = $instance[&#8216;linkedin&#8217;] : null;<br \/>\n        ?&gt;<br \/>\n        &lt;p&gt;<br \/>\n            &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            &lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;title&#8217;); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name(&#8216;title&#8217;); ?&gt;&quot; type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr($title); ?&gt;&quot;&gt;<br \/>\n        &lt;\/p&gt;<\/p>\n<p>        &lt;p&gt;<br \/>\n            &lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;facebook&#8217;); ?&gt;&quot;&gt;&lt;?php _e(&#8216;Facebook:&#8217;); ?&gt;&lt;\/label&gt;<br \/>\n            &lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;facebook&#8217;); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name(&#8216;facebook&#8217;); ?&gt;&quot; type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr($facebook); ?&gt;&quot;&gt;<br \/>\n        &lt;\/p&gt;<\/p>\n<p>        &lt;p&gt;<br \/>\n            &lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;twitter&#8217;); ?&gt;&quot;&gt;&lt;?php _e(&#8216;Twitter:&#8217;); ?&gt;&lt;\/label&gt;<br \/>\n            &lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;twitter&#8217;); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name(&#8216;twitter&#8217;); ?&gt;&quot; type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr($twitter); ?&gt;&quot;&gt;<br \/>\n        &lt;\/p&gt;<\/p>\n<p>        &lt;p&gt;<br \/>\n            &lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;google&#8217;); ?&gt;&quot;&gt;&lt;?php _e(&#8216;Google+:&#8217;); ?&gt;&lt;\/label&gt;<br \/>\n            &lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;google&#8217;); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name(&#8216;google&#8217;); ?&gt;&quot; type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr($google); ?&gt;&quot;&gt;<br \/>\n        &lt;\/p&gt;<\/p>\n<p>        &lt;p&gt;<br \/>\n            &lt;label for=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;linkedin&#8217;); ?&gt;&quot;&gt;&lt;?php _e(&#8216;Linkedin:&#8217;); ?&gt;&lt;\/label&gt;<br \/>\n            &lt;input class=&quot;widefat&quot; id=&quot;&lt;?php echo $this-&gt;get_field_id(&#8216;linkedin&#8217;); ?&gt;&quot; name=&quot;&lt;?php echo $this-&gt;get_field_name(&#8216;linkedin&#8217;); ?&gt;&quot; type=&quot;text&quot; value=&quot;&lt;?php echo esc_attr($linkedin); ?&gt;&quot;&gt;<br \/>\n        &lt;\/p&gt;<\/p>\n<p>        &lt;?php<br \/>\n    }<br \/>\n[\/php]<\/p>\n<p>When values are entered into the form field, they need to be saved to the database. The <code>update()<\/code> method sanitizes form values by stripping out malicious data and saves the sanitized values to the database.<\/p>\n<p>[php]<br \/>\npublic function update($new_instance, $old_instance) {<br \/>\n        $instance = array();<br \/>\n        $instance[&#8216;title&#8217;] = (!empty($new_instance[&#8216;title&#8217;]) ) ? strip_tags($new_instance[&#8216;title&#8217;]) : &#8221;;<br \/>\n        $instance[&#8216;facebook&#8217;] = (!empty($new_instance[&#8216;facebook&#8217;]) ) ? strip_tags($new_instance[&#8216;facebook&#8217;]) : &#8221;;<br \/>\n        $instance[&#8216;twitter&#8217;] = (!empty($new_instance[&#8216;twitter&#8217;]) ) ? strip_tags($new_instance[&#8216;twitter&#8217;]) : &#8221;;<br \/>\n        $instance[&#8216;google&#8217;] = (!empty($new_instance[&#8216;google&#8217;]) ) ? strip_tags($new_instance[&#8216;google&#8217;]) : &#8221;;<br \/>\n        $instance[&#8216;linkedin&#8217;] = (!empty($new_instance[&#8216;linkedin&#8217;]) ) ? strip_tags($new_instance[&#8216;linkedin&#8217;]) : &#8221;;<\/p>\n<p>        return $instance;<br \/>\n    }<br \/>\n[\/php]<\/p>\n<p>So far, we have developed widget settings which will contain links to the defined social network profiles and also added the ability to save widget settings to the database.<\/p>\n<p>Next is the <code>widget()<\/code> function that displays links to social network profiles at the front-end of WordPress.<\/p>\n<p>[php]<br \/>\npublic function widget($args, $instance) {<\/p>\n<p>        $title = apply_filters(&#8216;widget_title&#8217;, $instance[&#8216;title&#8217;]);<br \/>\n        $facebook = $instance[&#8216;facebook&#8217;];<br \/>\n        $twitter = $instance[&#8216;twitter&#8217;];<br \/>\n        $google = $instance[&#8216;google&#8217;];<br \/>\n        $linkedin = $instance[&#8216;linkedin&#8217;];<\/p>\n<p>\/\/ social profile link<br \/>\n        $facebook_profile = &#8216;&lt;a class=&quot;facebook&quot; href=&quot;&#8217; . $facebook . &#8216;&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<br \/>\n        $twitter_profile = &#8216;&lt;a class=&quot;twitter&quot; href=&quot;&#8217; . $twitter . &#8216;&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<br \/>\n        $google_profile = &#8216;&lt;a class=&quot;google&quot; href=&quot;&#8217; . $google . &#8216;&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<br \/>\n        $linkedin_profile = &#8216;&lt;a class=&quot;linkedin&quot; href=&quot;&#8217; . $linkedin . &#8216;&quot;&gt;&lt;i class=&quot;fa fa-linkedin&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p>echo $args[&#8216;before_widget&#8217;];<br \/>\nif (!empty($title)) {<br \/>\necho $args[&#8216;before_title&#8217;] . $title . $args[&#8216;after_title&#8217;];<br \/>\n}<\/p>\n<p>        echo &#8216;&lt;div class=&quot;social-icons&quot;&gt;&#8217;;<br \/>\n        echo (!empty($facebook) ) ? $facebook_profile : null;<br \/>\n        echo (!empty($twitter) ) ? $twitter_profile : null;<br \/>\n        echo (!empty($google) ) ? $google_profile : null;<br \/>\n        echo (!empty($linkedin) ) ? $linkedin_profile : null;<br \/>\n        echo &#8216;&lt;\/div&gt;&#8217;;<br \/>\n        echo $args[&#8216;after_widget&#8217;];<br \/>\n}<br \/>\n[\/php]<\/p>\n<p>Here&#8217;s what the code does. The Facebook, Twitter, Google+ and LinkedIn profile links saved to the database via the widget settings form are retrieved and saved to their respective PHP variables. The HTML link to social network profiles with their respective <b>font awesome<\/b> icons as anchor images are then saved to a variable for reuse.<\/p>\n<p>Finally, links to the social network profiles are displayed only if the profile is set in the widget settings. This is done so that a social network without a saved profile link won&#8217;t be display at the front-end.<\/p>\n<p>The widget class <code>Designmodo_Social_Profile<\/code> is then registered using the <code>widgets_init<\/code> hook so it is recognizable by WordPress.<\/p>\n<p>[php]<br \/>\n\/\/ register Designmodo_Social_Profile widget<br \/>\nfunction register_designmodo_social_profile() {<br \/>\nregister_widget(&#8216;Designmodo_Social_Profile&#8217;);<br \/>\n}<\/p>\n<p>add_action(&#8216;widgets_init&#8217;, &#8216;register_designmodo_social_profile&#8217;);<br \/>\n[\/php]<\/p>\n<p>The <em>designmodo-social-profile-widget.css<\/em> plugin file will contain the imported font-awesome and the widget front-end stylesheet which should reside in the plugin folder.<\/p>\n<p>[css]<br \/>\n@import &amp;quot;\/\/netdna.bootstrapcdn.com\/font-awesome\/4.1.0\/css\/font-awesome.min.css&amp;quot;;<br \/>\n.social-icons {<br \/>\n    color: #FFFFFF;<br \/>\n    text-align: center;<br \/>\n    padding-top: 5px;<br \/>\n    position: relative;<br \/>\n    margin: 1px 10px;<br \/>\n}<br \/>\n.social-icons a {<br \/>\n    font-size: 21px;<br \/>\n    padding: 8px 10px 6px;<br \/>\n    color: #FFFFFF;<br \/>\n    margin-bottom: 5px;<br \/>\n    display: inline-block;<br \/>\n    margin: 1px 5px;<br \/>\n    width: 30px;<br \/>\n    height: 30px;<br \/>\n}<\/p>\n<p>.social-icons a:hover {<br \/>\n    color: #fff;<br \/>\n    text-decoration: none;<br \/>\n    border-radius: 50%;<br \/>\n}<\/p>\n<p>.social-icons .fa-facebook, .social-icons .facebook {<br \/>\n    background: #3B5998;<br \/>\n}<\/p>\n<p>.social-icons .fa-twitter, .social-icons .twitter {<br \/>\n    background: #00abe3;<br \/>\n}<\/p>\n<p>.social-icons .fa-google, .social-icons .google {<br \/>\n    background: #d3492c;<br \/>\n}<\/p>\n<p>.social-icons .fa-linkedin, .social-icons .linkedin {<br \/>\n    background: #01669c;<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>The stylesheet needs to be enqueued in order for it to be added among the CSS files located in the WordPress header.<\/p>\n<p>[php]<br \/>\n\/\/ enqueue css stylesheet<br \/>\n        function designmodo_social_profile_widget_css() {<br \/>\n        wp_enqueue_style(&#8216;social-profile-widget&#8217;, plugins_url(&#8216;designmodo-social-profile-widget.css&#8217;, __FILE__));<br \/>\n}<br \/>\n        add_action(&#8216;wp_enqueue_scripts&#8217;, &#8216;designmodo_social_profile_widget_css&#8217;);<br \/>\n[\/php]<\/p>\n<p>If the widget is activated and filled with the respective social network profile links, you should see it display like the image below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-116981\" src=\"https:\/\/strictthemes.com\/articles\/wp-content\/uploads\/2024\/06\/social-network-profile-front-end.jpg\" alt=\"Social network profile\" width=\"600\" height=\"150\" \/><br \/>\n[emaillocker]<br \/>\nHere is the link to the <a href=\"https:\/\/www.dropbox.com\/scl\/fi\/utgwpzhqc3r006n4783m6\/designmodo-social-profile-widget.zip?rlkey=br7dxj0lxdf27c3pw1d5xtlpl&amp;e=1&amp;dl=0\">plugin file<\/a> so that you use in your WordPress site and also sturdy the code to learn how it works.<br \/>\n[\/emaillocker]<\/p>\n<h3>Summary<\/h3>\n<p>One of the ways of adding new features to a WordPress powered site is through the use of the widget. In this article, I showed you how to build a profile widget that links to a number of various social networks, thus explaining how widgets and plugins are built in WordPress. If you have any questions, let me know in the comments below.<\/p>\n<p>Happy coding.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the core feature of WordPress is widget areas, which are used to add content to theme sidebars or other widgetized areas. Activating a widget in your theme sidebar is as easy as dragging and dropping the widget in the desired widgetized area. (Recommended reading &#8211; Understanding and Using Widgets in WordPress.) Many of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":116988,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-116980","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>How To Build a Social Media Profile Widget in WordPress - WordPress Guides<\/title>\n<meta name=\"description\" content=\"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.\" \/>\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-social-media-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Build a Social Media Profile Widget in WordPress - WordPress Guides\" \/>\n<meta property=\"og:description\" content=\"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Guides\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-30T09:56:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T10:13:40+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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3\"},\"headline\":\"How To Build a Social Media Profile Widget in WordPress\",\"datePublished\":\"2014-05-30T09:56:41+00:00\",\"dateModified\":\"2025-11-11T10:13:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\"},\"wordCount\":1504,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\",\"url\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\",\"name\":\"How To Build a Social Media Profile Widget in WordPress - WordPress Guides\",\"isPartOf\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2014-05-30T09:56:41+00:00\",\"dateModified\":\"2025-11-11T10:13:40+00:00\",\"description\":\"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/strictthemes.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Build a Social Media Profile Widget in WordPress\"}]},{\"@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":"How To Build a Social Media Profile Widget in WordPress - WordPress Guides","description":"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.","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-social-media-widget\/","og_locale":"en_US","og_type":"article","og_title":"How To Build a Social Media Profile Widget in WordPress - WordPress Guides","og_description":"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.","og_url":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/","og_site_name":"WordPress Guides","article_published_time":"2014-05-30T09:56:41+00:00","article_modified_time":"2025-11-11T10:13:40+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#article","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/"},"author":{"name":"admin","@id":"https:\/\/strictthemes.com\/articles\/#\/schema\/person\/0494d35a2138fb6ca85de8d8c107cea3"},"headline":"How To Build a Social Media Profile Widget in WordPress","datePublished":"2014-05-30T09:56:41+00:00","dateModified":"2025-11-11T10:13:40+00:00","mainEntityOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/"},"wordCount":1504,"commentCount":10,"publisher":{"@id":"https:\/\/strictthemes.com\/articles\/#organization"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage"},"thumbnailUrl":"","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/","url":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/","name":"How To Build a Social Media Profile Widget in WordPress - WordPress Guides","isPartOf":{"@id":"https:\/\/strictthemes.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage"},"image":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage"},"thumbnailUrl":"","datePublished":"2014-05-30T09:56:41+00:00","dateModified":"2025-11-11T10:13:40+00:00","description":"In this article, I showed how to build a profile widget that link to a number of various social networks, thus learning how widgets and plugins are built in WordPress.","breadcrumb":{"@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/strictthemes.com\/articles\/wordpress-social-media-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/strictthemes.com\/articles\/"},{"@type":"ListItem","position":2,"name":"How To Build a Social Media Profile Widget in WordPress"}]},{"@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\/116980","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=116980"}],"version-history":[{"count":3,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/116980\/revisions"}],"predecessor-version":[{"id":690254,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/posts\/116980\/revisions\/690254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/media?parent=116980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/categories?post=116980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strictthemes.com\/articles\/wp-json\/wp\/v2\/tags?post=116980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}