Jump to content


Photo

Mis-alignment of Social icons due to change post Title Length


  • Please log in to reply
26 replies to this topic

#1 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 09 February 2012 - 07:44 AM

This thread is in continuation to http://www.pagelines...t-title#Item_14 Another issue has popped up.. See the second last post available at the homepage of my site. http://bit.ly/w9ATGW The alignment is improper if the post title is of single line..Same is the issues if the title exceeds to three lines or even more..

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 February 2012 - 09:31 AM

Hi Mano, First thing, please don't create another topic for the same issue. It can be very confusing, a forum support mod may answer your previous topic for this issue and you may not realise it. As we have positioned it with CSS, I think the only way you're going to get perfect alignment is if all your titles are the same length, is this something that would be possible ?

#3 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 09 February 2012 - 05:34 PM

I don't agree with you Danny! How is it possible to make sure that you always write a title for two lines? This seems to be a unique Limitation with iBlogPro 5 theme...

#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 February 2012 - 05:45 PM

The limitation is you are using a fixed position from the top, so thats never going to take into account the title length. Post the code you have now and i will have a quick look. Resist the urge to start a new thread please.

#5 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 09 February 2012 - 09:08 PM

Function written to add social button at homepage

 add_action( 'the_post', 'after_post_title_social_front');
	function after_post_title_social_front () {
	if (is_home()) { ?>
	<div class="buttons-home" align="right";>
	<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=90& action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:20px;"></iframe>
	<!-- Begin Twitter Button -->
	<script src="http://platform.twitter.com/widgets.js"; type="text/javascript"></script>
	   <a href="http://twitter.com/share"; class="twitter-share-button"
	      data-url="<?php the_permalink(); ?>"
	      data-via="JAlLBREAKS"
	      data-text="<?php the_title(); ?>"
	      data-count="horizontal">Tweet</a>
	<!-- End Twitter Button -->
	<g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone>
	</div>
	<?php }
	}

CSS to align the buttons
 
	/*Social Buttons Alignment at HomePage*/
	.buttons-home {position: relative;top: 7.5em;}


#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 February 2012 - 03:43 AM

 <div class="buttons-home" align="right";>

^ Please remove the semilcolon that follows "right" in this code.

#7 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 10 February 2012 - 04:37 AM

But this doesn't helped.. Catrina, The alignment issue occurs only if the post title is of single line..or if the title exceeds to three lines or even more..

#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 10 February 2012 - 02:40 PM

Right firstly, attaching this to the top is never going to work, as you will have different post titles, and I personally do not agree with having all these social links in the post content on the post page, people have to read an article before they can like it!
But anyway, this filter does the job:
 add_filter( 'continue_reading_link_text', 'after_post_title_social_front' );
	
	function after_post_title_social_front () {
	
		if ( !is_home() )
			return;
	global $post;
	
	$link = sprintf(
		'<a class="continue_reading_link" href="%s" title="%s %s">%s</a>',
		get_permalink(),
		__("View", 'pagelines'),
		the_title_attribute(array('echo'=> 0)),
		ploption( 'continue_reading_text' )
	);
	$buttons = sprintf( '
	<div class="buttons-home">
	<iframe src="http://www.facebook.com/plugins/like.php?href=%1$s&layout=button_count&show_faces=false&width=90& action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:20px;"></iframe>
	<!-- Begin Twitter Button -->
	<script src="http://platform.twitter.com/widgets.js"; type="text/javascript"></script>
	   <a href="http://twitter.com/share"; class="twitter-share-button"
	      data-url="%1$s"
	      data-via="JAlLBREAKS"
	      data-text="%2$s"
	      data-count="horizontal">Tweet</a>
	<!-- End Twitter Button -->
	<g:plusone size="medium" href="%1$s"></g:plusone>
	</div>', urlencode(get_permalink($post->ID)), the_title() );
	
	return $link . $buttons;
	}

And some css:
 /*Social Buttons Alignment at HomePage*/
	.buttons-home {float:right;}


#9 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 11 February 2012 - 10:06 AM

It has completely gone wrong...The button count is coming incorrect for all three buttons and the space between two posts has become zero...

#10 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 11 February 2012 - 03:17 PM

i messed up the g+ line should be:
 <g:plusone size="medium" href="%1$s"></g:plusone>


#11 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 11 February 2012 - 05:58 PM

I don't see any difference in the code you have posted now.. Old code new code This is getting me crazy...Can you please provide me correct working code...??

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 February 2012 - 06:11 PM

I will mention this to Simon so that he can provide a code (it was probably a typo).

#13 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 12 February 2012 - 05:47 AM

Simon, I am still waiting for your reply on this issue

#14 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 12 February 2012 - 02:45 PM

I edited my code, and gave you the change, of couse its going to look the same, i edited my own post!

#15 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 12 February 2012 - 03:33 PM

 add_filter( 'pagelines_excerpt', 'after_post_title_social_front' );
	add_action( 'wp_head', create_function('','echo "<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>";'));
	function after_post_title_social_front ( $excerpt ) {
	
		if ( !is_home() )
			return;
	
	$buttons = sprintf( '
	<div class="buttons-home">
	<iframe src="http://www.facebook.com/plugins/like.php?href=%1$s&layout=button_count&show_faces=false&width=90& action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:20px;"></iframe>
	<!-- Begin Twitter Button -->
	<script src="http://platform.twitter.com/widgets.js"; type="text/javascript"></script>
	   <a href="http://twitter.com/share"; class="twitter-share-button"
	      data-url="%1$s"
	      data-via="JAlLBREAKS"
	      data-text="%2$s"
	      data-count="horizontal">Tweet</a>
	<!-- End Twitter Button -->
	<g:plusone size="medium" href="%1$s"></g:plusone>
	</div>', get_permalink(), get_the_title() );
	
	return $excerpt . $buttons;
	}


#16 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 12 February 2012 - 04:25 PM

Simon, It is NOT WORKING!! Both twitter and Google Plus button are not returning correct values + Lots of Layout Issue... "no SPACE" between post + Lookout the 7th Post You can check out the homepage Simon, Its been 3 days but still I am waiting for the correct code...

#17 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 12 February 2012 - 04:47 PM

Just remove the urlencode()
 </div>', get_permalink(), get_the_title() );

As for the position, add some top padding to the div.

#18 gobyfish

gobyfish

    Newbie

  • Members
  • 7 posts
  • Framework Version:PageLines 2.3.5
  • Country: Country Flag

Posted 12 February 2012 - 05:00 PM

Brilliant, Pross. Just what I needed! You guys are top-notch!

#19 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 13 February 2012 - 04:49 AM

Simon, The Like button is scrolling with redundant text....How to get rid of it? Also..I Would be really thankful if you can suggest me the right div code for top padding, you suggested me.. Regards MG

#20 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 13 February 2012 - 02:13 PM

Is there someone who can help me??