How to add facebook page plugin code above post entry header?

Support
#1

Hello,

How could I add facebook page plugin code above all post entry header?

[details=Summary]
Website:


[/details]

Lukas

#2

Hello There,

Thanks for writing in!

Since your child theme is set up, please add the following code in your child theme’s functions.php file

// Custom content code before post title
// =============================================================================
function add_custom_code(){ ?>
  <?php if ( is_single() ) : ?>
   <div class="custom-code">
     <p>You can add the code here.</p>
   </div>
  <?php endif; ?>
<?php }
add_action('x_after_view_integrity__content-post-header', 'add_custom_code');
// =============================================================================

This code will add a custom content right before the Post Title.

We would loved to know if this has work for you. Thank you.

#3

Hello,

Thank you for the code. It did add facebook plugin on all post pages. However, facebook plugin is still displayed below entry header H1 of the post. I would like facebook page plugin to be displayed above post H1

Lukas

#4

No worries. Silly me. Figured it out changed your code to add_action(‘x_before_view_integrity__content-post-header’, ‘add_custom_code’);

Thank you!

#5

You’re welcome.

#6

Hello,

I have one more question about facebook page plugin.
I like the way it looks on all devices, except mobile phones 480px and smaller, plugin does not adapt to container and some of it is hidden on phone screen.

Here is my iframe code:
iframe src=“https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmhealth.lt%2F&tabs&width=500&height=70&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=1771757219728600” width=“500” height=“70” style=“border:none;overflow:hidden” scrolling=“no” frameborder=“0” allowTransparency=“true”>

As you can see I chose width 500px and adapt to container width option. However plugin does not adapt to mobile phone container.

How can I resize width of this facebook page plugin on mobile screens?

Summary

Website:

Summary

https://www.mhealth.lt/aromaterapija/eteriniu-alieju-difuzoriai/

Thanks,

Lukas

#7

Hi Lukas,

On your Embed code above, please add a style="width: 100%; max-width: 500px;" on the <iframe> tag.

e.g.

<iframe style="width: 100%; max-width: 500px;" src="">

Thanks,

#8

Hello Friech,

Thanks for response. Code did not work.

Changed code with your suggestion the code now looks like this:
< iframe style=“width: 100%; max-width: 500px;” src=“https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmhealth.lt%2F&tabs&width=500&height=70&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=1771757219728600” width=“500” height=“70” style=“border:none;overflow:hidden” scrolling=“no” frameborder=“0” allowTransparency=“true”>< /iframe>

Still when looking on smartphones plugin does not adapt to screen size.

Lukas

#9

Hi Lukas,

Please clear your mobile’s cache, the Facebook widget is responsive on my end now (https://prnt.sc/gzebw8), unlike the last time I’ve check it.

Thanks,