Jamie Social Icons is now an easy way to add this functionality to your WordPress website.  Facebook Insights provides reports broken down by domain and by app. These reports include rich data about users sharing content from your site within Facebook and other Facebook-enabled apps no matter where those activity originated. For example, if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain and of course it will monitor the Facebook likes on your site.

To add this functionality to your WordPress website simply install Jamie Social Icons and log into your Facebook account and go to www.facebook.com/insights.  Here you will see a button to saying “insights for your website” click on that and enter the domain of your website, and copy the numerical code in bottom meta tags.  See the example image above.   Add this code into the relevant box on the Jamie Social Icons Settings Page and save the settings.  It may take up to two days before you will be able to see the results on your Facebook insights page but then they will always be available.

Now when you visit the facebook insights page, you will see your website listed under Websites.

Once you click on your site, you will be able to access all sort of insights. An example image is below:

It is as simple as that, I think a great add on to a simple but effective wordpress plugin.  Try it out and download my plugin and see how easy it is to tarck your Facebook activity, also track all your other social activity within your google analytics which was made a feature in Jamie social Icons V0.9.5.

Dont forget to share this post with all your friends on Facebook.

Recently since I updated my plugin Jamie social Icons I have had a few complaints that my plugin stopped working, the main reason for the update was because I had inline scripts which, you probably know cause a delay in page downloads, especially as my plugins needs to make a call to the external sites of Facebook, Twitter, LinkedIn, Pinterest and Google plus which if they are having any issues will cause your page to be slow at loading, so I decided to move all the external scripts to the footer.

By placing JavaScript in the footer it loads after all the rest of the DOM tree has been built. if you have inline JavaScript the DOM parser has to stop and process the JavaScript to see if it writes any more HTML code to the screen.

When people first started to comment that the plugin had broken afer the update I was a little confused because I build multiple WordPress sites and al of them which i have included my plugin on all worked after the update, from looking at the source code I could see that no scripts were being pulled into the footer, so instantly Knew there was as issue with my add_action(‘wp_footer’,… function, after trailing the internet I could only find similar cases of themes not having the wp_footer call in their footer.php’s, and some even with out the wp_head in the header.php.

When I first started developing themes, using the Kubrick theme as a basis I would always see the wp-head and wp_footer in the relating places but never really understood what they were for, only that I always need to add them.  With a mixture of my themes developing, the designer getting more adventurous and browsers capabilities developing and keeping sites looking the same in older browsers  the use of jQuery became a big part in my development. Resulting a huge headache as scripts stopped working once adding into WordPress, which I found out was scripts n conflict with each other was when I forst learnt what the wp_head and wp_footer were really for.  The WordPress Codex states that “Although this is theme-dependent, it is one of the most essential theme hooks, so it is fairly widely supported. “  So two key things to add to a WordPress theme are the wp_head and wp_footer functions. These two functions are known as “action hooks”. In simple terms action hooks are placeholders where code is dynamically added to a theme.  

When these issues started to appear in the support forum and emails started to come in, I was starting to wonder whether I was using the function incorrectly, which I have still not ruled out as i am always on a learning curve but due to me not being able to replicate the error, without removing the wp_footer action, even to the extent of testing on different servers, I can only conclude that is the issue – although on one theme I had an issue becasue I somehow managed to miss out the starting body tag (luckily it was still in development).

Most modern themes will always include the two action hooks wp_head and wp_footer, but sometimes when themes are adapted to suit the users needs some tags are accidentally deleted/removed which may go unnoticed until that function is needed, I would suggest if you are going to amend a pre made theme (which is working properly) create a child theme and amend the files in that rather than the working theme so if you ever a mistake is made you still have a working copy, i will write a more detailed blog post of creating child themes later.

If ever you have an issue with a plugin or theme developemnt there are a couple of steps which may come in handy to check first, you have probably guessed the first step:

• Check the header.php that it includes the tag, normally within and near to the closingtag and just incase you were sleeping like me while building a theme just check that there is an openingtag after the closingtag
• Check the footer.php that it includes the tag, I would recommend directly before the closing tag.

• Check your site with the W3C validation service, ok because sites are not always built within strict rules of the W3C (Before you roundup the henchmen)  because of modern technologies ie.HTML5, CSS3 – these will not always validate in a regular W3c validator but you can see if/where the site is erroring, this is a useful tool, especially if you have missed a closing div.
• Ask the plugin developer for help, mistakes are made, when I first released my Jamie Social Icons plugin because I was working in test while developing it, my call to the stylesheet was wrongly pathed when I added it to the repository so I had an update within the first 12 hours of launch.  Most developers create plugins out of enjoyment of learning new skills and sharing what they have learnt so are always happy to help, and cannot always test the plugins in all scenarios.

So when you are next working on your website have a quick look in your theme files and see if you have the wp_head in the header.php and the wp_footer in the footer.php, if you don’t try adding them, this could well future proof your site to be able to use plugins which you could bnever get to work before.  But be careful changing your theme files always make a backup first.  Some times if you add these action hooks you may experience that your site does not behave the way that you are used too, it is possible that this could introduce plugin/theme conflicts if scripts have not been called before, if this is the case ask your theme developer they may be able to give you help or advice of to sort it, rather than installing that plugin further down the track and not be able to use it.

You should see a page like the image above, with all the widgets available on the left handside and in the right sidebar a list of areas that you can add the widgets to – most likely called Sidebar 1.  If you cannot see anything here not to worry, it means that your site is not widget-supported, we will soon get you up and running with your new dynamic widget sidebars/widget areas.

If you are seeing similar to above with just the one widget area to drag your widgets into you may be thinking how will this show different things on different pages.  I will be showing you how to create different Widget areas which you can to display in different places throughout your website.

To add another widget area go to your functions.php if you do not have one create it.

Generally the widget in the sidebar html is generated like the code below:

<ul id="sidebar">
<li class="widget widget_categories">
<h4>Categories</h4>
<ul>
<li><a href="http://www.martiniboy.co.uk">Example Category</a></li>
</ul>
</li>
</ul>

To create the Widget Area for this within your functions.php paste the following code

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'NAME OF WIDGETAREA',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4 class="title">',
'after_title' => '</h4>',
));
?>

