Adding Twitter and Facebook Share Buttons to The Post
There are plenty services and plugins that let you add social share buttons, downside is they usually trying to be all things for all people. So you can end up with complex solution to a very simple problem. For example, I just want Twitter and Facebook share buttons and not really interesting in anything else. I want it to be as light, clean and simple as possible. How hard it is to do it manually? Fortunately, not that difficult and I'll try to describe how to do it in this post.
First of all, lets find out what these two services provide for developers or website owners. For Twitter, there is twitter button generator on their developers site. This works really well and pretty simple to use with no modifications. It is smart enough to pull needed info from your page header.
Facebook follows similar approach, providing Facebook button generator. But surely they want you suffer a little more, so you'll need to create "application" for your account, specify your website's URL and use app ID in the generated code. Also, data-href is something you need to specify in code or add to the header, it can't pull it from your post for some reason. So a bit overhead but not horrible overall.
Having these two pieces in place, you need just add them where you want buttons show up in your post. For BlogEngine, go to /custom/themes/your-theme and look for PostView.ascx template (or .cshtml if you using Razor theme). These is template applied to the post, both in the list or in the single post. Usually, I only want to display social buttons when single post loaded, so I added check for location on top of the code. This makes sure post list does not have buttons, but if you want them show up you don't need this condition and can remove first and last lines in the code snippet.
You can put it anywhere you like in PostView, but I find it best go right after "BodyContent" tag. Code below if what makes two social buttons show up right under the post content when you read it from single post (post detail) view. Basics, obviously, but not everyone is an expert and we often forget how hard it was figure it out first time we needed this. You can add more services this way, like Google Plus and others. Also, if you want more you can check AddThis extension for BlogEgnine - it has plenty more options, but harder to set up and customize, at least in my experience.
<% if (Location == ServingLocation.SinglePost) { %>
<div class="social-links">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>
!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<span id="fb-root"></span>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1524456894540409";
fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
</script>
<span class="fb-share-button" style="margin-left: 5px; top: -6px"
data-href="<%=Post.RelativeOrAbsoluteLink %>"
data-layout="button_count" data-type="button">
</span>
</div>
<% } %>
