Despite the fact that Facebook Like & Mail, Twitter Tweet as well as Google +1 cultural sharing buttons can be added easily adequate by following their respective tutorials, aligning them perfectly side by side is a little bit tricky. Several readers were having difficulty with the position and contacted myself for help.
Today is the key is to talk about your article to social networking which is useful for your WordPress or help other people too, but if you manually share the article to social networking it will garb another time and in case your visitor want to express it it will have the same problem also, so here will be the simple but fashionable sharing widget for you personally, the screen blast is giving below so you can check what will occur. Now its the perfect time to do it generate now.
Rather than trying to explain how to be able to align your recent buttons, I think it’s safer to just supply you with a new set of codes for the buttons with the alignment built in. Simply remove the existing buttons and add the brand new code using this steps:
Table of Contents
Features:
1.) Facebook Like+Send Button With Counter.
2.) Tweet Button With Counter
3.) +1 Button With Counter.
4.) LinkedIn Button With Counter.
5.) HTML Link Sharer.
6.) Horizontally Aligned.
7.) Simple Design.
8.) Just Visible On Full Post Page.
9.) Responsive Layout.
10.) Official Scripts.
11.) Works On HTTPS Blogs Too.
12.) No Extra Editing.
How To Add Some Content In The RSS Feed Of WordPress Without Plugin?
Step 1:) Open Appearance > Editor file in your WordPress dashboard.
Step 2:) Open your Theme Function (function.php) file from the list of your theme file.
Step 3:) Copy the below code and Paste it in the end of function.php file.
/* ------------------------------------------------------------------------- * * Add Some Extra Data, Text, Encoded HTML In The End Of RSS /* ------------------------------------------------------------------------- */ function exe_share_this($content){ if(!is_feed() && !is_home()) { $content .= ' <style type="text/css"> /* Sharing Buttons ----------------------------------------------- */ .horizontal_social_buttons {clear:both;margin-top:25px;} .horizontal_social_buttons h2 {font-size:30px;display:inline-block;border-bottom:3px solid #333333;width:100%;} .horizontal_social_buttons textarea {cursor:pointer;resize:none;margin-top:5px;font-size:14px;line-height:14px;padding:5px;width:99%;} </style> <!-- Sharing Widget --> <div class="horizontal_social_buttons"> <h2>You Like It, Please Share This Recipe With Your Friends Using...</h2> <!-- Sharing Scripts --> <div id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang:"en-US"}</script> <script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script src="https://platform.linkedin.com/in.js" type="text/javascript"></script> <!-- Sharing Scripts --> <div style="padding:10px;display:block;"> <div style="float:left;padding:0 10px 0 0;width:140px;margin-top:-5px;height:20px;"> <fb:like colorscheme="light" href="'.urlencode(get_permalink($post->ID)).'" font="" layout="button_count" show_faces="false"></fb:like> <div class="fb-send" data-colorscheme="light" href="'.urlencode(get_permalink($post->ID)).'" style="float:right;display:inline;"></div> </div> <div style="float:left;padding:0 10px;border-left:1px #000 solid;width:80px;height:20px;"> <a class="twitter-share-button" data-count="horizontal" data-lang="en" data-related="" data-via="" href="'.urlencode(get_permalink($post->ID)).'" href="https://twitter.com/share">Tweet</a> </div> <div style="float:left;padding:0 10px;border-left:1px #000 solid;width:60px;height:20px;"> <g:plusone href="'.urlencode(get_permalink($post->ID)).'" size="medium"></g:plusone> </div> <div style="float:left;padding:0 10px;border-left:1px #000 solid;width:80px;height:20px;"> <script data-counter="right" type="IN/Share"></script> </div> <div style="float:left;padding:0 10px;border-left:1px #000 solid;width:60px;height:20px;"> <div id="pin-wrapper"><a data-pin-config="beside" data-pin-do="buttonPin" href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + <?php echo get_permalink(); ?>"><img src="https://assets.pinterest.com/images/pidgets/pin_it_button.png"></img></a><span style="margin-left:-40px;"><a data-pin-config="beside" data-pin-do="buttonBookmark" href="https://pinterest.com/pin/create/button/" style="outline:none;border:none;"></a></span></div><script src="https://assets.pinterest.com/js/pinit.js" type="text/javascript"></script><style type="text/css">#pin-wrapper &gt; a {background-image:none !important;}</style> </div> <div class="clear"></div> <textarea onclick="this.focus();this.select()" readonly="yes" title="Click To Highlight The HTML Link Code">&lt;a href=&quot;'.get_permalink($post->ID).'&quot;&gt;<?php the_title(); ?>&lt;/a&gt;</textarea> <div class="clear"></div> </div> </div> '; } return $content; } add_action('the_content', 'exe_share_this');
Step 4:) Update file and done.
Step 5:) Now you will see your extra data in your Feed and all there where your feed is using.
Customization:
You do not have to change anything. Leave as it is.
Theme Files Editing Warning:
Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.
Thank you for sharing this code, I was searching this type of code for about a week and I am really frustrate and stuck on how can I put my social icon without plugin, I just tried your code now on my WordPress and looks good Thanks again.
Welcome here and thanks for liking our snippet share. Stay with us to get more like this…
Hi Sir, When I apply this code in my site something went wrong. I have jarida template. Please give me the solution. In the header part something really wents wrong. Please check this image and give me the solution.
http://wp.me/a5Rkfx-5x
Code Updated. Try Again…
Plugins significantly reduces your loading speed. I will apply the code for my website. thanks
Welcome here and thanks for liking our article. Stay with us to get more like this…