Wednesday, March 25, 2015

Wordpress Social Sharing Icons without Plugin

Now a day’s social bookmarking buttons has been necessary for our blogs to sharing the content or blog post on different social networks. And if you are using WordPress then obviously you will be using any plugin for sharing. But today we will tell you how to make custom social sharing icons. If you are developing any you wordpress site then you will have to need this code rather you use any plugin.



Follow these steps to make your own social bookmarking custom buttons.


Step 1: Find Perfect Icons


You will have to need first of all images of social bookmarking. If you are designer then you can create yourself from scratch. You can use text link if you need but I will prefer strongly that you use social icons because readers are familiar with icons to share the articles.


You can find icons from google image search or can find icons from any free site. After making or searching your required images place them your active theme’s folder in the wp-content folder.


Step2:  Where to add the code


Now in the second step edit the file where you have to place the code. Go to wp-content/themes/your-theme/single.php and find the below mentioned code.


<?php the_content('Read more &raquo;'); ?>

Step 3: Add Images


Now add you images after the “the_content” function


<img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share this!" />

Using above code your icons will be display after the post content. And now add sharing code with images, format will be like this


<a href="" title="">
<img />
</a>

The href parameter and title parameter will change according to the network you are working on. Use the following lines of code to create a hyperlink to each sharing site:


TWITTER:


<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!"></a>

FACEBOOK:


<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share on Facebook."></a>

REDDIT:


<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Vote on Reddit"></a>

STUMBLEUPON:


<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Stumble it"></a>

DIGG:


<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Digg this!"></a>

LINKEDIN


<a href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="Share on LinkedIn"></a>

DEL.ICIO.US:


<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Bookmark on del.icio.us"></a>

GOOGLE+


<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"></a>

PINTEREST


<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>"></a>


Wordpress Social Sharing Icons without Plugin