You need your blog guests to impart your incredible substance to their companions, isn't that so? So make it simple for them by adding web-based social networking catches to each of your Blogger posts! They can share your posts on Facebook, Twitter, Google+ and Pinterest without leaving your blog. (In the event that you have a WordPress blog, you can see those directions here: How to Add Social Media Sharing Buttons to WordPress Posts.) Don't stress – you don't have to do this each time you compose a blog entry. Basically alter your Blogger layout and they'll show up on all your blog entries.
I found a few web journals and sites with directions; however most demonstrate to you industry standards to include only the Pin It catch – or only a Facebook Like catch. Including the code for each of them exclusively brings about the symbols not arranging pleasantly in your post. At that point I found an article on the BloggerSentral blog from writer "Greenlava" that included code to include a Twitter Tweet catch, a Google+ catch, Facebook Like and Send catches, and a Pinterest Pin It catch – all pleasantly adjusted in succession! Beneath you will discover the directions from that blog entry, and in addition guidelines for some extraordinary varieties for how the catches show up in your blog.
Refresh 12/3/2012: This code has been altered to settle the Pinterest "Stick It" catch not recovering the thumbnail pictures from the blog entry.
1. In your Blogger Dashboard tap on "Layout" in the left menu. (In case you're utilizing the old interface, you should click "Design.)" 2. Tap the "Edit HTML" catch. In the window that shows up, tap the "Continue" catch.
3. In the window that shows up, check the "Grow Widget Templates" checkbox at the best.
4. In the HTML code, locate the main case of this line of code:
<data:post.body/>
5. Copy below code past above this <data:post.body/>
6. Click on "Save Button" and close done!
In the event that you favor that your online networking sharing catches are at the BOTTOM of your posts, take after the guidelines above – however as opposed to setting your code over the <data:post.body/> line, put the code BELOW it.
You may see that every one of the four catches (Twitter, Facebook, Google+ and Pinterest) show up on your blog entry pages; yet the Pin It catch is lost from the posts on your landing page. That is on the grounds that if somebody somehow managed to stick one of your pictures from your landing page, the connection would backpedal to your blog's landing page (rather than to that blog entry). This isn't extremely useful to somebody tapping on your picture on Pinterest – in light of the fact that it would take them to your landing page rather than to the blog entry where that picture is. That being said – on the off chance that you do like to have the Pinterest symbol/connect show up on your landing page as well:
Erase this line of code (line 40):
<b:if cond="’data:blog.pageType" item="" quot="">
what's more, erase this line of code (line 55):
[/b:if>]
On the off chance that you simply need the Facebook Like catch to show up (and not the Facebook Send catch) discover this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
What’s more, change it to this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’false’ show_faces=’false’/>
Discover this line of code:
<div class=’horizontal-social-buttons’ style=’padding:10px 0 10px;’>
What’s more, include these lines of code beneath it:
<!– StumbleUpon –>
<div style=’float:left; margin-right:30px;’>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=1’/>
</div>
Erase the accompanying lines of code:
<!– Google +1 –>
<script type=’text/javascript’>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
What’s more, erase these lines of code:
<!– Google +1 –>
<div style=’float:left;’>
<g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
</div>
I found a few web journals and sites with directions; however most demonstrate to you industry standards to include only the Pin It catch – or only a Facebook Like catch. Including the code for each of them exclusively brings about the symbols not arranging pleasantly in your post. At that point I found an article on the BloggerSentral blog from writer "Greenlava" that included code to include a Twitter Tweet catch, a Google+ catch, Facebook Like and Send catches, and a Pinterest Pin It catch – all pleasantly adjusted in succession! Beneath you will discover the directions from that blog entry, and in addition guidelines for some extraordinary varieties for how the catches show up in your blog.
Refresh 12/3/2012: This code has been altered to settle the Pinterest "Stick It" catch not recovering the thumbnail pictures from the blog entry.
NOTE: This requires altering your Blogger layout. Before continuing with the directions underneath, I prescribe that you reinforcement your Blogger format first!
Instructions to Add Social Media Buttons to the Top of your Blogger Posts
1. In your Blogger Dashboard tap on "Layout" in the left menu. (In case you're utilizing the old interface, you should click "Design.)" 2. Tap the "Edit HTML" catch. In the window that shows up, tap the "Continue" catch.
3. In the window that shows up, check the "Grow Widget Templates" checkbox at the best.
4. In the HTML code, locate the main case of this line of code:
<data:post.body/>
(Note: This line of code seems numerous circumstances all through your format. The quantity of times this shows up fluctuates relying upon your format. Of late a large portion of the layouts I've dealt with required that I locate the SECOND example of it.)
5. Copy below code past above this <data:post.body/>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
6. Click on "Save Button" and close done!
You can customize it as below
Variety #1: Moving the Social Media Buttons to the Bottom of your Blogger Posts
In the event that you favor that your online networking sharing catches are at the BOTTOM of your posts, take after the guidelines above – however as opposed to setting your code over the <data:post.body/> line, put the code BELOW it.
Variety #2: Adding the Pin It catch to the Posts on your Home Page
You may see that every one of the four catches (Twitter, Facebook, Google+ and Pinterest) show up on your blog entry pages; yet the Pin It catch is lost from the posts on your landing page. That is on the grounds that if somebody somehow managed to stick one of your pictures from your landing page, the connection would backpedal to your blog's landing page (rather than to that blog entry). This isn't extremely useful to somebody tapping on your picture on Pinterest – in light of the fact that it would take them to your landing page rather than to the blog entry where that picture is. That being said – on the off chance that you do like to have the Pinterest symbol/connect show up on your landing page as well:
Erase this line of code (line 40):
<b:if cond="’data:blog.pageType" item="" quot="">
what's more, erase this line of code (line 55):
[/b:if>]
Variety #3: Removing the Facebook Send Button
On the off chance that you simply need the Facebook Like catch to show up (and not the Facebook Send catch) discover this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
What’s more, change it to this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’false’ show_faces=’false’/>
Variety #4: Adding the StumbleUpon Button
Discover this line of code:
<div class=’horizontal-social-buttons’ style=’padding:10px 0 10px;’>
What’s more, include these lines of code beneath it:
<!– StumbleUpon –>
<div style=’float:left; margin-right:30px;’>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=1’/>
</div>
Variety #5: Removing the Google+ Button
Erase the accompanying lines of code:
<!– Google +1 –>
<script type=’text/javascript’>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
What’s more, erase these lines of code:
<!– Google +1 –>
<div style=’float:left;’>
<g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
</div>
Post a Comment