Solved

RSS Feed not displaying Facebook Like

Posted on 2011-09-16
2
460 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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

762 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now