CSS for Facebook link?

[williln]

It looks like the Facebook widget is starting to include the cover page, but that's bleeding into the Twitter "follow" link in Chrome. This is happening on both the /portland and /djangoconus pages.

[aniav]

The footer HTML content is controlled by you (the event organiser, that is), and the fb-box appearance is controlled by facebook scripts so I don't think we can do anything with this. Additionally I have just checked both pages and it looks ok to me. What web browser do you use?

[williln]

I'm using Chrome, and I also see the problem in other pages I don't manage. This is Brisbane:

This is the Brisbane code (from view source) :

<div id="footer" class="with-background" style="background-image: url(https://djangogirls.s3.amazonaws.com:443/event/backgrounds/footer2.jpg)">
        <div class="overlay">
              <div class="container">
                  <div class="row social">
                      <div class="col-md-7">
                          <div class="facebook">
                              <div class="fb-like-box" data-href="https://www.facebook.com/djangogirls" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false">
                             </div>
                         </div>
                         <div class="twitter"> 
                             <a href="https://twitter.com/djangogirls" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @djangogirls</a>
                         </div>
                         <div class="twitter"> 
                             <a href="https://twitter.com/djangogirlsau" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @djangogirlsAU</a>
                        </div> 
                    </div>
                    <div class="col-md-5">Get in touch: <br> 
                        <a href="/cdn-cgi/l/email-protection#761e131a1a1936121c17181119111f041a0558190411">
                            <span class="__cf_email__" data-cfemail="274f424b4b4867434d46494048404e554b5409485540">[email&#160;protected]</span>

This is the Portland code (copied from the admin) :

<div class="row social">
<div class="col-md-7">
<div class="facebook">
<div class="fb-like-box" data-href="https://www.facebook.com/djangogirlsPDX" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false">
</div>
</div>

<div class="twitter"> 
<a href="https://twitter.com/djangogirlsPDX" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @djangogirlsPDX</a>
</div> 
</div>

<div class="col-md-5">Get in touch: <br> 
<a href="mailto:portland@djangogirls.org">portland@djangogirls.org</a><br><br>
</div>

</div>

<div class="row credits">
<div class="col-md-12">♥ Django Girls PDX is organized by 
<a href="http://twitter.com/laceynwilliams">Lacey Williams Henschel</a> and 
<a href="http://twitter.com/kennethlove">Kenneth Love</a> <!--with the support from <a href="http://europython.eu/">EuroPython 2014</a> -->.<br>Django Girls PDXis a part of 
<a href="/">Django Girls</a>.<br>Every participant needs to follow the 
<a href="/pages/coc/">Code of Conduct</a>.
</div>
</div>

I am pretty sure that this section and all its classes comes with the site, and all we had to do was fill in the email addresses and links. But the footer suddenly is broken in Chrome on a Macbook.

[olasitarska]

Yeah, I believe that Facebook just changed how this boxes are displayed. We need to see if there is a way to change the way how this widget looks like.

[olasitarska]

I think the correct code for this widget should now look like this:

<div class="fb-page" data-href="https://www.facebook.com/djangogirls" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/djangogirls"><a href="https://www.facebook.com/djangogirls">Django Girls</a></blockquote></div></div>

Reference. This also means we should change it in all footers... This will require some clever regex, right?

[williln]

If this is helpful, this code I put in the admin:

<div class="row social">

<div class="col-md-4">
<div class="facebook">
<div class="fb-page" data-href="https://www.facebook.com/djangogirlspdx" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false">
<div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/djangogirlspdx"><a href="https://www.facebook.com/djangogirlspdx">Django Girls</a></blockquote>
</div>
</div>
</div>
</div>

<div class="col-md-4">
<div class="twitter"> 
<a href="https://twitter.com/djangogirlsPDX" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @djangogirlsPDX</a>
</div> 
</div>

<div class="col-md-4">Get in touch: <br><a href="mailto:portland@djangogirls.org">portland@djangogirls.org</a>
</div>

</div>

Produces this result:

Not 100% (not totally centered), but not overlapping!