Blogger (Blogspot) share buttons to count individual post pages on Homepage - share

I have blog on the blogger (blogspot) platform. When looking at the homepage, the number next to the share buttons for each individual post is only showing how many times the homepage has been shared through each social button.
Is there are way to display the accurate number of how many each individual post has been shared and not just the homepage?
For example, http://mashable.com/ displays accurate social media numbers for individual posts on the homepage. Yet, http://dmw-test-blog.blogspot.com/ is displaying only the number of times the homepage has been shared, even though the buttons are displayed under each post title.
I been searching for hours for a solution. Some suggest to not place the script under the < /head > tag, others suggested using the individual scripts from each social share site instead of the 3rd party ShareThis script, but neither suggestion worked.
Is there a solution or is the Blogger platform the problem?

I found a solution.
By using the 3rd party share buttons from ShareThis, they have a tweak where you can add:
"expr:st_title='data:post.title' expr:st_url='data:post.url'" to each button, forcing the share buttons to display the number of the post title url instead of the browser url.
For example, using the share buttons above, the new code would look like this:
<span class='st_twitter_hcount' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_facebook_hcount' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_googleplus_hcount' expr:st_title='data:post.title' expr:st_url='data:post.url'/>
<span class='st_linkedin_hcount' expr:st_title='data:post.title' expr:st_url='data:post.url'/>

Related

Facebook Like plugin with big buttons?

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

Why is Facebook's sharer.php properly displaying some of my thumbnails, but not others?

OK, this is my first question on SO, so be gentle. Doing my best to be thorough. :)
We want users to be able to share URLs specific to ordering photos of their children on our site. We currently have no interest in implementing Open Graph on our site. We're not trying to track that data at this time, and it's more work than I have time for anyway. So I opted for the quickest route: the sharer.php link.
I realize that FB's sharer.php is deprecated in favor of 'og:' tags, but see no indication at https://developers.facebook.com/docs/reference/plugins/share-links/ - which was updated three weeks ago, so it obviously should still work.
I followed the instructions in these blog posts to customize the links:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
http://www.therykers.net/?p=37
However, we only get thumbnails to properly display in the FB Share dialog when using our site's demo subdomain, even though the source code for our sharer.php link is identical in all instances (aside from the image/name of the child, the site's subdomain, and the photography studio name).
This source code (demo site) properly displays the image:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://demo.mysmilecentral.com/public/show?link_code=funankizwd
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/sp00/sp00-001-1/0106_022_0028.jpg
&p[title]=Order%20Pictures%20of%20CASEY%20at%20Sample Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20CASEY." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
But this ('live' site) doesn't:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://rowlandphoto.mysmilecentral.com/public/show?link_code=2cols21uogpx
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/bj20/bj20-bb2013-1/1448_img_0128.jpg
&p[title]=Order%20Pictures%20of%20Gabrielle%20at%20Rowland Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20Gabrielle." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
Both images meet the dimension requirements of FB Share, and are publicly viewable.
I've spent several hours trying to find an answer (Googling, searching here), and haven't come up with a logical reason for this.
If you open up your web inspector you would realize that https://www.facebook.com/sharer.php deprecated redirects to https://www.facebook.com/sharer/sharer.php, which only has one supported parameter u for the url being shared which depends on Open Graph meta data (which you have opted not to use).
The p array (p[url], etc) is not supported in the new Facebook Share dialog. By using deprecated features, you should expect unstable behaviour or no results at all. There isn't anything much more to say about that.

Want to share a particular block or div from my entire page into facebook

I have a requirement that in a webpage I have multiple block of content which is wrapped inside individual DIV. Each block needs to have a share to facebook button.
Did many researches but couldn't find a solution. Please can anyone give me a suitable code or idea how I can share particular blocks/content wrapped inside a div into facebook.
For e.g.
I have three DIV in my page and each DIV has share button, when user clicks on any of the share button the respective DIV is shared.
Is there any solution to this requirement or whether is it possible to do. Any kind of suggestions are widely accepted.
Check out this HyperArts tutorial on adding a Share Button to an iFrame tab - you use the exact same code for your webpage. You will be using the Facebook JavaScript SDK.
At the end of the tutorial it explains how to modify it to allow for multiple Share buttons on one page. You just need to add a unique identifier for each one.

Edit Facebook Like Button to make button into link?

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.

Multiple Facebook Like buttons (different activities) on one page?

My one web page uses Ajax to display information about multiple activities.
I'd like to have one Like button per activity. This would mean multiple Like buttons on the page, one per activity. Can this be done?
Can the Like button's url include #!state1 ?
Eg, a web page is located at www.example.com/index.html
It has multiple FB Like buttons on it, one for url www.example.com/index.html#!activity1
another for www.example.com/index.html#!activity2
Will the two Like buttons work independently?
You can have multiple like buttons on a single page, but each like button must be linked to a separate page.
Eg: if you have products, each listing could have a like button next to it, but that like button would link to the product details page.
If you really wanted to, create phantom pages on your site with some meta tags. Then on your index.html, use like buttons that link to those pages.
To ensure no one ever gets to your phantom page, include the tag:
<meta http-equiv="refresh" content="0;url=http://www.example.com/index.html/">
That way, if someone clicks on the link that comes up on a facebook wall, they'll be redirected to the correct page.