Many websites will show Social Share buttons for Facebook, Twitter, Google+, LinkedIn, Pinterest, to name a few among many other social networks . These buttons generally show the number of times that page was shared on that network as well as a way to click the button and share the page with their social friends and followers.
This is all good and great but sometimes you might want to go a step above and beyond the standard buttons that everyone uses! That is where this article comes into use. I will give you the key API endpoint to access and get your own social network counts so that you can use it in your own custom solution.
What is the Social Count used for?
Below I will show you how you can get the social count numbers from each of the social networks on your own without including their JavaScript snippets on your site. What this means is you can build your own social share buttons with real counts and all like the real ones except you can style them and do whatever you like with them.
This is great and I will show you a few examples of other sites that have built their own share buttons using this technique to get the social count numbers.
The Next Web has built a really cool and useful share widget/box using custom social count numbers…
The Social News site Mashabl.com has built there own custom share buttons and use the share count extensively on every page…
Another example of Mashable.com showing a hover state and non-hover state.
Alternatives to building your own Social Count Buttons?
If you are not inclined to building your own unique social share widget, you can use this jQuery plugin named Sharrre. It will allow you to easily build custom share buttons and style them how you like without doing all the custom coding.
Another alternative that I used on CodeDevelopr is called Socialite. What Socialite does not style the social buttons how you want, but instead it allows you to include one JavaScript file instead of all the separate social libraries. The best feature is you can have the social network libraries only load when the social widget is hovered. It does this by showing a dummy image on page load. Once you hover that fake social buttons image, the JavaScript replaces it with the real social buttons!
This allows for faster page loads as all the social network libraries are not retrieved on page load. You can see a live demo of it in action on my social share widget at the end of this article. Please do share with your friends
Build you own Custom Social Buttons with Count
Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.
- Twitter Share Count
- Facebook URL Shares
- Facebook Page Likes
- Google Plus Share Count
- Pinterest Share Count
- LinkedIn Share Count
- StumbledUpon Share Count
- Buffer App Share Count
Twitter Share Count
Get URL:
https://cdn.api.twitter.com/1/urls/count.json?url=http://codedevelopr.com
1 2 3 4 |
{ <span class="string">"count"</span>:<span class="constant">528</span>, <span class="string">"url"</span>:<span class="string">"http://codedevelopr.com/"</span> } |
Facebook Number of URL Shares
Get URL:
https://graph.facebook.com/?id=http://codedevelopr.com
1 2 3 4 |
{ <span class="string">"id"</span>: "http:<span class="comment">//www.codedevelopr.com",</span> <span class="string">"shares"</span>: <span class="constant">61</span> } |
PRO TIP: You can send in multiple URL’s seperated by commas to get multiple results in 1 query. https://graph.facebook.com/?ids=https://www.google.com,https://www.apple.com,https://www.microsoft.com
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "https:<span class="comment">//www.google.com": {</span> <span class="string">"id"</span>: "https:<span class="comment">//www.google.com",</span> <span class="string">"shares"</span>: <span class="constant">6668703</span>, <span class="string">"comments"</span>: <span class="constant numeric">2</span> }, "https:<span class="comment">//www.apple.com": {</span> <span class="string">"id"</span>: "https:<span class="comment">//www.apple.com",</span> <span class="string">"shares"</span>: <span class="constant">129127</span> }, "https:<span class="comment">//www.microsoft.com": {</span> <span class="string">"id"</span>: "https:<span class="comment">//www.microsoft.com",</span> <span class="string">"shares"</span>: <span class="constant">5323</span> } } |
Facebook Number of Likes for a Page
Get URL:
https://graph.facebook.com/codedevelopr
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ <span class="string">"about"</span>: "CodeDevelopr.com is a blog <span class="keyword">for</span> Software <span class="keyword operator">&</span> Web Developers <span class="keyword">and</span> Designers. https:<span class="comment">//www.CodeDevelopr.com",</span> <span class="string">"category"</span>: <span class="string">"Computers/internet website"</span>, <span class="string">"description"</span>: "Join our email list <span class="keyword">for</span> our newsletter https:<span class="comment">//bit.ly/Hj9f3G\n\nCodeDevelopr.com is a Web Developer blog with articles about PHP, Python, Ruby & Rails, Javascript, jQuery, CSS, HTML, Web Design, Web Development, WordPress dev, Databases, MySQL, Programming, and a lot of other related topics\n",</span> <span class="string">"is_published"</span>: <span class="constant language">true</span>, <span class="string">"release_date"</span>: <span class="string">"Jan 2012"</span>, <span class="string">"talking_about_count"</span>: <span class="constant">126</span>, <span class="string">"username"</span>: <span class="string">"codedevelopr"</span>, <span class="string">"website"</span>: "https:<span class="comment">//www.CodeDevelopr.com",</span> <span class="string">"were_here_count"</span>: <span class="constant numeric">0</span>, <span class="string">"id"</span>: <span class="string">"280686918634735"</span>, <span class="string">"name"</span>: <span class="string">"CodeDevelopr"</span>, <span class="string">"link"</span>: "https:<span class="comment">//www.facebook.com/codedevelopr",</span> <span class="string">"likes"</span>: <span class="constant">470</span>, <span class="string">"cover"</span>: { <span class="string">"cover_id"</span>: <span class="constant">348544688515624</span>, <span class="string">"source"</span>: "https:<span class="comment">//sphotos-g.ak.fbcdn.net/hphotos-ak-frc1/s720x720/485770_348544688515624_818947481_n.jpg",</span> <span class="string">"offset_y"</span>: <span class="constant numeric">0</span>, <span class="string">"offset_x"</span>: <span class="constant numeric">0</span> } } |
Google Plus Share Count
Get URL:
https://clients6.google.com/rpc?key=YOUR_API_KEY
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[{ <span class="string">"method"</span>:<span class="string">"pos.plusones.get"</span>, <span class="string">"id"</span>:<span class="string">"p"</span>, <span class="string">"params"</span>:{ <span class="string">"nolog"</span>:<span class="constant language">true</span>, <span class="string">"id"</span>:"http:<span class="comment">//www.codedevelopr.com/",</span> <span class="string">"source"</span>:<span class="string">"widget"</span>, <span class="string">"userId"</span>:<span class="string">"@viewer"</span>, <span class="string">"groupId"</span>:<span class="string">"@self"</span> }, <span class="string">"jsonrpc"</span>:<span class="string">"2.0"</span>, <span class="string">"key"</span>:<span class="string">"p"</span>, <span class="string">"apiVersion"</span>:<span class="string">"v1"</span> }] |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[{ <span class="string">"result"</span>: { <span class="string">"kind"</span>: "pos<span class="comment">#plusones", </span> <span class="string">"id"</span>: "http:<span class="comment">//www.codedevelopr.com/", </span> <span class="string">"isSetByViewer"</span>: <span class="constant language">false</span>, <span class="string">"metadata"</span>: { <span class="string">"type"</span>: <span class="string">"URL"</span>, <span class="string">"globalCounts"</span>: { <span class="string">"count"</span>: <span class="constant numeric">3097.0</span> } } } , <span class="string">"id"</span>: <span class="string">"p"</span> }] |
Pinterest Share Count
Get URL:
https://api.pinterest.com/v1/urls/count.json?callback=&url=http://codedevelopr.com
1 2 3 4 |
({ <span class="string">"count"</span>: <span class="constant">5345</span>, <span class="string">"url"</span>: <span class="string">"http://codedevelopr.com"</span> }) |
LinkedIn Share Count
Get URL:
https://www.linkedin.com/countserv/count/share?url=http://codedevelopr.com&format=json
1 2 3 4 5 6 |
{ <span class="string">"count"</span>:<span class="constant">17</span>, <span class="string">"fCnt"</span>:<span class="string">"17"</span>, <span class="string">"fCntPlusOne"</span>:<span class="string">"18"</span>, <span class="string">"url"</span>:<span class="string">"http:\/\/codedevelopr.com"</span> } |
StumbledUpon Share Count
Get URL:
https://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://codedevelopr.com
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ <span class="string">"result"</span> : { <span class="string">"url"</span> : <span class="string">"http:\/\/codedevelopr.com\/"</span>, <span class="string">"in_index"</span> : <span class="constant language">true</span>, <span class="string">"publicid"</span> : <span class="string">"79EJnk"</span>, <span class="string">"views"</span> : <span class="string">"8"</span>, <span class="string">"title"</span> : <span class="string">"CodeDevelopr"</span>, <span class="string">"thumbnail"</span> : <span class="string">"http:\/\/cdn.stumble-upon.com\/mthumb\/703\/113973703.jpg"</span>, <span class="string">"thumbnail_b"</span> : <span class="string">"http:\/\/cdn.stumble-upon.com\/bthumb\/703\/113973703.jpg"</span>, <span class="string">"submit_link"</span> : <span class="string">"http:\/\/www.stumbleupon.com\/submit\/?url=http:\/\/codedevelopr.com\/"</span>, <span class="string">"badge_link"</span> : <span class="string">"http:\/\/www.stumbleupon.com\/badge\/?url=http:\/\/codedevelopr.com\/"</span>, <span class="string">"info_link"</span> : <span class="string">"http:\/\/www.stumbleupon.com\/url\/www.codedevelopr.com\/"</span> }, <span class="string">"timestamp"</span> : <span class="constant">1373226466</span>, <span class="string">"success"</span> : <span class="constant language">true</span> } |
Buffer App Share Count
Schedule and automate your Social Media posting with Buffer App
Get URL:
https://api.bufferapp.com/1/links/shares.json?url=http://codedevelopr.com
1 2 3 |
{ <span class="string">"shares"</span>: <span class="constant numeric">5</span> } |