CODEWITHSUNDEEP
facebooktwitter
bjork24
bjork24

Reputation: 3193

Custom display for facebook likes and tweets

How can I replicate the custom displaying of article FB likes and tweets, as seen here?

Do you think it's a javascript call to the api to retrieve the numbers, or something else? It seems like the API calls would quickly max out if they were calling on each page load.

Basically, how can you retrieve and display FB and Twitter stats in your own markup, outside of third-party iframes?

Upvotes: 1

Views: 430

Answers (2)

Rick Davies
Rick Davies

Reputation: 733

These will return simple JSON responses with counts for property of re-Tweets & Likes for a specific URL:

http://urls.api.twitter.com/1/urls/count.json?url=SOME_URL_HERE
http://graph.facebook.com/SOME_URL_HERE

Examples: TWITTER API CALL:

http://urls.api.twitter.com/1/urls/count.json?url=http://stackoverflow.com

:: JSON RESPONSE:

{"count":4712,"url":"http://stackoverflow.com/"}

FACEBOOK GRAPH CALL:

http://graph.facebook.com/http://stackoverflow.com

:: JSON RESPONSE:

{ "id": "http://stackoverflow.com", "shares": 7264, "comments": 3 }

Upvotes: 0

bkaid
bkaid

Reputation: 52073

That site you linked to is incrementing a counter every time it gets clicked - whether is gets shared or not. Try clicking it, closing the popup without sharing, and then refresh the page. Notice the count goes up.

Facebook doesn't really allow you to customize their latest non-deprecated share/like button. One way you could do this with real numbers is using their graph api. The calls and the returned values could be cached and/or loaded from a background process to speed up page loads. You can get Facebook share/like count by using this URL, without any access token, meaning you won't be rate limited: http://graph.facebook.com/?ids=http://espn.com

Twitter, however, doesn't have an api call to get share counts yet, as mentioned in their Tweet Button FAQ. For that, you are better off using their count button and customizing it with CSS (see section Build Your Own Tweet Button), which is supported.

Upvotes: 1

Related Questions