If you alrerady have code within your functions.php omit the opening and closing php tags above

Changing NAME_OF_WIDGETAREA to the name of your choice so you will recognize it within your widgets page, especially if you have lots of different widget areas.  For example if you were using one of my widget plugins – Jamie’s WP Arrow Newsletter Subscriber but you wanted this to show at the bottom of every page, you can either drag the widget to the botton of every widget or create a widget area for solely for this named “Newsletter” or if you have a few different widgets that you want at the bottom of every sidebar name “Sidebar Bottom” it is entirely up to you.

With the before_widget and after_widget this is what will appear before and after the widget – this can be changed to any markup that you would like it could be sourrounded by a div or a span, it depends on how you want to style the widget.  For my example with categories this is internal navigation so would most likely be surrounded with the nav tag so as a rule would style within an unordered list.

With the before_title and after_title, yep you guessed it this is what is displayed before and after the title, in this example Categories, in many widget examples and themes you may see this as a H2 tag, because Categories or any other widget which I am likely to use within this sidebar is not a search term, that I am trying to optimize for the site, ie. I would not expect someone to search Categories within google or any other search engine and my site to appear, so I have generoulsy given this a  H4 tag, which I probably could get away with using a span tag styled as a block element.  That will be covered in a later post.

So you have created your New WordPress Widget Area and you have dragged the widget that you want to display into the widget area and you look at the frontend of your site and nothing has changed.   This is becuase we have only created the area to add your widgets to now we will add it into your theme.

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('NAME OF WIDGETAREA') ) : ?>

<?php endif; ?>
</ul>

<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Blog page',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>'),

register_sidebar(array(
'name' => 'Newsletter',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>'),

register_sidebar(array(
'name' => 'Non Blog Pages',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>',)
) ) );  ?>

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Blog page') ) : ?>
<?php endif;?>
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Newsletter') ):?>
<?php endif; ?>
 </ul>

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Non Blog Pages') ) : ?>
<?php endif;?>
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Newsletter') ):?>
<?php endif; ?>
 </ul>

I will be using the site to showcase my WordPress plugins and share my journey of developing my skills and share any useful snippets that I use.

My passion is with WordPress, HTML, CSS and jQuery so these are the areas that I will concentrate on. I am particularly interested in mobile development so I will be testing out a lot of different scenarios for different screen sizes.

Keep checking back for updates.