I've following code:
<span><small>
<i class="fa fa-heart"></i>56 Likes
</small></span>
which gives like button as :
I've included facebook like button as instructed in:
https://developers.facebook.com/docs/plugins/like-button
But I need same functionality. So that when user clicks on the heart icon it get liked and increases count number.
You need to autorize the user and use og.likes:
https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
It is not possible to copy the functionality of the Like Button in any other way afaik. You are not allowed to change the appearance of the Like Button anyway:
Don’t obscure or cover elements of social plugins
Source: https://developers.facebook.com/policy/
Related
I need a social media plugin just for FB. I need big share buttons for FB. I have seen it in several websites but I do not know which one it is.
I leave this link to show you what I am talking about (big FB buttons at the beginning and ending of the article):
http://www.viralnova.com/animals-eating-ice-cream/
Any idea?
There's no secret sauce for making big like (that's not a like button, that's share button) button it all comes down to basic knowledge in Facebook developers tools ...
Facebook has the Sharer which accept the GET parameter u which is the URL you want to share on your timeline, on a friend's wall or even in a private message ...
Break Down
You can create a new element or wrapper for your share button I will just use <a> because they seems quick and easy to use for this purpose.
<a class="fsl fsl-facebook" data-href="{URL_to_Share}" href="#">
<span class="fa-facebook fa-icons fa-lg"></span>
<span class="sc-label">Share on Facebook</span>
</a>
pay attention to data-href attribute as you should replace it with the URL you want to share
next we need some JavaScript (jQuery) to make our share button do something
$('.fsl-facebook').click(function(e){ // target all elements with fsl-facebook class in the DOM
e.preventDefault(); // prevent scrolling to top or bottom, because href is set to #
var href = $(this).attr('data-href'); // get URL from the data-href
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(href), "", "width=800, height=350"); // pop up a new window, it's prefered to urlencode the URL because of 2nd & 3rd GET parameter that can be found in some URLs (?a=1&b=2&c=3)
});
DEMO
I noticed some facebook company pages like:
http://www.facebook.com/companyname
Can change the persons name to the company name and also add a like button. How does one achieve these two things?
Add a like button to a company page of a URL like this - http://www.facebook.com/companypage
Add a like button on that page?
You need a special account designed for business, you cant just do it to a personal account.
https://www.facebook.com/business/overview
Once you reach enough likes on Facebook you can get your own "short page-link". You only need a few likes (100-200 I think it is).
A like button is already on your page. However you can add an extra tab using HTML and Iframes to a remote document with a like button. The like button is found on Facebook's dev pages.
https://developers.facebook.com/docs/plugins/like-button/
Code in HTML for Like Button
Detailed steps mentioned on the page on how to embed
You can add various styles too and a code will be generated for you
We use the facebook share button in a part of our website. We used to be able to change the text of the button but it seems to be no longer possible.
The code we have right now is:
<a name="fb_share" type="button" share_url="http://<?=$_SERVER["SERVER_NAME"]?><?=$_SERVER["REQUEST_URI"]?>"></a>
We need to modify the Button so say "Share this product" instead of just share.
THanks
The Share button is deprecated, instead you should use the Feed Dialog along with your own custom design of button. Here is an example:
Share this product
Which appears as:
Share this product
As you can see, it's really easy to create and is actually supported, so I highly recommend switching.
I am usign the version of based on the <fb:like > tag. This renders a small facbook logo which implements the actual "like" operation, but also includes a large "signup to see what your friends like", or the number of likes when you are logged in, etc. It is pretty clear from what I have read that this is the form facebook wants you to use, but it makes the button to wide for my layout. The point is that I see other versions on websites all over, in particular "the weather channel" has one that includes only the logo with some text such as "like us" next to it. "Chicago Tribune" has one that says "recomend" with a very small like count next to it. I have not been able to determine what these link to or what script they invoke so that I can copy them. Can anyone help ?
when you get the code of the like button from facebook you can play with the options and get different results: http://developers.facebook.com/docs/reference/plugins/like/.
obviously it's limited to how facebook wants it to look like.
it is possible to change the look with css, but that's not wise since it's against their policy and you'd have to keep track with their changes.
I've always just used a thumbnail to link to my Facebook Fan Page and a Like button for individual content. But I'd like to combine the two into one button so that it shows the number of people who have Liked my website next to a button which takes them directly to my Fan Page. SlickDeals does exactly what I'm looking for here (top left corner): http://archive.slickdeals.net/ Any idea on how I can do this too?
I think the slickdeals fan status is a proprietary customization - simple one indeed. You might try to mimic their code.
<img src="http://st.slickdealz.net/images/iconrepo/social2/16px/facebook.png" width="16" height="16">
<img src="http://st.slickdealz.net/images/iconrepo/social2/16px/facebook.png" width="16" height="16">
<span class="triangle-border" title="82,851 Fans">83K</span>
However, Facebook provides a plugin to create Like buttons http://developers.facebook.com/docs/reference/plugins/like/ that is much more powerful and easier.