Social sharing has become one of the most powerful way to reach out to larger number of audience. Whenever we publish anything new it is always better to promote it on popular social networks to gain some immediate traffic. Integrating popular social sharing buttons on your site might drive more traffic if the reader likes your content and shares it.

One way of adding social share buttons is by adding JavaScript snippets provided by Facebook, LinkedIn, Twitter and Google+ or by using services like AddThis and ShareThis but it is not the optimal way of doing it, reasons for that are:

  1. Additional JavaScript will increase page size.
  2. Icons cannot be customized.
  3. More HTTP requests.

So what is the better way of doing this? All you need is a simple anchor (with URL?QueryString) and your own social sharing custom icons. You can also combine all those icons into single image this technique is called CSS Sprite. Using sprites will reduces number of HTTP request to the server and save bandwidth.

Facebook

<a href=https://facebook.com/sharer.php?u={URL} target="_blank">Facebook</a>

Linked In

<a href=http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={Title} target="_blank">LinkedIn</a>

Twitter (Via and HashTags are optional)

<a href=https://twitter.com/intent/tweet?url={URL}&text={Title}&via={UserName}&hashtags={HashTags} target="_blank">Twitter</a>

Google Plus

<a href=https://plus.google.com/share?url={URL} target="_blank">Google+</a>

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen jEzEGB by Arun Endapally (@arunendapally) on CodePen.

Now that we have seen how to add sharing with simple anchor, lets continue to make it look good by adding background image to the anchors.

You can download some free icons from here or here there are almost similar, I used the same in this blog or else if you have experience with photoshop you can also download icons.psd from here and customize them as required. To combine those individual icons into one image you can use this online sprite generator, combining into one image will reduce number of request to the server.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen WbzvXJ by Arun Endapally (@arunendapally) on CodePen.

We can also get the share count by sending request to the url which returns json and then we can retrieve the count from json, though it is possible avoid retrieving the count because by doing that will increase the requests and the time to your load the page will increase.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen LEdpNy by Arun Endapally (@arunendapally) on CodePen.

Note: I did not cover getting share count for google+ as it needs API_KEY and also for twitter to get the correct count you need to add the count for request with www and without www (Example: http://arunendapally.com and http://www.arunendapally.com will fetch different count).

Hi I am a .NET developer and I always wanted to start a blog to share things I know but I kept postponing it since years. The main problem I see with most of the people (developers) like me is they get confused whether to develop their own blog engine or use one of the popular blogging engines out there in internet, yes it was very tricky for me to come to a conclusion.

Yes, I agree that developing our own blog engine is not a tough task as the schema is very simple and there is a very good scope for customization but you need to consider the following before you start developing one:

  • To use Database or not to use database
  • How to Moderate the comments posted
  • Which Rich Text Editor to use
  • How to integrate the blog with Window Live Writer
  • Responsive UI design with twitter bootstrap
  • Gravatar support for retrieving avatars
  • RSS feeds
  • Have social integration to share and tweet about the post

The more we think of developing a good blog engine it gets more and more complicated and we start to loose lot of time in evaluation things. When I planned to develop my own blog engine I started with the sql database but later decided not to use a database as it will solves my hosting problems (If you are planning to host it on windows azure Sql Database will cost you more) so I planned to use xml or json for storage. For blog comments I thought about three ways to moderate to avoid spam one way is have a approval check so that only admin approved messages will appear to all the readers, second way is use a anti-spam service like Akismet and the third way is to use Disqus after thinking a lot I thought of using admin comments approval system as it was simple to start with. For rich text editor to create blog posts, I wanted to use a simple jQuery based editor and  after evaluating few editors I liked tinyMCE but the problem with it is the free version did not have image manager. For integrating with window live writer (I feel it’s the best way to blog) started reading about MetaWeblog API and few tutorials implement the same but I planned to do this later and started designing responsive UI using twitter bootstrap.

After some initial start in developing the blog engine using ASP.NET MVC and C# as language (which are my strength) I realized that instead of spending more time creating my own blog engine I should consider using some Open Source blog engine and just start blogging. I decided not to use Blogger or Word Press as it will take more time for me to customize as I am more comfortable with ASP.NET. I started my hunt for finding an ideal Open Source blog engine which suits all my requirements and after lot of research I ended up finding MiniBlog it has everything you will need to have in a blog engine. Finally I forked MiniBlog from GitHub and customized it within no time.

PS: Thanks to Scott Hanselman (@shanselman) and Mads Kristensen (@mkristensen) you people inspired me and helped me to start this blog.

    About me

    Arun Endapally

    Technical Architect | Web Enthusiast
    You can always get in touch with me on
       
    Content and opinions in this blog are my own and do not represent my employer.

    Ad