- This topic is empty.
-
AuthorPosts
-
June 8, 2013 at 3:32 am #45382asiekParticipant
First off please check out [this blog post](http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/ “http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/”).
On the left you will see the share buttons for Facebook and Twitter.
I basically would like to learn how to recreate it.I’m not sure if the designer created the links on his own or used a WP Plugin of some sort.
Any ideas on where I can start? Or recommended tutorials?
I’d really appreciate the help!
June 8, 2013 at 9:01 am #138061pixelgridParticipantThe way they did it:
for the facebook share button create an anchor link with an href of
http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=Les illustrations de Senor Octopus&p[url]=http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/&p[summary]=C’est par hasard (plus ou moins) qu’on est tombé sur la page Facebook de Senor Octopus, illustratrice et typographe basée à Montpellier. Un seul coup d’oeil nous a suffit pour se dire “
where the &p[title], &p[url],&p[summary] are the bits you want to change.
this functionality is used as a share button through sharer.php.facebook has announced that will drop support for share and continue with a simple like button but still supports it
the twitter share button is again an anchor with an href of
http://twitter.com/share?via=sfgdablog&text=Les illustrations de Senor Octopus’
text is your tweet and via is a reference you can insert hashtags in you text as normal
June 8, 2013 at 9:07 am #138059pixelgridParticipantfor teh facebook link you can use the graph api and just have a link to facebook sharer page and include all your information to be shared in meta tags
just replace the content of each meta tag with real values
June 8, 2013 at 4:31 pm #138078asiekParticipant@pixel_grid Not too familiar* with any of that. So I guess I’ll have to find a tutorial somewhere lol. Appreciate your response, Thanks.
June 9, 2013 at 3:45 pm #138142asiekParticipant@Pixel_Grid
Is it okay to use custom icons?
Change the color of them to match a design?
Or is that against the rules to sharing buttons?June 9, 2013 at 3:56 pm #138144devil2x2MemberI guess you want these share links after each of the post so I tell you the easiest do COPY this code and PASTE in it your functions.php file and use css to arrange them well.
[PHP]function share_this($content){
if(!is_feed() && !is_home()) {
$content .= ‘‘;
}return $content;
}
if($supernova_options==1){
add_action(‘the_content’, ‘share_this’);
}[/PHP]
June 13, 2013 at 5:14 am #138530asiekParticipantIf anyone would like to know the technique I used here it goes//
For Twitter I used this **HTML**//
[div class="custom-tweet-button"]
[a class="twitter popup" target="_blank" href="http://twitter.com/share?url=" title="Share On Twitter"][/a]
[/div]To make the window pop up in the center of the screen I used this **JS**//
$(function(){
$('.popup').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = $(this).attr('href'),
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
});
**SOURCE**: [http://stackoverflow.com/questions/6342733/how-style-twitter-popup](http://stackoverflow.com/questions/6342733/how-style-twitter-popup “http://stackoverflow.com/questions/6342733/how-style-twitter-popup”)
For Facebook I used this **HTML**//
[div class="custom-fb-button"]
[a href="http://www.facebook.com/share.php?u=&t=" target="_blank" onClick="return fbs_click(400, 300)" title="Share This on Facebook"][/a]
[/div]
To make the window pop up in the center of the screen I used this **JS**//
function fbs_click(width, height) {
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
return false;
}
**SOURCE**:
[http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen](http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen “http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen”)**CSS**//
.custom-tweet-button, .custom-fb-button { display: inline-block; }
.custom-tweet-button a { height: 20px; width: 20px; display: block; background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat; }
.custom-fb-button a { height: 20px; width: 30px; display: block; background: url('http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981') 1px center no-repeat; }
July 14, 2013 at 3:18 am #142716asiekParticipant@FragaGeddon Thank you for the information.
I was worried about that…but then I noticed many many sites doing exactly what I was trying to achieve.
So I said oh heck, why not! lol. Just wish Social Media Sites wouldn’t limit what is able to be done with buttons.But once again, thank you.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.