Facebook likebox in Share buttons

  • Resolved because i

    (@matrixpoland)


    7 years, 1 month ago

    Custom code:

    <div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v3.2"></script>

    and

    <div class="fb-page" data-href="https://www.facebook.com/swiadomosczwiazkow/" data-tabs="messages" data-width="330" data-height="200" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/swiadomosczwiazkow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/swiadomosczwiazkow/">Swiadomosc-zwiazkow.pl: Inne spojrzenie nt. relacji damsko-męskich</a></blockquote></div>

    How to add this to work properly with other icons which you can see in my URL? At now it is aligned to left, and how to do that it would be in center but below other icons?

    • This topic was modified 7 years, 1 month ago by because i.
    • This topic was modified 7 years, 1 month ago by Jan Dembowski. Reason: Fixed formatting
    • This topic was modified 7 years, 1 month ago by because i.
    • This topic was modified 7 years, 1 month ago by because i.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author vaakash

    (@vaakash)

    7 years ago

    Please add a new row and add the custom HTML button to that row.
    Once added please let me know.

    Thread Starter because i

    (@matrixpoland)

    7 years ago

    It’s added

    I tried

    <div style=”text-align:center”>

    But this don’t look good i think

    ==
    I noticed now that when I add the fb likebox button with the “Adapt to plugin container width” option, the whole right sidebar is moved down. I would ask you for a code to make it work only on mobile to adapt width to container to suite small mobile phones and not ruin right sidebar on pc

    Actually i deleted adapt to plugin containter widht option and set wight to 330 and height to 200. On PC it is ok and don’t ruin right sidebar but on mobile these numbers are too much

    See http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://swiadomosc-zwiazkow.pl/zagadka-wybrednosci-kobiet/

    This is actuall code (as i said it looks good on PC)

    <div class="fb-page" data-href="https://www.facebook.com/swiadomosczwiazkow/" data-width="330" data-height="200" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/swiadomosczwiazkow/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/swiadomosczwiazkow/">Swiadomosc-zwiazkow.pl: Inne spojrzenie nt. relacji damsko-męskich</a></blockquote></div>

    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    Plugin Author vaakash

    (@vaakash)

    7 years ago

    I tried text-align:center by adding the below CSS and it looks good to me.

    .wpsr-buttons.wpsr-row-2{
    text-align: center;
}

    https://i.snag.gy/UOKdih.jpg

    Regarding 200px phones. Please look into the analytics of your website users and see if users use 200px width mobile phones. The size is already very small and I guess there is no need to worry for 200px width.

    Also please note that, these codes are added by you on your own apart from the plugin.
    So I guess it would be difficult to provide suggestion/customization script for every individual user as per their requirement as it is beyond the scope of the plugin. Hope you understand.

    Thread Starter because i

    (@matrixpoland)

    7 years ago

    This is not small likebox

    View post on imgur.com

    Resolutions are 360×640

    Plugin Author vaakash

    (@vaakash)

    7 years ago

    This looks like a restriction with Facebook like box itself.

    I am not able to make it responsive, make it 100% width.

    Thread Starter because i

    (@matrixpoland)

    7 years ago

    But you can somehow do that on mobile phones (or on low resolutions) to enable other code:

    <div class="fb-page" data-href="https://www.facebook.com/swiadomosczwiazkow" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/swiadomosczwiazkow" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/swiadomosczwiazkow">Swiadomosc-zwiazkow.pl: Inne spojrzenie nt. relacji damsko-męskich</a></blockquote></div>

    This is for mobile (with option enabled “adapt to container”

    And for desktop i have without adapting to container…

    I think you may create some custom CSS for that?

    And maybe this to work

    <div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v3.2"></script>
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    • This reply was modified 7 years ago by because i.
    Thread Starter because i

    (@matrixpoland)

    7 years ago

    One more thing. I temperarly disabled your plugin and my bounces rate in google analytics decreased by 10-15%.

    Maybe because this is slowing the page when is used above the content. I don’t know.

    • This reply was modified 7 years ago by because i.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Facebook likebox in Share buttons’ is closed to new replies.