Showing posts with label Social Bookmark. Show all posts
Showing posts with label Social Bookmark. Show all posts

Tuesday, August 30, 2011


Tips to Add a Digg Button to Blogger Blogspot

Today's article discusses where to place a digg.com button on your Blogspot Blogger blog and shows you how to add an integrated digg button to your blog. The button allows your blog's visitors to digg posts from your blog and submit those articles to Digg.

What is Digg.com?
Digg is a social content site where readers submit stories, videos and images. Depending on interest and popularity articles are commented on by members. You can encourage your readers to digg your stories by adding a Digg button to your Blogger blog. The button will display a real time count of the number of times your post has been dugg.


Why Add a Digg Button to My Blogger Blogspot Blog?
Why would I want to add more buttons to my blog you may be wondering. Well there are a number of reasons why getting on board with Digg will be helpful to you in growing your blog.

  • Digg is a ready source of traffic that can drive visitors to your blog and it is too important to overlook. When visitors digg your stories it will encourage new readers to visit your blog.
  • Posts that have been submitted to Digg appear in search engine results so your blog will receive exposure.
  • A digg button will encourage visitors to submit your blog's content including images and video to Digg. This will encourage others to comment and write about your post and possibly link to it.

What to Consider When Choosing to Add Digg to Your Blog
When adding a Digg button to your Blogger Blogspot blog there are some important considerations to think of before you get started. You will need to decide about:

  • The look of the button to place on your blog as Digg gives you the option of several sizes to choose from. The look and feel of your blog will dictate what button you decide on.
  • What pages your Digg button will display on. Do you want it on the home page as well as the post pages for instance? I strongly advise that you place any integrated button only on post pages otherwise you will find the loading time of your homepage will be noticeably reduced.
  • What position to place the button in on your blog. Under the post title, beside the first paragraph, below the post are all common locations for a Digg button. Placing a button near the top of your posts can be a good ideas as visitors will see it as the page loads because the button will be above the fold ie the area that visitors see without having to scroll down. If you have a bunch of social media buttons at the bottom of your posts already you might want to include your Digg button in this sequence.

Can I Digg My Own Blog Content?
Yes. You most certainly can digg your own Blogger posts as this will get you a listing in Digg.

How to Add a Digg Button to Blogger Blogspot Blog
I am going to show you how to manually change your Blogger Blogspot template to include your Digg button. While this is not a difficult tweak you will be changing your template. Make sure you take care not to overwrite any code. My suggestion as always is back up first by downloading your template before beginning the addition of this code.

To add a large Digg button to appear next to the first paragraph in your Blogger Blogspot posts:



1. Login to your Blogger blog if not already logged in

2. Navigate to Layout > Edit HTML

3. Back up your template by downloading full template as a precaution

4. Check the Expand Widgets Template box

5. Find this line of code using CTRL + F

<p><data:post.body/></p>


6. Paste the Following code above <p><data:post.body/></p>


<!--Digg.com Button-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div></b:if>
<!--end Digg.com Button-->


7. Click on the Save Template button

8. Click on View Blog link and navigate to an individual post page. You will see your new digg button is only visible on the post page.

