#1Tạo widet Mạng xã hội “phong cách Mashable” cho WordPress 4/5/2012, 22:28
Đang xem:In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests
rongbay
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.
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
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.
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net
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>
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ướ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.
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.<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>
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net