This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 5 January 2018

[Blogger] HTML Social Share Code For Blogger


Button chia sẻ bài viết lên các trang mạng xã hội là 1 thành phần không thể thiếu với mỗi template blogger. Việc bố trí bày biện nó trên website cũng phản ánh rất nhiều con mắt thẩm mĩ của mỗi webmaster. Nhưng trước khi làm điều đó bạn cần có code HTML tự động tạo liên kết valid với từng mạng xã hội

Bài viết này sẽ chia sẻ tới bạn đọc button share tới các mạng xã hội thông dụng hiện nay gồm
  • Facebook
  • Twitter
  • Google Plus
  • Pinterest
  • Linkedin
  • VK
  • Yummly
  • Tumblr
  • Buffer
  • Reddit
  • Stumble

Nếu bạn có code các mạng xã hội khác, hãy đóng góp ở mục comment để bài viết được hoàn thiện hơn.

1. Facebook

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Facebook</a>

2. Twitter

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Twitter</a>

3. Google +

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Google +</a>

4. Pinterest

<a expr:href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet" href="https://www.blogger.com/null" onclick="window.open(this.href, 'windowName', 'width=800, height=600, left=200, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank" title="Share to Pinterest">Pinterest</a>

5. Linkedin

<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>Linkedin</a>

6. VK

<a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to VK'>VK</a>

7. Yummly

<a expr:href='&quot;http://www.yummly.com/urb/verify?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Yummly'>Yummly</a>

8. Tumblr

<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Tumblr'>Tumblr</a>

9. Buffer

<a expr:href='&quot;https://bufferapp.com/add?url=&quot; + data:post.url + &quot;&amp;text=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Buffer'>Buffer</a>

10. Reddit

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to Reddit'>Reddit</a>

11. Stumble

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=1000, height=700, left=200, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Share to StumbleUpon'>Stumble</a>

Trên đây là code tạo nút chia sẻ bài viết lên mạng xã hội, hoàn toàn bằng HTML, còn việc bố trí, css như nào là do bạn hoàn toàn kiểm soát. Mạng xã hội là 1 thành phần rất quan trọng trong việc SEO website vì vậy bạn nên tạo càng nhiều tương tác với nhiều mạng xã hội càng tốt nhé !

Good Luck !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Hưng Hoàng Văn 1/05/2018 07:43:00 PM
    Demo pre tag code
    [pre]
    <!DOCTYPE html>
    <html>

    <head>
    <style>
    table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    }

    td,
    th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    }

    tr:nth-child(even) {
    background-color: #dddddd;
    }
    </style>
    </head>

    <body>
    <table>
    <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    </tr>
    <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    </tr>
    <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    </tr>
    <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    </tr>
    <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    </tr>
    </table>
    </body>

    </html>
    [/pre]
    Please wait while i am loading Facebook SDK js