أثّرت مواقع الشبكات الاجتماعية في التدوين إلى حد كبير. تنشر تدوينة جديدة وتشاركها على شبكاتك الاجتماعية؛ فيحصل متابعوك ومعجبوك على تحديثات فورية عن محتواك. يزورون مدونتك وتحصل على زيارات وفيرة. ولكي يحدث كل هذا تحتاج إلى بناء قاعدة جيدة من المتابعين والمعجبين على شبكات مثل فيسبوك وتويتر.

يضيف كثير من الناس ودجات منفصلة لكل شبكة على مدوناتهم ومواقعهم، مما قد يضر بسرعة تحميل الصفحات. لتقليل زمن التحميل والمساحة التي تستهلكها كل هذه الودجات، يمكنك بذكاء استخدام ودجة واحدة تجمعها كلها: فيسبوك وتويتر وزر التوصية والاشتراك عبر البريد الإلكتروني من خلال FeedBurner. ستوفر مساحة كبيرة بإضافة هذه الودجة، ويمكنك استغلال المساحة المحررة لأغراض أخرى مثل تحقيق الدخل من مدونتك عبر شبكات الإعلانات.

كيفية إضافة ودجة الشبكات الاجتماعية الشاملة

أولاً، اذهب إلى لوحة تحكم بلوجر بتسجيل الدخول إلى حسابك.
انقر على التخطيط لفتح تخطيط القالب.
انقر الآن على إضافة أداة واختر أداة HTML/JavaScript.
الصق الكود التالي فيها وغيّر أسماء الملفات الشخصية بأسمائك.

<style>
/* Social Widget */
#UT-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: linear-gradient(180deg,#FFCA00 0,#FF9B00 100%);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:linear-gradient(180deg,#ffda4d,#ff9b00);
outline:0;
box-shadow:0 0 3px #999;
border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul li, #other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a, #other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li a{
text-decoration:none;
}
#other-social-bar .other-follow li a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
</style>

<!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="UT-mashable-bar"> <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/YOUR_PAGE&amp;send=false&amp;layout=standard&amp;width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;height=100px" scrolling="no" frameborder="0" style="border:none; overflow:hidden;"></iframe>
</div>
<div class="twitter"> <!-- Twitter -->
<a href="https://twitter.com/YOUR_USERNAME" class="twitter-follow-button" data-show-count="true">Follow @YOUR_USERNAME</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="email-news-subscribe"> <!-- Email Subscribe -->
<div class="email-box" style="background:#EDF4FF">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEED_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="YOUR_FEED_ID" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</div>
<div id="other-social-bar"> <!-- Other Social Bar -->
<ul class="other-follow">
<li class="my-rss">
<a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/YOUR_FEED_ID" target="_blank">RSS Feed</a>
</li>
<li class="my-linkedin">
<a rel="nofollow" title="linkedin" href="#" target="_blank">LinkedIn</a>
</li>
</ul>
</div>
</div>
<!-- End Widget -->
</div>
<!--end of social widget-->

بعد الانتهاء، انقر على حفظ وأعد ترتيب الأداة في المكان الذي تريد عرضها فيه.

الأشياء التي تحتاج إلى تغييرها في الكود هي العناصر النائبة YOUR_PAGE (اسم صفحتك على فيسبوك) وYOUR_USERNAME (اسم المستخدم الخاص بك على تويتر) وYOUR_FEED_ID (معرّف خلاصتك في FeedBurner). احرص على عدم تعديل الأجزاء الأخرى، وإلا فقد تتوقف الودجة عن العمل.

إذا لم تتسع الودجة في شريطك الجانبي، فغيّر قيمة العرض (width:300px) في قاعدة CSS الخاصة بـ #UT-mashable-bar.

ننصحك أيضاً بالاطلاع على قسم نصائح وحيل بلوجر لمزيد من الدروس الرائعة. سيحسّن ذلك تجربتك في التدوين.

كيفية إضافة ودجة الشبكات الاجتماعية الشاملة في بلوجر

كيفية إضافة ودجة الشبكات الاجتماعية الشاملة