13 replies to this topic

[manojgupta26]

Adding Social buttons below the Post title is the most common requirement and I don't think iBlogPro 5 provides a way to add twitter, facebook, Google+ buttons. Can you guys tell me what should I do to add those buttons? I tried using the following function in functions.php of pagelines customize plugin but the alignment is not proper. Site URL: http://bit.ly/w9ATGW http://img10.imageshack.us/img10/3043/iblogproerror1.png add_action('pagelines_loop_before_post_content', 'after_post_title_social'); function after_post_title_social() { if (is_single()) { ?>

" data-via="JAlLBREAKS" data-text="" data-count="horizontal">Tweet

[Danny]

Hi Mano, Would it be possible for you to try using the "the_post" hook location instead of "pagelines_loop_before_post_content" and then reply here when you have done so. You may need to then position it with CSS.

[manojgupta26]

I have now called the hook 'the_post'. but now the button appears above the post-title. I want to add the twitter button in metabar http://img10.imagesh...ogproerror1.png

[Jenny]

I recommend installing the Action Map plugin from the PageLines Store. This will show you all hook areas live on your site. After installing, you activate it through the admin bar at the top of your live site to see the hook locations.

[manojgupta26]

Simple_mama, This is general answer I would appreciate if you can tell me what code should I write and where.. Since the iBlogPro 5 theme is standard, it should not be rocket science for you.

[Jenny]

Okay.... Put the hook back how you had it and then position it with CSS as Danny stated above. It looks like your twitter button has inline styling so you can position it using a margin-top negative value.

[manojgupta26]

This works well on single post but not on home page...Can you suggest me how can I achieve that?

[catrina]

I think you'll need to use one hook for displaying the buttons on the homepage and another hook for adding it on the single post page so that the buttons in each hook can use different CSS (i.e. be in different DIV layers). You can hide the DIV layer for the buttons in the homepage using CSS that can hide it ONLY on the homepage and the same can be done in the single post page. For example:

Code for buttons on homepage:

 <div class="buttons-home">BUTTON CODE</div>

Code for buttons on single post page:

 <div class="buttons-single">BUTTON CODE</div>

CSS for hiding homepage buttons on single post page:

 body.home div.buttons-home {display: none}

CSS for hiding single post buttons on homepage:

 body.SELECTORFORSINGLEPOSTHERE div.buttons-single {display: none;}

[manojgupta26]

Not Working. I used the following function under the DIV layer as sugested by you.

 add_action('pagelines_loop_before_post_content', 'after_post_title_social_h');
	function after_post_title_social_h() { ?>
	<div class="buttons-home" align="right" style="margin: -55px 0 0;>
	<!-- 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
	}

[Simon_P]

Use a different action for the front page, like Catrina said. pagelines_loop_before_post_content will only work on a post_content page/post, it will never work on the main blog index page.

 add_action( 'the_post', 'after_post_title_social_front');
	
	function after_post_title_social_front() {
	
		if ( !is_home() )
			return;
	
	<!-- your code here -->
	
	}

[manojgupta26]

But the function shows the buttons at wrong position. I want to render the buttons at this position as shown in image..

http://img717.images...terbuttongb.png

 add_action( 'the_post', 'after_post_title_social_front');
	function after_post_title_social_front () {
	if (is_home()) { ?>
	<div class="buttons-home" align="right";>
	<!-- 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 }
	}

[Danny]

Hi,

Can you add this to your custom css and see if this works please.

 .buttons-home {position: relative;top: 9em;}

[manojgupta26]

Voila! That was a life saviour

[manojgupta26]

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..