Solved

RSS Feed not displaying Facebook Like

Posted on 2011-09-16
2
466 Views
Last Modified: 2012-05-12
Hello experts!

I followed this tutorial to create a tab system that displays 3 RSS feeds. At the end of each article, I've included the Facebook Like and Send buttons. The issue is that the first tab correctly displays the Like/Send buttons but the 2nd and 3rd tabs do not.

How can I get the 2nd and 3rd box to correctly display the Facebook buttons?

I've attached the code for the tab page and the php for getting the RSS.

Also, here are screenshots of the box. The first tab displays correctly but the 2nd and 3rd do not.
First tab working correctlySecond tab does not show FB Like buttonThird tab does not show FB Like button
//socialnewsroom.php
<!-- Body Left Styles width: 590px; height: 820px; float: left; margin: 25px 0 25px 0; -->
<div id="body_left" class="rounded_corners">            	
   <h3>Social Media News Room</h3>

	<div id="fb-root"></div>
	<script>
      (function(d){
         var js, id = 'facebook-jssdk'; 
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); 
			js.id = id; 
			js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js#appId=287371014613771&xfbml=1";
          d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
   </script>   	
   
   <hr />
   <script>
	    function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
  
			 for (var i=1; i < number+1; i++) {  
				document.getElementById(content_prefix+i).style.display = 'none';  
				document.getElementById(tab_prefix+i).className = '';  
			 }  
			 document.getElementById(content_prefix+active).style.display = 'block';  
			 document.getElementById(tab_prefix+active).className = 'active';      
		  
		}
	</script>

    <div id="tabbed_box_1" class="tabbed_box">  
        <h4>Browse Site <small>Select a Tab</small></h4>  
        <div class="tabbed_area">  
      
            <ul class="tabs">  
                <li>
                   <a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">
                   Inman News
                   </a>
                </li>  
                <li>
                	<a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">
                  Daily RE News
                  </a>
                </li>  
                <li>
                	<a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">
                  Tech Savvy Agent
                  </a>
                </li>  
            </ul>   
      
            <div id="content_1" class="content">  
                <ul>  
                    <li>
						  <?php
							displayFeed("http://feeds.feedburner.com/inmannews");
						  ?>
						  </li>  
                </ul>  
            </div>  
            <div id="content_2" class="content">  
                <ul>  
                    <li>
						  <?php 
							  displayFeed("http://feeds.feedburner.com/DailyRealEstateNews?format=xml");						
						  ?>
                    </li>  
                </ul>  
            </div>  
            <div id="content_3" class="content">  
                <ul>  
                    <li>
						  <?php 
							  displayFeed("http://techsavvyagent.com/feed/");  						  
						  ?>
                    </li> 
                </ul>  
            </div>  
      
        </div>  
      
    </div>    

</div>

Open in new window

//getrss.php
<?php
	function parseRSS($xml)
      {
         echo "<strong>".$xml->channel->title."</strong><br /><br />";
         $cnt = count($xml->channel->item);
         for($i=0; $i<$cnt; $i++)
         {
            $url 	= $xml->channel->item[$i]->link;
            $title 	= $xml->channel->item[$i]->title;
            $desc = $xml->channel->item[$i]->description;
            
            echo '<a href="'.$url.'">'.$title.'</a><br/ >'.$desc.'';
            echo '';
            echo '
				<br />
            <div class="fb-like" 
					data-href="' . $url . '" 
					data-send="true" 
					data-width="450" 
					data-show-faces="false" 
					data-font="arial">
				</div><strong></strong><br />			
				<hr />
            ';
         }
      }//end parseRSS
	
	function displayFeed($url) {		
		
      //Code from http://ditio.net/2008/06/19/using-php-curl-to-read-rss-feed-xml/
      $ch = curl_init($url);
      
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($ch, CURLOPT_HEADER, 0);
      
      $data = curl_exec($ch);
      curl_close($ch);
      
      $doc = new SimpleXmlElement($data, LIBXML_NOCDATA);                  
		
		//print_r($doc);
      if(isset($doc->channel))
      {
          parseRSS($doc);
      } else {
         echo 'There was an error parsing the RSS feed. Please contact your online specialist.';	
      }
		
	}//end displayFeed
	function test() {
		echo 'testing function';	
	}
?>

Open in new window

0
Comment
Question by:spoggles
  • 2
2 Comments
 
LVL 3

Expert Comment

by:dkellner
ID: 36556490
Try adding some BRs, maybe the FB buttons are only hiding.  I can see no reason for them not to be there.  If BRs help, you can remove them and find a real CSS way to fix the problem - like encapsulating the buttons in some outer div or stuff.
0
 
LVL 3

Accepted Solution

by:
dkellner earned 500 total points
ID: 36556502
Oh yes, there they are! I can see them now.  The top of the buttons.  They're just overlapped which means some strange CSS rule has been applied to "fb-like".  As I said, give it an outer DIV or custom styles to prevent hiding.  And one more note - different browsers may behave differently at this point.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question