[Помогите] Установка кнопок от соц. сетей

Тема в разделе "Wordpress", создана пользователем AggreSSor, 24 сен 2010.

Статус темы:
Закрыта.
Модераторы: DzSoft, Sorcus
  1. AggreSSor

    AggreSSor

    Регистр.:
    28 фев 2009
    Сообщения:
    222
    Симпатии:
    5
    В общем мучаюсь уже часа 2, всё никак не могу нормально поставить кнопки.
    с Google Buzz и Mail проблем не возникло. Вот только есть пока проблема с FaceBook и вКонтакте.

    По FaceBook.
    Хочется сделать вот так:
    [​IMG]
    но никак не получается, а получается вот так:
    [​IMG]

    Как мне добиться результата как на первой картинке?
     
  2. BadMotherFucker

    BadMotherFucker Модератор (Core Team)

    Регистр.:
    13 ноя 2009
    Сообщения:
    784
    Симпатии:
    560
    http://developers.facebook.com/docs/reference/plugins/like

    Код выглядит примерно так:

    iframe:
    HTML:
    <iframe src="http://www.facebook.com/plugins/like.php?href=google.com&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
    XFBML:
    HTML:
    <fb:like href="google.com" layout="button_count" action="recommend"></fb:like>
     
    AggreSSor нравится это.
  3. AggreSSor

    AggreSSor

    Регистр.:
    28 фев 2009
    Сообщения:
    222
    Симпатии:
    5
    C FaceBook уже даже сам разобрался наконец-то до того как вы написали. Хотя спасибо вам тоже.

    А вот с вКонтакте ситуация еще хуже получается вставляю код и вижу вот что:
    Перейти по ссылке

    А вот это как привести в нормальный вид?
     
  4. BadMotherFucker

    BadMotherFucker Модератор (Core Team)

    Регистр.:
    13 ноя 2009
    Сообщения:
    784
    Симпатии:
    560
    Код кнопки получаем здесь:
    http://vkontakte.ru/pages.php?act=share

    В некоторых шаблонах Wordpress, эта кнопка может расползаться (как в вашем случае), здесь уже надо копать в сторону стилей шаблона.
     
  5. AggreSSor

    AggreSSor

    Регистр.:
    28 фев 2009
    Сообщения:
    222
    Симпатии:
    5
    Где брать кнопку это я в курсе.
    Где же мне тогда копать? В каких именно стилях? Может предоставить какой-то кусок кода?
    Если вы конечно можете помочь
     
  6. BadMotherFucker

    BadMotherFucker Модератор (Core Team)

    Регистр.:
    13 ноя 2009
    Сообщения:
    784
    Симпатии:
    560
    Я же вроде бы по-русски написал, что в сторону стилей шаблона Wordpress.

    Например, чтобы кнопка «Сохранить ВКонтакте» отображалась в левой части поста используется такой код:

    HTML:
    <div class="vkbutton" style="float:right; display:inline; margin: 0 0 5px 5px;">
    
    <script type="text/javascript"><!--
    document.write(VK.Share.button('http://www.google.com/',{type: "round", text: "Сохранить"}));
    --></script>
    
    </div>
     
  7. AggreSSor

    AggreSSor

    Регистр.:
    28 фев 2009
    Сообщения:
    222
    Симпатии:
    5
    Хочу сказать что проблема осталась актуальной.
    Когда ставлю выше кнопку выше поста и выше заголовка, то всё нормально, а вот когда сразу после поста, а именно после того места где текст должен быть, кнопку раздувает.

    Вот мой код: index.php

    PHP:
    <?php get_header(); ?>
    <?php $options 
    get_option('pb_options'); ?>
      <div id="middle-contents" class="clearfix">
       <div id="left-col">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="post">
         <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post-info">
          <li><?php the_time(__('F jS, Y''piano-black')) ?></li>
          <?php if ($options['author']) : ?><li><?php _e('By ','piano-black'); ?><?php the_author_posts_link(); ?></li><?php endif; ?>
          <li class="write-comment"><a href="<?php the_permalink() ?>#comments"><?php _e('Write comment','piano-black'); ?></a></li>
          <li class="post-edit"><?php edit_post_link(__('[ EDIT ]''piano-black'), '''' ); ?></li>
         </ul>
         <div class="post-content">
           <?php the_content(__('Read more''piano-black')); ?>
           <?php wp_link_pages(); ?>
         </div>
        </div>
        <div class="post-meta">
         <ul class="clearfix">
          <?php if($options['post_meta_type'] == 'category') { ?>
          <li class="post-category"><?php the_category(' . '); ?></li>
          <?php } else { ?>
          <?php the_tags('<li class="post-tag">'' . ''</li>'); ?>
          <?php ?>
          <li class="post-comment"><?php comments_popup_link(__('Write comment''piano-black'), __('1 comment''piano-black'), __('% comments''piano-black')); ?></li>
         </ul>
        </div>
    <?php endwhile; ?>
    <?php 
    if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { include('navigation.php'); } ?>
    <a href="#pngfix-right" id="back-top" class="clear"><?php _e('Return top','piano-black'); ?></a>
    <?php else: ?>
        <div class="common-navi-wrapper">
          <p><?php _e("Sorry, but you are looking for something that isn't here.","piano-black"); ?></p>
        </div>
    <?php endif; ?>
       </div><!-- #left-col end -->
       <?php get_sidebar(); ?>
      </div><!-- #middle-contents end -->
    <?php get_footer(); ?>
    Кусок необходимого кода style.css

    HTML:
    /*  ------ left-col ------------- */
    
    .post { margin:60px 0 5px 35px; }
    
    .post h2 { margin:0 0 4px 0; padding:0; line-height:100%; }
    .post h2 a, .post h2 a:visited, #single h2 { color:#ccc; font-size:16px; line-height:120%; font-weight:normal; }
    .post h2 a:hover { text-decoration:none; color:#83bac4; }
    .post-info { margin:0; }
    .post-info li { display:inline; font-size:11px; color:#797f80; margin:0 10px 0 0; }
    .write-comment { background:url(img/arrow1.gif) no-repeat left center; padding:0 0 0 11px; }
    .post-info a, .post-info a:visited { color:#777; }
    .post-info a:hover { color:#83bac4; }
    
    .post-content { clear:both; padding:15px 0 40px 0; line-height:160%; }
    .post-content p { margin:0 0 1em 0; line-height:160%; }
    .post-content a,.post-content a:visited { text-decoration:underline; }
    .post-content a.more-link, .post-content a.more-link:visited 
      { display:block; clear:both; margin:15px 0 5px 0; height:23px; padding:6px 0 0 35px; background:url(img/arrow3.gif) no-repeat left top; text-decoration:none; }
    .post-content a.more-link:hover { background:url(img/arrow3.gif) no-repeat left bottom; text-decoration:none; }
    
    .post img, .post a img { border:1px solid #222; padding:5px; margin:0;  background:#555; }
    .post a:hover img { border:1px solid #849ca0; background:#59847d; }
    .post img.centered,div.centered { display:block; margin:0 auto; }
    .post img.alignright, div.alignright { margin:4px 0 10px 10px; display:inline; }
    .post img.alignleft, div.alignleft { margin:4px 10px 10px 0; display:inline; }
    .post img.wp-smiley { border:0px; padding:0px; margin:0px; background:none; }
    
    .post table { margin:0 0 1em 0; }
    .post td, .post th { border:1px solid #333; padding:15px; }
    .post th { background-color:#000; font-weight:normal; }
    .post-content ul li { margin:0 0 0 0; line-height:160%; background:url(img/bullet1.gif) no-repeat left 9px; padding:0 0 0 12px; }
    .post-content input { margin:5px 0; }
    
    .post-meta { background:url(img/meta-top.gif) no-repeat right top; padding:13px 0 0 0; width:585px; }
    .post-meta ul { background:url(img/meta-bottom.gif) no-repeat right bottom; padding:0 10px 10px 30px; line-height:0%; }
    .post-meta li { display:inline; font-size:11px; line-height:140%; }
    .post-category { float:left; width:345px; background:url(img/category-icon.gif) no-repeat 2px 2px; padding:0 0 1px 20px; }
    .post-tag { float:left; width:345px; background:url(img/tag-icon.gif) no-repeat 2px 2px; padding:0 0 1px 29px; }
    .post-comment { float:right; width:80px; background:url(img/write-comment.gif) no-repeat left top; padding:0 10px 2px 22px; }
    
    #back-top { padding:10px 5px 0 15px; font-size:11px; background:url(img/arrow5.gif) no-repeat left 16px; float:right; color:#777; }
    #back-top:hover { text-decoration:none; color:#83bac4; }
     
  8. Haliff3007

    Haliff3007 Читатель

    Заблокирован
    Регистр.:
    17 мар 2007
    Сообщения:
    481
    Симпатии:
    195
    Проблема с отступами - а точнее padding-left.
     
  9. AggreSSor

    AggreSSor

    Регистр.:
    28 фев 2009
    Сообщения:
    222
    Симпатии:
    5
    где именно нужно это править и на сколько?
     
Статус темы:
Закрыта.