Archive for March 2012

Adding Email Subscription to WordPress

In this tutorial I will show you how to integrate an email subscription plugin in your WordPress site that will allow users to enter their email address to subscribe to new posts and emails that you send out.

  1. To get this working in your WordPress site you will first need to install the “Subscribe2″ plugin. You can search and install this from WordPress by going to Plugins -> Add new and then searching for Subscribe2
  2. Once you’ve installed Subscribe2, review the plugin settings and determine which posts categories should be sent out and how often. I also checked the Enable Subscribe2 widget option so that I could use the subscribe plugin in my sidebar (look to your left).
  3. If you are going to insert the form into a page, then edit the page and you will see S2 in the WYSIWYG. Simply click that.
  4. If you are going to insert the form into a widget (e.g. sidebar), then go to Appearance -> Widgets and drag the Subscribe2 widget to your sidebar.
  5. The rest of this tutorial assume you are using the widget method.
  6. You can configure the options, but I only changed the class from “search” to “subscribe” and also removed the ’2′ from the title.
  7. At this point your Subscribe input field and buttons may look pretty wimpy. That’s okay we will address that now.
  8. Open your stylesheet and add two new styles for:
    1. .subscribe input[type=text] { /* these styles are for the text field */ }
    2. .subscribe input[type=submit] { /* these styles are for the buttons */ }
  9. Here is the full CSS I used to style my subscribe widget
  10. .subscribe input[type=text] { 
       width: 260px;
       height: 20px;
       padding: 10px 5px;
       float: left;
       font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
       border: 0; 
       background: #eee;
       border-radius: 3px;
       margin-bottom:5px;
    }
            
    .subscribe input[type=text]:focus {
       outline: 0;
       background: #fff;
       box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
    
    
    .subscribe input[type=text]::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    
    .subscribe input[type=text]:-moz-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    
    .subscribe input[type=text]:-ms-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }  
    
    .subscribe input[type=submit] {
       padding: 10px;
       -webkit-border-radius: 2px 2px;
       border: solid 1px #3079ed;
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4d90fe), to(#4787ed));
       background: #4d90fe; /* Old browsers */
       background: -moz-linear-gradient(top,  #4d90fe 0%, #4787ed 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* IE10+ */
       background: linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4787ed',GradientType=0 ); /* IE6-9 */
       color: #fff;
       text-decoration: none;
       cursor: pointer;
       display: inline-block;
       text-align: center;
       font-weight:bold;
       font-family:Arial, Helvetica, sans-serif;
       text-transform:uppercase;
       font-size:11px;
       line-height: 1;
    }
    
    .subscribe input[type=submit]:hover {
       border: 1px solid #2f5bb7;
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(221, 75, 57)), to(rgb(197, 55, 39)));
       background: #4d90fe; /* Old browsers */
       background: -moz-linear-gradient(top,  #4d90fe 0%, #357ae8 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* IE10+ */
       background: linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0 ); /* IE6-9 */
       -webkit-box-shadow: 0 1px 1px #333333;
       -moz-box-shadow: 0 1px 1px #333333;
       box-shadow: 0 1px 1px #333333;
    }
    

Facebook Page JSON & RSS Feed

Ever wanted to put a Facebook page’s feed into your website? Every Facebook page has an RSS & JSON feed. In this tutorial I will show you how to use PHP and JSON to pull the feed from Facebook without authentication.

  1. Make sure your Page is published and visible to the public. This can be done under the Page settings. Publish Page
  2. You will need your page ID. You can get this from https://graph.facebook.com/yourpage for example https://graph.facebook.com/HoosierHeights If your page does not have a username, you can visit your page and copy the last numbers in the URL for example:
    https://www.facebook.com/pages/HoosierHeights/163276271689  NOTE: If you’re page is not published (step 1) then you’ll get this error
    {
       "error": {
          "message": "Unsupported get request.",
          "type": "GraphMethodException",
          "code": 100
       }
    }
  3. Now that you have your page ID you can view the JSON feed at this URL:
    http://www.facebook.com/feeds/page.php?id=163276271689&format=json
    (replacing the number with your page ID). NOTE: You can get the RSS version by replacing format=json with format=rss20 for example https://www.facebook.com/feeds/page.php?id=163276271689&format=rss20
  4. Here is the PHP code to pull the JSON feed into your site. (Be sure to replace the URL with your own).
    <? 
    //replace the Page ID with your own
    $url = "http://www.facebook.com/feeds/page.php?id=163276271689&format=json"; 
    
    // disguises the curl using fake headers and a fake user agent. 
    function disguise_curl($url) 
    { 
      $curl = curl_init(); 
    
      // Setup headers - the same headers from Firefox version 2.0.0.6 
      // below was split up because the line was too long. 
      $header[0] = "Accept: text/xml,application/xml,application/xhtml+xml,"; 
      $header[0] .= "text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5"; 
      $header[] = "Cache-Control: max-age=0"; 
      $header[] = "Connection: keep-alive"; 
      $header[] = "Keep-Alive: 300"; 
      $header[] = "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7"; 
      $header[] = "Accept-Language: en-us,en;q=0.5"; 
      $header[] = "Pragma: "; // browsers keep this blank. 
    
      curl_setopt($curl, CURLOPT_URL, $url); 
      curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla'); 
      curl_setopt($curl, CURLOPT_HTTPHEADER, $header); 
      curl_setopt($curl, CURLOPT_REFERER, ''); 
      curl_setopt($curl, CURLOPT_ENCODING, 'gzip,deflate'); 
      curl_setopt($curl, CURLOPT_AUTOREFERER, true); 
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 
      curl_setopt($curl, CURLOPT_TIMEOUT, 10); 
    
      $html = curl_exec($curl); // execute the curl command 
      curl_close($curl); // close the connection 
    
      return $html; // and finally, return $html 
    } 
    
    // uses the function and displays the text off the website 
    $text = disguise_curl($url); 
    
    $json_feed_object = json_decode($text);
    
    foreach ( $json_feed_object->entries as $entry )
    {
            echo "<h2>{$entry->title}</h2>";
    	$published = date("g:i A F j, Y", strtotime($entry->published));
    	echo "<small>{$published}</small>";
    	echo "<p>{$entry->content}</p>";
    	echo "<hr />";
    }
    
    /* * * * * * * * * * * * * * * * * *
     * Below is the XML version        *
     * assuming you used the XML       * 
     * format in the Facebook feed URL *
     * You'll need to uncomment to use *
     * * * * * * * * * * * * * * * * * */
    //$xml = new SimpleXMLElement($text);
    //foreach ( $feed->item as $entry )
    //{
    //    echo "<h2>" . (string) $entry->title . "</h2>";
    //    $published = date("g:i A F j, Y", strtotime($entry->pubDate));
    //    echo "<small>{$published}</small>";
    //    echo "<p>" . (string) $entry->description . "</p>";
    //    echo "<hr />";
    //}
    
    ?>
    

That’s it! Easy right? I would like to give credit to @mdlamar for providing help with this idea.