Jump to content


Photo

Twitter, Facebook Button in Metabar Below Post Title


  • Please log in to reply
13 replies to this topic

#1 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 06 February 2012 - 05:50 AM

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()) { ?>

#2 Danny

Danny

    Is Awesome!

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

Posted 06 February 2012 - 09:33 AM

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.

#3 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 06 February 2012 - 10:11 AM

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

#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 February 2012 - 03:50 PM

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.

#5 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 06 February 2012 - 04:04 PM

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.

#6 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 February 2012 - 04:13 PM

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.

#7 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 06 February 2012 - 05:40 PM

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

#8 catrina

catrina

    Advocate

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

Posted 07 February 2012 - 03:16 AM

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;}


#9 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 07 February 2012 - 05:11 AM

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
	}


#10 Simon_P

Simon_P

    Messer

  • Administrators



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

Posted 07 February 2012 - 05:38 AM

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


#11 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 07 February 2012 - 07:11 AM

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


#12 Danny

Danny

    Is Awesome!

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

Posted 07 February 2012 - 01:31 PM

Hi,

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

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


#13 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 07 February 2012 - 02:19 PM

Voila! That was a life saviour

#14 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 09 February 2012 - 07:41 AM

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