InfoBlogTech

Tạo widet Mạng xã hội “phong cách Mashable” cho WordPress

Hôm nay đọc bài viết Theme Facebook cho WordPress bên Blog của Hoàng Huynh mình lại nổi hứng thay theme. Nhưng không, ,thay vào đó 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.

 

 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ập trung 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ột Facebook Page … Và nếu vẫ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ững bướ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.

<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="<span style="color: #ff0000;" data-mce-style="color: #ff0000;">117354884961413</span>" 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 sidebar củ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 cho khung đăng kí nhận tin

<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=<span style="color: #ff0000;" data-mce-style="color: #ff0000;">Feedburner-ID</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 115px;
padding: 0px 0px 0px 0px;
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ẳng hạ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="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="<span style="color: #ff0000;" data-mce-style="color: #ff0000;">FACEBOOK-PAGE-ID</span>" 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://<span style="color: #ff0000;" data-mce-style="color: #ff0000;">DIA-CHI-GOOGLE+</span>"></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/<span style="color: #ff0000;" data-mce-style="color: #ff0000;">TAI-KHOAN-TWITTER</span>">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=<span style="color: #ff0000;" data-mce-style="color: #ff0000;">FEEDBURNER-ID</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 115px;
padding: 0px 0px 0px 0px;
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ạn copy được ở bước 1 và làm tương tự với FEEDBURNER-ID. Ngoài ra cò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.

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.

 /*-----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 10px 0 !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: 9px 11px;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.

 

 Nếu có khó khăn hoặc thắc mắc, các bạn có thể đưa ra ý kiến hoặc liên lạc với mình qua trang Liên hệ

Chào các bạn, mình là Hoàng Phúc - người sáng lập blog InfoBlogTech. Tuy không biết nhiều về công nghệ thông tin nhưng cũng tập tành blogging.

Leave a Reply

Top