Tag Archive for tutorial

Build a jQuery Twitter Feed

Copy and paste the code below into a post, page, widget, or your HTML code. Be sure to replace the screen_name on line 4.

small payday loans very cheap

<div class="twitter" id="jstweets"></div>
<script>
$.ajax({
  url: 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jolamar&count=5&callback=?',
  dataType: 'json',
  success: function(data){
    $.each(data, function(i,item){
      ct = item.text;
      // include time tweeted - thanks to will
      mytime = item.created_at;
      var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
      var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
      var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
      ct = ct.replace(/http:\/\/\S+/g,  '<a href="$&" target="_blank">$&</a>');
      twitterURL = "http://twitter.com/";
      ct = ct.replace(/\s(@)(\w+)/g,    ' @<a href="'+twitterURL+'$2">$2</a>');
      ct = ct.replace(/\s(#)(\w+)/g,    ' #<a href="'+twitterURL+'search?q=%23$2" target="_blank">$2</a>');
      $("#jstweets").append('<div>'+ct + ' <small><i>(' + mydate + ' @ ' + mytime + ')</i></small></div>');
    });
  }
});
</script>

NOTE: You will need jQuery for this to work. If this isn’t working, try including the following library at the beginning of this code.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Adding Facebook Like Button to Posts

I recently added Facebook like buttons to each of my posts and was surprised at how easy it was. There is no need to install plugins because it’s very simple.

  1. Go to Facebook and get the code to make the like button: https://developers.facebook.com/docs/reference/plugins/like/
  2. Copy the code from part one and go to your WP Dashboard under Appearance -> Editor
  3. Select your theme on the top right dropdown.
  4. Click header.php from the list of files.
  5. Paste the first code after the <body> tag.
  6. Update that file.
  7. Open index.php and find the loop. It should look like this:
  8. Go back to Facebook and copy the second code.
  9. Paste it inside of the loop at the end of the “entry” div.
  10. Replace the data-href URL with <?php the_permalink() ?> and that will generate the URL for that post.
  11. Update that file.
  12. Open single.php and find the loop and do steps 9-11 again.

Pretty simple. I also recommend checking out the WP Facebook Open Graph protocol plugin http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/

WordPress Live Search

Today I added a Live Search (or autocomplete) plugin to my blog and I’d like to create a short tutorial for how you can add Live Search to your WordPress blog.

  1.  Login to your WordPress Dashboard and add this plugin “Dave’s WordPress Live Search”
  2. Activate the plugin.
  3. Go to Settings -> Live Search
  4. Decide how many results you want to display (I set mine to 5)
  5. If your search is near the top leave the direction as “Down” (you may try experimenting but most likely leave as “Down”)
  6. Check “Display Post Excerpt” and leave the other 3 unchecked
  7. Leave the default style as gray.
  8. Save Changes
  9. Most likely the width of the search box will be off so go to Plugins -> Editor and select “Dave’s WordPress Live Search” from the top right drop down.
  10. Click daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css from the list of plugin files.
  11. Change the width in ul.search_results to match your search box.
  12. Make any other style changes you’d like and click update file.
  13. That’s it! You now have a working live search box!

If you want to know more about this plugin, see http://wordpress.org/extend/plugins/daves-wordpress-live-search/