I want to display more friend avatars on the like button box when I insert the code on my website, is it possible? I got the code from this, https://developers.facebook.com/docs/reference/plugins/like/ At the moment, the box just shows 7 friend avatars at maximum.
This will depend on how many of your friends like the page. Another option you can use is to display a like box with a facepile box next to it. eg:
<div class="fb-like" data-href="https://www.facebook.com/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" style="float:left;></div>
<div class="fb-facepile" data-href="https://www.facebook.com/" data-size="large" data-max-rows="1" data-width="350"></div>
Related
I've put the fb-login-button inside a wrapper element with the same height and background so that I can make it appear to be wider than facebook allows it to be (max 400px).
This works well for the most part but I need to be able to click the wrapper to login with facebook. Is this possible? And if so how might i go about doing this?
my html:
<div class="fb-login-button-wrapper">
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="true" data-auto-logout-link="false" data-use-continue-as="true" data-width="100%"></div>
</div>
however whats actually rendered is an iframe and i believe the clickable element is somewhere in there.
I am trying to count the clicks on the Facebook like button in a modal popup.
There seems to be a problem in this part of the code:
<div class="fb-like" data-href="https://www.facebook.com/smartmommypagina/" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false" onClick="ga('send', 'event', { eventCategory: 'likebox', eventAction: 'click', eventLabel: 'like' });"></div>
Can anyone tell me what I am doing wrong? It has been hours already. Thanks.
That is what event subscriptions are for: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
edge.create and edge.remove would be the events for the like button, there is example code in the docs.
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
is it possible to change the fonts in the Facebook Like Box plugin? If there is a way to do it please tell me.
I'm busy building a website and i must change the fonts in the plugin but i can't
Did you try to put
data-font="verdana"
into this div :
<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div> ?
on my django app, I have a Facebook connect button (via django allauth). When I click that, the facebook dialog box appears. Now, i want that after login, the user is redirected to a popup (bootstrap modal) with the list of friends of the user.
I have a test function for obtaining the list of friends in my views.py and it works well. What I need is that after the facbook dialog box login, it goes to this function, gets the friendlist, and return the result in a popup on the original page.
I tried setting LOGIN_REDIRECT_URL = '/friends', which takes me to the view function and gets the friendlist, but how do I show this list in that popup? I'm using django-allauth with the bootstrap library.
Any help on this would be greatly appreciated.
load the friends page inside a modal
You can use the remote option of the modal to load the html from the friends page inside the modal. See the docs and look for remote.
Add a modal to the page where you want to show the modal:
<div class="modal hide fade" id="myModalFriends" aria-hidden="true" data-show="true">
<div class="modal-header">
<h3>Friend list</h3>
</div>
<div class="modal-body">Friend page will load here.</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Then, after successful login:
$('#myModalFriends').modal({
remote: '/friends'
});
This will load the html from your /friends page inside a modal.
open a modal box the friend page loads
If you want to show your friend list in a modal box on the friends page, you can call $('#myModal').modal(); in document ready to show it on startup; see this fiddle.