Solved

RSS Feed not displaying Facebook Like

Posted on 2011-09-16
2
481 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 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

691 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