I'm using Gallerific with history plugin. In the while loop where I print all the images I want to add a facebook share button for each image using the specific image-url given by the history-plugin.
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
$images=mysql_query("SELECT filename FROM images etc.");
while ($row = mysql_fetch_array($images)) {
<li><a class='thumb' name='imagename' href='url-to-image' title='description' onclick='clickedThumbnail()'><img src='url-to-thumb' alt='".$row['comment']."'/></a>
<div class='caption'>
<a name=\"fb_share\" type=\"button_count\" share_url=\"http://url-to-image-made-by-the-history-plugin\">Share</a>
</div>
}
My problem is that it is only printing the facebook share button once. In the first while-loop. On the rest of the images it is printing the content of the <a>-tag ('Share') with the right attributes, but it is not clickable. I've tried without 'share' in the <a>-element but then I get nothing on the other images. But I always get the correct FB-button on the first image.
According to developers.facebook.com I only have to include the javascript once even though I'm using several Facebook buttons on one page.
I have also tried to put several facebook-buttons outside the while-loop and it works fine.
Also, when I type the direct url to the images given by the history plugin it works fine. So my conclusion is that is has to do with printing the facebook-buttons from a while-loop..?
I used this approach instead http://developers.facebook.com/docs/reference/javascript/FB.ui/
by changing some variables dynamically for each image. Works like a charm!
Thanks for the comments.
That plugin is deprecated. See: http://developers.facebook.com/docs/share/
You will want to use the share functionality that is part of the like button. See: http://developers.facebook.com/docs/reference/plugins/like/
Related
On the « Like Button » developer page, i can only get code for these 4 combinations :
1) like
2) recommend
3) like + share
4) recommend + share
source : https://developers.facebook.com/docs/plugins/like-button
I just want to have a share button. Is it possible ?
I've tried this but it does'nt work of course :
<div class="fb-like" data-layout="button" data-action="share" data-show-faces="false" data-share="false">
I’ve seen in the past that share button was deprecated but it seems that i can still use it :
https://developers.facebook.com/docs/plugins/share-button
But the design of the share button seems to be old and not up to date.
so, we are in 2014 july.
Is it possible to have a share button with the same design of the like button ?
I know this type of question have been posted on stackoverflow but facebook API is constantly changing so we need a recent answer.
One solution would be to use the Share Dialog of the JavaScript SDK with a custom Share Button: https://developers.facebook.com/docs/sharing/reference/share-dialog
You can use any Button/Image you want for that.
You could also try changing the layout parameter, it looks like the default is "icon". Try with "button" instead.
Edit: I just tried changing the layout parameter, it is definitely the problem. The default is not "button_count" as mentioned in the docs, it is "icon".
Here´s a working example with "button" as layout:
<div class="fb-share-button" data-href="https://xxx" data-type="button"></div>
I´ve filed a bug for this on Facebook.
Is it possible to add a button like the nice one done by ThinkingStiff in the example here ?
That one is designed to be used on Tumblr pages. I'd like to get the same functionality on a page that is outside of Tumblr.
Yes, I already have a method to get the {ReblogURL} and the {PostID} values it needs.
Thanks for your help!
Ah, solved myself. Just replace {ReblogURL} and {PostID} in original code:
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"></div>
with the new vars (from whichever method you use to get them) and replace that div.
Example:
<div class="my-like" data-reblog="3Pbn6aNA" data-id="12345678901" title="Like"></div>
Note: Those vars are not a live Tumblr post.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
I've been desperately seeking a way to disable the facebook social text right next to the "Recommend" button. Is it possible, to simply render a "Recommend" button, without anything else (no counter, no text, JUST the button)?
The problem is, CSS wont be applied since all the elements are inside the iframe, so I cant just hide the element itself using CSS (which in this case would be a td).
Also, I cant just put everything in a div and give it overflow:hidden and a fix width, since the pop up which appears when actually clicking the "Recommend" Button would then not be fully visible.
My current implementation comes via AddThis:
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="none" fb:like:action="recommend" fb:like:width="10"></a>
Any ideas?
Thanks
Alex
Facebook polcy IV 4 d:
You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.
So if you can't do it by using their like button creation tool you shouldn't do it.
Using the Add This Facebook Like button you can avoid the count using this attribute
fb:like:layout="button"
So in your case you would have
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="button" fb:like:action="recommend" ></a>
"Recommend" with a counter comes closest to your request. I too don't like the social text (e.g. "57 people like this. Be the first of your friends"), yet I do like the naked counter. The code that I use is:
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend" fb:like:width="135"></a>
See AddThis own documentation here.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps