Docs

[t3wy_foundation]

Hi there,
First, I am kind of new to WordPress (learning fast, though)

What I would like to do is have a Facebook “like” (and/or “share” button at the bottom of every page on my website, so people can like or share that particular website page.
I don’t want to use the Facebook plugin for WordPress.
I did manage to place a like button in my sidebar (so people can like our Facebook page), but how to go about it to have the same result on every page (always!) without using the plugin?

I use theme X “Renew” on my website http://www.t3wy.org

Thanks in advance!
Marcel

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy _content-post-footer.php file from framework -> views -> renew and put it in the same path inside child theme, Now replace existing code with this:

<?php

// =============================================================================
// VIEWS/RENEW/_CONTENT-POST-FOOTER.PHP
// -----------------------------------------------------------------------------
// Standard <footer> output for various posts.
// =============================================================================

?>
<div class="x-container max width offset">
<?php echo do_shortcode('[share title="Share this Post" facebook="true"]'); ?>
</div>
<?php if ( has_tag() ) : ?>
  <footer class="entry-footer cf">
    <?php echo get_the_tag_list( '<p><i class="x-icon-tags"></i> Tags: ', ', ', '</p>' ); ?>
  </footer>
<?php endif; ?>

X doesn’t provide shortcode for facebook like, if you need that as well please use 3rd party plugin.

Hope it helps.

[t3wy_foundation]

Thanks,
I will stick with Facebook plugin for the moment, until I am more at ease with repealing code and making child themes 🙂

[Darshana]

Sure, you’re welcome :). Also let us know if you need any further assistance.

Thanks!

[t3wy_foundation]

So, I installed a child theme after all 🙂

Somewhere in this forum I found that a way to load Facebook’s SDK; I had to add this to the X-theme’s child functions.php:

add_action( ‘x_before_site_begin’, ‘x_print_fb_sdk’ );
function x_print_fb_sdk(){
?>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=your_FB_ID&version=v2.3”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<?php
}

Now, if I add facebook’s code for the share and like button manually to every page, things work perfectly. However: that would mean a lot of (extra) work.

Obviuosly, for a different website, using a different theme, I had the same challenge to solve.

They came up with this solution to add to their Child’s functions.php which automatically added the desired like and share buttons to the pages:

add_filter( ‘the_content’, ‘kt_facebook_code_after_content’ );

function kt_facebook_code_after_content( $content ) {

$facebookcode = ‘<div class=”fb-like” data-width=”400″ data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”> </div>’;

$content = $content . $facebookcode;

return $content;
}

I was wondering if a similar solution would work for X theme as well and if so, what would be the code?

Thanks in advance!

Marcel

[Thai]

Hi There,
You can use that code, but need to revise a bit:

add_filter( "the_content", "x_facebook_code_after_content" );
function x_facebook_code_after_content( $content ) {
  global $post;
  $like = ' <div class="fb-like" data-href="'.get_permalink( $post->ID ).'" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>';
  $share = ' <div class="fb-share-button" data-href="'.get_permalink( $post->ID ).'" data-layout="button_count"></div>';

  $content = $content . $like . $share;
  return $content;
}

For more information about Facebook Like / Share buttons, please take a look at these links:
https://developers.facebook.com/docs/plugins/like-button
https://developers.facebook.com/docs/plugins/share-button

Hope this helps.

[t3wy_foundation]

Thanks a lot!
Will try it later on and get back to you with the results!

Best,
Marcel

[t3wy_foundation]

Worked like a charm!

Thanks a lot!

Now I’m about ready to go “live”

[Thai]

You’re most welcome.

[rsmith4321]

I must be missing something, in the code you provided for the functions.php I can’t see where the Facebook sdk is being loaded. Also, I would like to place the like button only on blog posts above the content and below the post title if possible. Thanks.

[rsmith4321]

I actually figured out how to do exactly what I wanted, unless you know of some way this will cause an issue. Perhaps this will helps others. I modified the /views/icon/content.php to be like this.

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
      <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
      <!-- Facebook Like -->
      	<div id="fb-root"></div>
				<script>(function(d, s, id) {
				  var js, fjs = d.getElementsByTagName(s)[0];
				  if (d.getElementById(id)) return;
				  js = d.createElement(s); js.id = id;
				  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=114137965287766";
				  fjs.parentNode.insertBefore(js, fjs);
				}(document, 'script', 'facebook-jssdk'));</script>
				<?php if ( is_single() ) : ?>
				<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
				<!-- Please call pinit.js only once per page -->
				<script type="text/javascript" async defer  data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
				
				<div style="padding-bottom: 5px"></div>
				<?php else : ?>
				<!-- Nothing -->
				<?php endif; ?>
			<!-- End -->

      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  </div>
</article>

[Rad]

Nice! Thanks for sharing, and that’s helpful 😉

[Author]

Posts