?
Solved

RSS Feed not displaying Facebook Like

Posted on 2011-09-16
2
Medium Priority
?
484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

752 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