آموزش افزودن دکمه های اشتراک گذاری در شبکه های اجتماعی به مطالب وردپرس

همانطور که شما هم می دانید این روز ها اکثر افزدای که به نحوی با اینترنت سر و کار دارند حداقل عضو یکی از شبکه های اجتماعی معروف مثل فیسبوک, توییتر, گوگل پلاس و … هستند و از آنجای که یکی از مولفه های افزایش محبوبیت سایت در بین موتور های جستجو مانند گوگل بک لینک می باشد شما می توانید با ایجاد امکانی در سایت خود به کاربران اجازه دهید تا به راحتی مطالب شما را در شبکه های اجتماعی مختلف با دوستانشان به اشتراک بگذارند. با این کار با یک تیر دو نشان را می زنید یکی اینکه بک لینک های سایت شما افزایش پیدا می کند و در نتایج جستجو رتبه های بالاتری را کسب می کنید و دیگری اینکه کاربران سایت شما مانند یک مبلغ افتخاری, سایت شما را به دوستانشان معرفی می کنند و به طور مستقیم ترافیک سایت شما افزایش پیدا می کند.

حال که با ضرورت استفاده از شبکه های اجتماعی جهت افزایش محبوبیت سایت خود بین کاربران و موتورهای جستجو آشنا شدید با ما همراه باشید تا با نحوه افزودن دکمه های شبکه های اجتماعی معروف به قالب سایت خود آشنا شوید.

گام اول : افزودن کدهای html و php اولیه دکمه ها به قالب

در ایتدا باید markup HTML مربوط به دکمه شبکه های اجتماعی را بنویسیم و از طریق توابع PHP اطلاعات لازمی مثل نام نوشته و آدرس نوشته را در آنها قرار دهیم. در اینجا به دلیل محبوبیت بیشتر چهار شبکه اجتماعی فیسبوک, توییتر, گوگل پلاس و لینکداین تنها کدهای مربوط به این شبکه های اجتماعی را قرار می دهیم. اما شما می توانید خودتان کد های مربوط به شبکه های اجتماعی دیگر را نیز به آنها اضاف کنید.

    
<div class="rokesh-social-buttons">
<h4>به اشتراک بگذارید :</h4>
<ul>
<li class="fb"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در فیسبوک</a></li>
<li class="tw"><a href="http://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در توییتر</a></li>
<li class="pl"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در گوگل پلاس</a></li>
<li class="li"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow">اشتراک گذاری در لینکداین</a></li>   
</ul>    
</div>

کد های بالا را هر جایی از قالب سایت خود که می خواهید می توانید قرار دهید. مثلا اگر بخواهید دکمه ها در صفحه مطالب باشند فایل single.php را باز کنید و این کد ها را در حلقه وردپرس و جایی که می خواهید دکمه ها دیده شوند قرار دهید.

گام دوم : تغییر ظاهر دکمه ها با افزودن کد های css به فایل استایل قالب

حال باید ظاهر دکمه ها را شکل دهیم برای این کار یک سری کد css نوشته ام که شکل کلی دکمه ها و همچنین مکان آنها را ایجاد می کند. شما می توانید با ویرایش کدهای css زیر هر نوع ظاهری که می خواهید به دکمه ها بدهید.

/* rokesh-social-buttons */
.rokesh-social-buttons {
     background-color: #F5F5F5;
     border: 1px solid #EBEBEB;
     clear: both;
     display: block;
     height: 32px;
     margin: 20px 0px 5px;
     padding: 1% 1% 1% 2%;
     width: 97%;
}
.rokesh-social-buttons h4, .rokesh-social-buttons ul {
     display: block;
     float: right;
}
.rokesh-social-buttons h4 {
     color: #868686;
     font-family: tahoma;
     font-size: 12px;
     font-weight: bold;
     line-height: 32px;
     margin: 0px;
}
.rokesh-social-buttons ul {
     height: auto;
     list-style: none outside none;
     margin: 0px 10px 0px 0px;
     max-height: 32px;
     max-width: 100%;
     padding: 0px;
     min-width: 150px;
}
.rokesh-social-buttons li {
    float: right;
    margin: 0 !important;
    padding: 0 !important;
}
.rokesh-social-buttons a {
     background-image: url("share-buttons.png");
     display: block;
     float: right;
     font-size: 0px;
     height: 32px;
     margin-left: 5px;
     opacity: 0.85;
     transition: all 0.1s ease 0s;
     width: 32px;
}
.rokesh-social-buttons a:hover {
     opacity: 1;
     transform: translateY(-1px);
}
.rokesh-social-buttons li.tw a {
     background-position: 0px -32px;
}
.rokesh-social-buttons li.pl a {
     background-position: 0px -64px;
}
.rokesh-social-buttons li.li a {
     background-position: 0px -96px;
}

کد های css را در فایل style.css قرار دهید و آن را ذخیره کنید. برای اینکه سرعت بارگزاری دکمه های اشتراک گذاری بالا برود در کد های css از خاصیت Css Sprites استفاده کردیم پس کلا برای ۴ تا آیکون به یک عکس نیاز دارید. تصویر زیر مربوط به آیکون ها می باشد که باید آن را در فایل قالب قرار دهید.

اگر خواستید هم می تونید مکان قرار گیری تصویر آیکون ها را با ویرایش این قسمت از کد css تغیر دهید حتی می توانید خودتان از دکمه هایی با طرحی متفاوت به جای دکمه های فعلی استفاده کنید.

.rokesh-social-buttons a {
     background-image: url("share-buttons.png");
     display: block;
     float: right;
     font-size: 0px;
     height: 32px;
     margin-left: 5px;
     opacity: 0.85;
     transition: all 0.1s ease 0s;
     width: 32px;
}

پس از ذخیره کردن فایل استایل و اتمام کار نتیجه کار شما باید مانند تصویر زیر شده باشد.

دکمه اشتراک گذاری مطالب وردپرس در شبکه های اجتماعی

امیدوارم از این آموزش نیز نهایت استفاده را برده باشید. منتظر نظرات شما در مورد این آموزش هستم و اگر سوالی در مورد این آموزش داشتید آن را نیز در بخش دیدگاه های همین مطلب با ما در میان بگذارید.