How to add Facebook like button to upPrev box?

You can use iworks_upprev_box_item filter, to modify item element.

<?php
add_filter( 'iworks_upprev_box_item', 'iworks_upprev_box_facebook_like' );
function iworks_upprev_box_facebook_like($content)
{
    /**
     * change this for your data
     */
    $appId = 279100175534801;
    $like_page = site_url();

    ob_start();
?>
<hr />
<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/<?php echo get_locale(); ?>/all.js#xfbml=1&appId=<?php echo $appId; ?>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</>
<div class="fb-like" data-href="<?php echo $like_page; ?>" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
<?php
    $content .= ob_get_contents();
    ob_end_clean();
    return $content;
}

Get code: upprev_add_fb_like_to_box.php

Where to put this code?

There are three ways:

  1. made a one-file-plugin and put file into wp-content/plugins, then turn it on
  2. made a one-file-plugin and put file into wp-content/mu-plugins
  3. put this code into functions.php in current theme

I recommend using option 1 or 2, but 3 is the easiest.

16 thoughts on “How to add Facebook like button to upPrev box?”

  1. Hi, Marcin

    I’m trying to add a flyout facebook like box on my website. And I find your plugin. It’s what I am looking for.But I got some problem while using it. I don’t know how to set it correctly. I mean I don’t know how to put facebook like box into upPrev. Just like this one.

    http://www.viralspell.com/chained-up-behind-a-wal-mart-and-left-for-dead-in-the-bitter-cold-this-dog-chewed-off-her-paw-as-she-tried-to-escape/

    Sorry for my bad English, if you have no idea what I am talking about.please check the link. and scroll it down to the bottom. He use your plugin to show facebook like box. That’s what I wanted !

    Thanks for your patience.

    Reply

      1. Hi, Marcin

        Thanks for your fast reply.

        Before I commented here. I’ve followed option 1 and tried to sort things out. After I updated the one-file plugin and activated it,the box still showed previous article,not facebook box. Did I miss something?

        You mentioned “use iworks_upprev_box_item filter, to modify item element” does it mean I should change some parameters on upPrev after updating the one-file plugin? Or, just update the file and leave everything else default?

        Reply

        1. Dear Ralf,

          Filters in WordPress allow to change value witch is filtered ;-) – that means you can modify any input and replace by any output, and this example replace upPrev content to FB content.

          Yes, all default except FB application ID.

          Cheers,
          Marcin

          Reply

          1. Hi,Marcin

            Thanks for your support. But because I have no idea how to use filters in wordpress, I failed in add facebook like box. My bad ;-( . I will learn more about filters and then keep working on adding facebook like box to upprev. I’ll give you a notify when i have further steps.Again, thanks for your fast support and nice free plugin.(I make a donation to you, not much, but wish you have a nice day)

  2. Hello Marcin, Ralf,

    First of all than you Marcin for the great upPrev pluggin, this is genious popup you ve developped ! Congrats !

    I am also really interested into implementing the same Facebook Like Box using UpPrev on to my website…

    Ralf did you figure out how to do it ?

    Thank you.

    Baps

    Reply

  3. mam na jednej ze stronek bardzo długa stopkę i tabelka z prev post wczytuje mi się dużo za nisko. Margines zdaje się jest ustawiony na 5px. Co zrobić żeby wyświetlała się w wybranym miejscu? powiedzmy na koncu artykułu?

    Reply

  4. Witam! Mam pytanie – czy da się w prostu sposób zrobić, aby likebox pokazywał liczbę “lajków” dotyczącą posta (adresu url), który wyświetla się w boxie powyżej? Bo aktualnie pokazuje liczbę lajków do strony głównej/domeny…

    Reply

      1. W miejscu, gdzie jest “data-href=””” lub inaczej, zamiast “$like_page = site_url();” trzeba podać adres url do strony/posta/artykułu, do której odsyła box (czyli nastepny post np.). Da się to jakoś zgrabnie połączyć? :)

        Reply

          1. Ok, to dla potomnych, w upprev.php:
            po tym:

            $permalink = sprintf(
            '%s%s%s',
            $url_prefix,
            get_permalink(),
            $url_sufix
            );

            dodajemy:

            $permalinkfb = sprintf(
            get_permalink()
            );

            (zrobiłem to w takim celu, że $permalink trzyma url do postu z sufixem i prefixem, a ja używam tego to dodania ?utm_campaing dla GA :)
            Do tego pod tym:

            $item .= '';
            }
            $item .= '';

            dodajemy:

            $item .= '';
            $item .= '';
            $item .= '';

            i o ile na stronie używamy już jakiejś wtyczki FB, to nie musimy ładować js’a FB ani tworzyć diva rootowego, wszystko przecież mamy, więc to wystarczy i działa :)

Leave a Reply

Your email address will not be published. Required fields are marked *