Chia sẻ bài viết: ----------------------------
Mình sẽ hướng dẫn các bạn tạo một Widget mạng xã hội (Social Widget) tương tự trang Mashable dành cho blog.
DEMO:
Nói ngắn gọn thì Mashable là một blog tin tức được thành lập bởi Pete Cashmore có trự sở tại San Francisco (Mĩ) tậptrung về chủ đề social media . Vì vậy mà nó kết nối với nhiều mạng xã hội phổ biến hiện nay nên lấy phong cách Mashable là như vậy .
Bước 1: Chuẩn bị
Facebook Page
Đầu tiên, bạn cần có mộtFacebook Page … Và nếuvẫn chưa có, các bạn hãy tạo cho mình một cái (mình sẽ không hướng dẫn vì đã có rất nhiều trên Internet).
Các hướng dẫn ở bước 1 chỉ là ví dụ cho nhữngbước sau, vì vậy bạn đừng sao chép code trong bước này.
Hãy cùng xem qua đoạn code mà chúng ta sẽ sử dụng đề chèn Facebook Page vào widget.

Code:

<div class=”sidefb”>
<script type=”text/javascript”src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<script type=”text/javascript”>FB.init(“1690883eb733618b294e98cb1dfba95a”);</script>
<fb:fan profile_id=” 117354884961413 ” stream=”0″ connections=”8″ logobar=”0″ width=”250″ height=”200″ css=”<?php bloginfo(‘stylesheet_url’); ?>?1″ rel=”stylesheet” type=”text/css”></fb:fan>
</div>

Trong đoạn code trên, bạn có thể thay đổi số kết nối ( connections="8" ), chiều rộng và chiều cao cho phù hợp với sidebarcủa blog. Sidebar của bạn nên có chiều rộng tối thiểu là 260px để hiển thị đầy đủ những thành phần của widget.
Bây giờ đăng nhập vào Facebook, nhấn vào Chỉnh sửa Trang ( Edit Page ) và bạn chép dãy số ở cuối trong thanh địa chỉ, nó sẽ có dạng https://www.facebook.com/pages/edit/?id= 126620757448440
-Khung đăng kí nhận tin qua email
Bạn có thể sử dụng dịch vụ miễn phí của Google FeedBurner. Giả sử bạn đã có tài khoản tại FeedBurner nên ta tiếp tục.
Đây là code sử dụng chokhung đăng kí nhận tin

Code:


<div class=”sidesub”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri= Feedburner-ID ‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><input type=”submit” value=”Subscribe” /><span><input type=”text” style=”width: 115px;
padding: 0px 0px 0px0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;” name=”email” value=”Email” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”/><input type=”hidden” value=”ariff” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/>
</span></form></div>

Bạn cần biết ID FeedBurner của mình, đó chính là URL FeedBurner mà Google cung cấp cho bạn. Chẳnghạn bạn có URL http://feeds.feedburner.com/ infoblogtech thì infoblogtech chính là ID.
Bước 2: Đoạn code đầy đủ
Sau những ví dụ trên, giờ ta tập hợp tất cả chúng lại, bạn có thể chép chúng vào Widget Text.

<div id=”sidesocial”>
<div class=”sidefb”>
<script type=”text/javascript”src=”https://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<script type=”text/javascript”>FB.init(“1690883eb733618b294e98cb1dfba95a”);</script>
<fb:fan profile_id=” FACEBOOK-PAGE-ID ” stream=”0″ connections=”8″ logobar=”0″ width=”250″ height=”200″ css=”<?php bloginfo(‘stylesheet_url’); ?>?1″ rel=”stylesheet” type=”text/css”></fb:fan>
</div>
<div class=”sideg”>
<div data-size=”medium” data-href=”http:// DIA-CHI-GOOGLE+ “></div><span>Recommend on Google</span>
<script type=”text/javascript”src=”https://apis.google.com/js/plusone.js”></script>
</div>
<div class=”sidetw”>
<a href=”https://twitter.com/ TAI-KHOAN-TWITTER “>Follow @YOU</a>
<script src=”//platform.twitter.com/widgets.js” type=”text/javascript”></script>
</div>
<div class=”sidesub”><form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri= FEEDBURNER-ID ‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><input type=”submit” value=”Subscribe” /><span><input type=”text” style=”width: 115px;
padding: 0px 0px 0px0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;” name=”email” value=”Email” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”/><input type=”hidden” value=”ariff” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/></span></form>
</div>
</div>

Trong đoạn code trên, bạn thay FACEBOOK-PAGE-ID thành ID mà bạncopy được ở bước 1 và làm tương tự với FEEDBURNER-ID . Ngoài racòn có Twitter và Google+, bạn chỉ cần thay thành giá trị phù hợp là được. Nếu không thích cái nào thì bỏ cái đó đi cũng không sao.
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net

Chia sẻ bài viết: ----------------------------
Bước 3: CSS
Bạn chép đoạn mã CSS sau vào file styles.css hoặc vào file CSS của theme đang sử dụng để định dạng bố cục cho widget.

Code:

 /*—–Facebook fanpage styling start—–*/
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none!important;
position: relative;
}/** Change height here **/
.fan_box .connect_top{
background: none!important;
padding: 0!important;
}
.fan_box.profileimage,.fan_box .name_block{
display: none;
}
.fan_box.connect_action{
padding: 0!important;
}
.fan_box .connections{
padding: 0!important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}/** Change font-size here **/
span.total{
color: #4a6cc1;
font-weight: bold;
}/** Change color here **/
.fan_box .connections.connections_grid {
padding-top: 10px!important;
}
.fan_box.connections_grid.grid_item{
padding: 0 10px 10px0 !important;
}
.fan_box.connections_grid.grid_item .name{
font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666!important;
padding-top: 1px!important;
}
.fan_box.connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;
}
.fan_box.connect_widget.connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box.connect_widget td.connect_widget_vertical_center {
padding: 0!important;
}
/*—–Facebook fanpage styling end—–*/
#sidesocial{border: 1px solid #EBEBEB;}
.sideg{background-color: #EBF9E8;
font-size: .85em;color:black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid#EBEBEB;}
.sidetw {background-color:#EEF9FD;padding: 9px11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid#EBEBEB;}
.sidefb {font-size:.85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid#EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color:#333}
.sidesub {padding: 9px 10px;line-height: 1px;background-color:#FFB86D;border-top: 1px solid white;}
.sidesub span {width: 115px;}

Vậy là hoàn thành. Bây giờ bạn hãy làm những gì mình thích như chỉnh sửa CSS, bỏ sung thành phần cho phù hợp với ý mình
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net