Today as i was replying to the Emails from my contact form i got a bit of a surprise.One Email asked “I like to add Facebook share and tweet buttons to my blog post same like your blog (share and tweet buttons at the beginning of the post text). thanks:)”.So i went to my list of posts page for Spice Up Your Blog to get the link to the tutorial for this to send back.Then i realised i have never actually covered it in a post.
I have showed how to have a Twitter counter at the top of your posts and even a Twitter and Facebook button in a fixed floating position, but not how to have the Twitter and Facebook Counter Buttons at the start of posts wrapped in text.It’s actually quiet an easy tutorial..
So lets do it !
The Twitter button i will be using is the Most recent updated Twitter Button that includes a link to your Twitter Profile.You will see if you use the Twitter button on any of the posts in this blog the link you post on Twitter includes a link to my Twitter Profile and once you share the link you are given the option to follow me (If Your Not Already).So the button not only gets people sharing your posts but also gets you more followers.The facebook button is the standard counter button not the Like Button.
I am using these buttons at the time of writing the post but as you know I’m always changing so for future reference i have a live demo below.
Live Demo –Twitter And Facebook Button Demo
Add Twitter And Facebook Buttons To Blogger
Step 1. In Your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box.
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)
<data:post.body/>
Step 3. Copy And Paste The Following Code Directly Before / Above <data:post.body/>
<div style='float:left; margin-right:10px;'>
<a class='twitter-share-button' data-count='vertical' data-via='PaulCrowePro' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><br/>
<a 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'/><br/><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
</div>
Important – Replace My Twitter Username In Red PaulCrowePro With Yours, If you don’t have one Leave It Blank.
Step 4 Save Your Template.
The buttons will now be at the start of all your posts for readers to share your content, we have lots more Social Bookmarking Gadgets for you to check out.
Drop Your Comments, Views And Questions Below.
Like This, You Will Love :
- How I Used Industry Leaders On Twitter To Spike My Blog Traffic
- Neat Triangle Design Social And Rss Icon Gadget For Blogger And WordPress
- Using Twitter To Find Guest Post Opportunities
- Add Social Engagment Plugin Smart Layers To Blogger And WordPress Blogs
- Add Pinterest And Other Bookmarking Buttons To Images In Your Blogger Posts
