How to Add Share Buttons in Wordpress Blog Using Only CSS

(Manish) #1

main apne wordpress blog par share button use karna chahata hu without any share button plugin ka use kiye to share button ki coding or unhe kaha add karna hai…plz bataye

(Jumedeen khan) #2

Step 1:
Add this code on your functions.php

function get_the_post_thumbnail_src($img)
  return (preg_match('~\bsrc="([^"]++)"~', $img, $matches)) ? $matches[1] : '';
function wpvkp_social_buttons($content) {
    global $post;
    if(is_singular() || is_home()){
        $sb_url = urlencode(get_permalink());
        $sb_title = str_replace( ' ', '%20', get_the_title());
        $sb_thumb = get_the_post_thumbnail_src(get_the_post_thumbnail());
        $twitterURL = ''.$sb_title.'&url='.$sb_url.'&via=wpvkp';
        $facebookURL = ''.$sb_url;
        $pinterestURL = ''.$sb_url.'&media='.$sb_thumb[0].'&description='.$sb_title;
        $gplusURL =''.$sb_title.'';
        $content .= '<div class="sb-social">';
        $content .= '<a href="'. $twitterURL .'" target="_blank"><i class="sb-icon font-twitter"></i></a>';
        $content .= '<a href="'.$facebookURL.'" target="_blank"><i class="sb-icon font-facebook"></i></a>';
        $content .= '<a href="'.$pinterestURL.'" target="_blank"><i class="sb-icon font-pinterest"></i></a>';
        $content .= '<a href="'.$gplusURL.'"><i class="sb-icon font-gplus"></i></a>';
        $content .= '</div>';
        return $content;
        return $content;
// add_filter( 'the_content', 'wpvkp_social_buttons');
// This will create a wordpress shortcode [social].
// Please it in any widget and social buttons appear their.
// You will need to enabled shortcode execution in widgets.

Step 2: Design social buttons using CSS

add this code on style.css

Styles share buttons.
@Jume deen khan
.content .sb-social {
    width: 100%;
    max-width: 900px;
    text-align: center;
    float: none;
    clear: both;
    margin: 0 auto -10px;

.content .sb-social .sb-link {
    border: none;
    width: 31%;
    display: inline-block;
    margin: 0 1%;
    border-radius: 3px;
    padding: 8px 1%;
    overflow: hidden;
    color: #fff;

.content .sb-social {
    background-color: #1da1f2;

.content .sb-social {
    background-color: #3b5998;

.content .sb-social {
    background-color: #bd081c;

.content .sb-social {
    background-color: #0a87d4;

.content .sb-social {
    background-color: #0e2046;

.content .sb-social {
    background-color: #940b1b;

Finally, Done. For more information visit on

(Manish) #3

thanks jume deen sir lekin inhe add kaha karna hai vo vo bataye function.php me uper wala code kaha par add karna hai. or style.css me ye niche wala code kaha lagana hai and main post ke niche batana show karna chahata hu aapki site ki tarah to fir thoda detail me bataye…

(Jumedeen khan) #4

@Manish Aapko pata hona chahiye ki php code functions.php me kaha add hoga or CSS code style.css me akha add hoga. Aap WordPress user ho Wordpress ki basic knowledge rakho. Functions.php me sabse last me or CSS coding me desktop coding ke anusar kahi bhi kar do like post ki coding ke sath.