Customizing Your Digg Button Tips and Troubleshooting


  • To have the Digg button display on all pages not just the individual post pages remove this line:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>





  • To have the Digg button aligned to the left instead of the right change this line from:

    <div style='float:right; margin-left:10px;'>

    to:

    <div style='float:left; margin-left:10px;'>






  • To replace the large button with the compact button replace the code in Step 6 with:

    <!--Digg.com Button-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='float:right; margin-left:10px;'>
    <script type='text/javascript'>
    digg_url=&quot;<data:post.url/>&quot;;
    digg_skin=&quot;compact&quot;;
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
    </div></b:if>
    <!--end Digg.com Button-->





  • To change the background color of the button from white to your own desired color add this line:

    digg_bgcolor=&quot;#ff9900amp;quot;;

    below this line:

    digg_url=&quot;<data:post.url/>&quot;;


    Note: Change the value #ff9900 to whatever hex color you would like.




  • To move the Digg button to below the post content instead of at the top paste the following code:

    <!--Digg.com Button-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='float:right; margin-left:10px;'>
    <script type='text/javascript'>
    digg_url=&quot;<data:post.url/>&quot;;
    digg_skin=&quot;compact&quot;;
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
    </div></b:if>
    <!--end Digg.com Button-->

    to the end of the section of code beginning with this line

    <div class='post-footer-line post-footer-line-2'>

    If you have a third post footer line then place this code after that block of code.




    In this tutorial you have learned about what Digg is and the benefits of adding an integrated Digg button to your Blogger Blogspot Blog. You have also learned about different placement options for your Digg button and been given step by step instructions on how to customize the Digg button to suit the needs of your blog.


    Related Articles
    List of How Blog Works Tutorials for Blogger Blogs
    Add a Social Bookmarking Button to Blogger

  • Read Full Post ...

    Monday, August 29, 2011


    Free Social Bookmark Buttons for Blogger

    One way to get your blog to grow is add social bookmarking buttons to your Blogger Blogspot blog. In an earlier article I wrote about the simplest way to place social media on a Blogger blog - that is to add an all-in-one Add This social bookmarking button.

    However, as one size doesn't fit all situations there may be lots of times when you would prefer to add individual social bookmark buttons to your Blogger blog. That's why I have put together this list of useful free social bookmarking button sets. All are free to use on a personal blog and most have no restrictions for commercial use either but please do double check the license when you download them if you want to use the buttons commercially.

    Best Sources of Social Bookmarking Buttons for Blogger Blogspot

    128 Completely Free Icons Set
    128 Icons available in 48×48px. Includes Social Media Icons such as: Design Float, Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter & more…

    Web 2.0 Icons (23 icons)
    23 freeware “iPhone-like” icons sized from 512X512 to 16X16 pixels. Includes Blinklist, BlogMarks, Delicious, Digg, FaceBook, Favorite, Feeds, FeedBurner, Flickr, Furl, Google Magnolia, Misterwong, Myspace, Newsvine, Netvibes, Reddit, Simpy, Stumbleupon, Technorati, Twitter, Youtube.

    Socialize (12 icons)
    12 high quality, free icons in these sizes: 16x16px, 32x32px, 48x48px, 64x64px and 128x128px and 32-bit transparency PNG file format.



    Handycons (12 icons)
    Handycons is a free, hand drawn social media icon set containing 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon, of course. All icons are available in four sizes: 16x16, 24x24, 32x32 and 48x48 pixels.



    Handycons 2 (20 icons)
    20 more hand drawn icons following on from the first Handycons set. Package contains Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. All icons come in four sizes: 16x16, 32x32, 64x64 and 12x128px.



    Social Media Icons (26 icons)
    26 clean looking free social media icons available for personal or commercial use.

    Aquaticus Social (30 icons)
    30 Web 2.0 social media icons in 4 sizes. Free to use on blogs. List includes popular icons like: Blogger, Delicious, Digg, Facebook, flickr, furl, Google, Ma.gnolia, Mixx, MySpace, NetVibes, NewsVine, Reddit, StumbleUpon, Technorati, Twitter, Yahoo!
    Aquaticus.Social by ~jwloh on deviantART


    Social Me Icons (30 Icons)
    30 free iPhone-inspired icons that can be used on blogs and websites without restriction. 4 sizes up to 60x60px, 48x48px, 24x24px, 16x16px. List includes popular icons like: Blogger, Delicious, Digg, Facebook, flickr, furl, Google, Ma.gnolia, Mixx, MySpace, NetVibes, NewsVine, Reddit, StumbleUpon, Technorati, Twitter, Yahoo!
    Social.me by ~jwloh on deviantART


    Social Bookmark Iconset Pt I



    Social Bookmark Iconset Pt II



    Ok so that's my current list of some of the best free social bookmark icons available on the net suitable for a Blogger Blogspot blog. This is a pretty extensive list to get you started but I will add more as time goes on and I come across other great sets. If you find what you are looking for here please let me know and if not I would be interested in that too.


    Related Articles
    List of How Blog Works Tutorials for Blogger Blogs
    Add a Social Bookmarking Button to Blogger
    Read Full Post ...