CODEWITHSUNDEEP
phpcssfacebook
bosslee
bosslee

Reputation: 159

Facebook comment formatting

I added the Facebook comment code in to a Wordpress comment

<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>

The result is what I wanted, but the styling is not.

Here's site and a screenshot:

enter image description here

As you can see from the image. the text for "1656 Awesome Words" is smaller than "Description" & "Additional Information"

How can I make the font sizes the same?

Upvotes: 0

Views: 708

Answers (1)

chris
chris

Reputation: 36937

<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>

Above your original code...

Below a minor alteration

<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</div></a></li>
<br>
<?php endif; ?>

inside your li and a tags you open a div tag "fb-root" but you are not closing it before closing the a and li tags. Thus having a broken tag, this may or may not be part of the issue directly but having broken unclosed tags can sometimes result in adverse undesired effects.

Also Im gonna take a wild guess and assume you have multiple div's with the ID fb-root on your page, which may also be causing conflict. However all in all. It being in the fb-root div, the facebook styling is overriding your styling as FB loads its styling after page load. So your comment tag is inheriting its styling rather than your initial styling. Facebook through that javascript you include for it, is basically rewriting the css/style properties of all elements within the fb-root div after its loaded into the DOM.

Upvotes: 1

Related Questions