wordpress主題上的社交鏈接intregration

Question

我想將我的html社交鏈接集成到wordpress主題中。我的設計如下 -

我想整合看起來像這樣。請指教我可能嗎？

Answer 1

我使用此代碼。我希望它有幫助。

對於鳴叫：

<a class="tweet-it" href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title($post->ID)); ?>&via=your-twitter-username&related=your-twitter-username,your-another-twitter-username" title="Tweet!">Tweet</a> 

對於針吧：

<a class="pin-it" href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=url-to-posts-image">Pin It!</a> 

我沒有一個代碼， 「喜歡」。但在Facebook上分享也很容易：

<a class="fb-share-it" href="http://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>">Share</a> 

Answer 2

這是一種如何做到這一點的方法，我推薦使用字體圖標。

Demo

<div class="socials"> 
    <a href="#"><i class="icon-fb"></i> Like</a> 
    <a href="#"><i class="icon-pn"></i> Pin it</a> 
    <a href="#"><i class="icon-tw"></i> Tweet</a> 
</div> 


.socials{ 
    margin: 30px 0; 
} 

.socials > a{ 
background: linear-gradient(white, rgb(236, 236, 236)); 
padding: 7px 15px 7px 10px; 
font-family: arial; 
font-size: 12px; 
border: 1px solid lightgrey; 
text-decoration: none; 
color: rgb(107, 107, 107); 
} 

.socials > a:hover{ 
background: linear-gradient(rgb(236, 236, 236),white); 
border-color: rgb(185, 185, 185); 
color: rgb(39, 39, 39); 
} 

.socials > a > i{ 
    width: 16px; 
height: 16px; 
display: inline-block; 
background-repeat: no-repeat; 
    vertical-align: bottom; 
    margin-right: 5px; 
} 

.icon-fb{ 
    background-image:url(https://cdn3.iconfinder.com/data/icons/social-circle/512/social_3-16.png); 
} 

.icon-pn{ 
    background-image:url(https://cdn3.iconfinder.com/data/icons/social-circle/512/pinterest-16.png); 
} 

.icon-tw{ 
    background-image:url(https://cdn3.iconfinder.com/data/icons/social-circle/512/social_8-16.png); 
}