Pages

Monday, January 24, 2011

Add Facebook share button with counter ...........

  1. Go to Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Tick the  Expand Widget Templates check box on top right of the HTML window.
    1. Find the following code in your HTML, this is the code for your post content:
    <data:post.body/>

    1. Paste the Facebook button code immediately below (after) it:
       <!-- Facebook share button Start -->
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div style='float:left;padding:5px 5px 5px 0;'>
    <a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
      </div>
      </b:if>
    <!-- Facebook share button End -->


    1. Configure button
    2. Choose the type of button by replacing the value of  type attribute (in line 4) with the corresponding code below.

    1. FB button
    Code
    fb share box count box_count
    Share button count button_count
    facebook share button button
    facebook share icon icon




    1. Note: The counter will only show up after the count reaches 3.

    1. Button repositioning
      The steps above positioned the button on bottom left of each post. You can change the positioning if you like:
    2. Position it on top of post
      Place the button code before (instead of after) <data:post.body/>.




    • Position it on the right
      Change the float in line 3 from left to right.
    1. Displaying button on static pages
      • To also display the button in static pages, remove the conditional tag -code line 2 and 6.
    2. Preview, you should see the buttons appear at the end each post.
    3. If you like what you see then save it.

    No comments:

    Post a Comment

    Write Your Experience and Suggestion Please.