I want to add one a small facebook button to my website, something like this:
or
I can work out how to get a 'Like Box' or 'Page badge' on the facebook help pages, but I'd rather have a smaller, neater little button.
Try and explain slowly and clearly- I'm not a programmer!
Jeny
I think creating image with link on it should be more than enough.
<img height="height_of_image" width="width_of_image" src="link_to_image" />
replace everything in "'s with the numbers/links you need
Related
Now and again when the page refreshes (about 1 in 3) my facebook like button goes all weird and glitchy as seen in this image...
This is the code i am using to show the button (with PAGE_URL as actual URL):
<fb:like send='false' layout='standard' href='PAGE_URL'
width='500' show_faces='false' font='tahoma'></fb:like>
All the javascript SDK is correct and the like button works, it just does that weird thing shown in the image.
Anyone know why this is?
Looks like the image resource isn't loading. Why don't you take a look at the source when you observe the error and confirm that the image should be displayed. If it's simply not loading, that'd be a Facebook issue, and you should log a ticket.
I'm trying to customize the appearance of a facebook 'Send' button.
I generate the button using the code provided in the docs, however I don't have a clue of how I could modify the button's image or text ?
Could anyone give me an example? I guess javascript is my only option here?
My code looks like this right now:
<fb:send href="http://www.mywebsite.com/something"></fb:send>
This generates a button that looks like this:
Thanks!
You cannot customise the <fb:send /> button. However, you can achieve the same functionality using FB.ui (http://developers.facebook.com/docs/reference/javascript/FB.ui/). Use the send method, eg.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
You can always create your own link and style it however you wish, then add the link from this list of all social sharing button links list - this works for sharing to all sorts of social sites.
For Facebook's share link, replace [URL] and [TITLE] with your data using urlencode()in the following code in your link's href:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
You're pretty much SOL when it comes to customizing these Facebook buttons. They have intentionally designed their buttons so that you can't change or customize them beyond the limited scope provided by Facebook.
Facebook's send button is in an iframe. If you wait for the iframe to load, you can select its contents with $('iframe').contents(). So replacing the text would look like
$(function(){
$('.fb_iframe_widget iframe').on('load', function(){
$(this).contents().find('.pluginButtonLabel').text('Custom Text');
});
});
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.
The Facebook "Update Status" is not getting right image of the page. When I paste the http://www.cjp.org/page.aspx?id=245692 link on my "Update Status" it only shows on thumbnail of "Charity Navigator" and completely ignores the main image. On other urls like http://www.cjp.org/page.aspx?id=235964, it shows the main image and gives options of other thumbnails.
Both pages as basically done the same way with cms, the only difference I see is the image ratio. Is that the reason why it's not getting the main image. Is there a way to show the main image without chaining the aspect ratio?
Thanks,
Rex
You don't have any open graph data so facebook is just guessing what images, description, title etc you want to show. You need to add open graph meta data to your head, and check it with the url linter to make sure it is reading the things you want it to show, correctly.
https://developers.facebook.com/docs/opengraph/
https://developers.facebook.com/tools/debug/
Use a tag like this:
<link rel="image_src"
type="image/jpeg"
href="http://www.example.com/image.jpg" />
Note, this doesn't work for everyone. It did work, but many are saying it doesn't anymore. Trying doesn't hurt.