Blogging Trainings: Social Media Sites

Showing posts with label Social Media Sites. Show all posts

Floating Facebook Like Box Widget For Blogger

In This Post i will show you how to add a Floating Facebook Like Box Widget For Blogger.

This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This widget can help you to increase facebook likes. You just need to our small code to your blogger blog. Currently this widget is only for Bloggeer/Blogspotblogs.

Go to Design > Page Elements.
Click Add A Gadget.
Select HTML/Javascript .
Paste the following code inside it,

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwqt9Mb3XpVygmQfJicmFDdoZJgLD_CVpNUTLhRrDXEMtMS4Z8RWYtedhrx_HLyXgsKLr-4evwIy2FVmU85VynFsFbfZSyWJQDpf3PY2LiXF6I_Ci9cVfUi9kjIIX9Zi1U4OLu_x5cAo/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggertools1&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://all-blogger-tools.blogspot.com">blogger widget</a></span> </div> </div>

5. Replace allbloggertools1 With Your Facebook Page Username

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

This widget will allow your visitors to share your blog posts on social networks such as google+, facebook, twitter ...

The design is very attractive widget with animation from top to bottom and encourages readers to share your article easily by clicking on one of these buttons.
we spend now to install this widget

Go To Blogger > Design

Choose a HTML/JavaScript widget

Paste the following code inside it,

<style>

/*-------All Blogger Tools------------*/

#floatdiv {

position:absolute;

width:94px;

height:229px;

top:0;

left:0;

z-index:100

}

#mbtsidebar {

border:1px solid #ddd;

padding-left:5px;

position:relative;

height:220px;

width:55px;

margin:0 0 0 5px;

}

</style>

<div id="floatdiv">

<div id="mbtsidebar">

<table cellpadding="1px" cellspacing="0">

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>

</td>

</tr>

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">

<g:plusone size="Tall" expr:href="data:post.url">

</g:plusone></td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="allbloggertool1">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">

<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://all-blogger-tools.blogspot.com/" target="_blank">Widgets</a></p>

</td>

</tr>

</table>

</div>

</div>

<script type="text/javascript">

// JavaScript Document



</script>

Replace allbloggertool1 with your Twitter username.

PS: If you have already added the Google +1 Button somewhere in your blog then you need to add this code Just above

</head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

Now you are done.

In this tutorial we will see how to add like and send buttons on your blogger blog.
This code combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code.

Go To Blogger > Design > Edit HTML

Click "Expand widgets templates box"

Search for <data:post.body/>

and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Save and you are done.

facebook like button Add Facebook Like Button To Your Blog

The Facebook Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. It is easily to add the Facebook Like button to your blog just by copy and paste simple HTML code to your blog template as the following direction.

If you are using WordPress blog, open the single.php file of your theme and paste the following code into it:


<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink());?>&layout=standard&show_faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>

You might want change the width and height of the iframe to fit your blog design.

If you are using the classic template of Blogger, paste the following code below the post content in the template:


<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>

If you are using the modern version of Blogger, add the following code below the post content in the template, too:


<iframe src="http://www.facebook.com/plugins/like.php?href=data:post.url&layout=standard&show-faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>

Since the iframe content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

You can see the code in action in the end of this post.

Use Social Media to Create a Successful Blog

Are you searching for effective ways to grow your online audience while increasing your blog traffic? Social media is an efficient tool for promoting your blog and making it popular among your target audience. Businesses have successfully extended their blog’s reach using social media sites such as YouTube, LinkedIn, Pinterst, Google+, and of course Facebook and Twitter.

9 Tips for Using Social Media to Successfully Promote Your Blog

Let’s take a look at our Top 9 Tips for Promoting Your Blog Using Social Media:

Post to Social Media Profiles Using Feed Tools

Twitterfeed, and various other feed tools give you the ability to publish links to your blog posts on multiple social media sites automatically. If your blog is running on the WordPress platform, you’ll find some really great plug-ins that help you automate this process.

Automate Your Publishing

Imagine how simpler your blogging life would be if you could automate your posts. Well, using tools like HootSuite, SproutSocial and TweetDeck, you can. Simply schedule your posts for the entire day, week or even month ahead. This is a great way for busy business owners to get the word out about new posts quickly and simply. Scheduling allows you to spread your posts out, while simultaneously posting to various social media profiles.

Add Icons on Your Blog for Quick Social Media Sharing, Tweeting and Liking

No matter which blogging platform you use, your sidebar should contain social network icons. Why? These icons allow your readers to quickly connect with you via your social network profiles, with just one click. They also encourage your audience to share, like and tweet about your blog or any of its contents.

Link Your Blog and Social Media Profiles to Each Other

Every single one of your social network profiles should include the URL of your blog. That way, no matter where your audience is connecting to you from, your blog is only a simple click away.

Your Forum Signatures Should Contain the URL of Your Blog

When you post relevant, valuable information, questions or comments in industry-related forums, you increase your web presence. Including a link to your blog in forum signatures helps to create backlinks to your blog, which helps to increase blog traffic.

Comments Made on Other Blog Should Contain Your Blog’s URL

Leaving or responding to comments on other relevant blogs also increases your web presence among your target audience. Add a link to your blog within your comments to create valuable backlinks. This also increases the chances of that audience visiting your blog using a single click.

Utilize the Social Media Widgets and Tools Offered

Most of the popular social media networks offer free widgets and tools to promote user profiles. These can be added to your blog to increase your content’s exposure. Simply log into your social media profiles, access these features, and add them to your blog.

Blogging Trainings

Floating Facebook Like Box Widget For Blogger

Add Floating Share Buttons Widget For Blogger Blogspot

New Like and Send Buttons of facbook for blogger

How to Add Facebook Like Button To Your Blog

Use Social Media to Create a Successful Blog

9 Tips for Using Social Media to Successfully Promote Your Blog

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors

Template Information

Test Footer 2

Template Information