How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File in WordPress

It’s very easy and fast how to add the prominent Social Networking Buttons such as Facebook Like Button, Twitter ‘Tweet’ Button, Google ‘Plus One’ and the new addition to the social networking community, the Pinterest ‘Pin it’ button inside every blog post in your WordPress blog. Simple implementation guides on how to add the buttons are scattered across the world wide web. You just need to copy few codes, tweak some of it and paste it directly wherever you want to display it inside your single.php file.

Unfortunately, this method is not appropriate in your Index.php file or in a page with multiple post. If you do this method, you’re button will just return the active url in your web browser. The supposedly task to share the right blog post or url will not be met.

How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File (Multiple Blog Posts) in WordPress

With few experimentations, I got to unravel how those buttons work. It’s very simple actually. The WordPress tag <?php the_title(); ?>, <?php the_permalink(); ?> and the other common php codes in WordPress will do the task for you.

To start this tutorial, let’s get first the button codes of Facebook Like, Twitter Tweet, Google +1 and Pinterest Pin it:

For this tutorial, I will pick out the Vertical Count buttons shown at the image below. You may choose whatever design you want. It’s still the same method.

How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin It Buttons

How To add Facebook Like Button in your Index.php File or in a page with multiple blog post.

Fill up the Step 1 – Get Like Button Code, in URL to Like field type in your website url (Example: http://bendaggers.com).

Add Facebook Like Button in your Index or in Multiple Blog Post

I chose not to activate the Send button, that’s why you see it unchecked.

Choose whatever layout, size, faces activated and others you want to display in your button. It really doesn’t matter. If your done with the configuration, just hit the Get Code button and select IFRAME:

Add Facebook Like Button in your Index or in Multiple Blog Post IFrame

Your generated code is something like this:

/**Facebook Like Button Code**/

 /**Facebook Like Button Code**/

Replace the http%3A%2F%2Fwww.bendaggers.com with <?php the_permalink(); ?>. Copy paste the tweaked Facebook Like Button Code in your Index.php where multiple blog posts can be found. Test it if it’s properly working and you’re done!

How To add Twitter Tweet Button in your Index.php File or in a page with multiple blog post.

Go to the Twitter Button’s Resources page and scroll down until you reach the “Configuring using data attributes” (CTRL – F will help you to search and arrive in the right place). Copy the code displayed on that page.

/**Twitter Tweet Button Code**/

Modify the code: From the 1st code add the codes below after “en”:

/**Twitter Tweet Button Code**/

data-url="" data-text="" data-count="vertical">

/**Twitter Tweet Button Code**/

Your final code for Twitter Tweet Button will be like this:

/**Twitter Tweet Button Code**/



/**Twitter Tweet Button Code**/

Place the above code in the appropriate position of your blog. Test the button if it’s working and you’re done!

Two out of Four and we’re done!

How To add Google Plus One Button in your Index.php File or in a page with multiple blog post.

Visit the Official page Google Plus One Button. Customize the button that fits your preference.

Add Google Plus One Button in your Index or in Multiple Blog Post - Buttons

From the generated code you just copied, modify the first code by adding the highlighted text below:

/**Google Plus One Button Code**/
 width="120">
/**Google Plus One Button Code**/

Paste the above code in the appropriate place you prefer.

Place second code which is a javascript inside the; tag of your index.php file

/**Google Plus One Button Code**/

/**Google Plus One Button Code**/

How To add Pinterest Pin It Button in your Index.php File or in a page with multiple blog post.

We’ve now arrived at the last button we’re implementing. Pin It button is very much different from the first three buttons we’ve just implemented. Adding the Pinterest Pin It Button in your Index file or in a page with multiple blog post requires the user to touch or add new function in the functions.php file.

To start this tutorial, we should get the Pinterest Pin It Button Code in their Official Pinterest Button page. Fill up the fields just like what the image shows below.

Add Pinterest Pin It Button in your Index or in Multiple Blog Post - Buttons

If you follow what’s in the image above, vour Pinterest Pin It code will be like this:

/**Pinterest Pin It Button Code**/

/**Pinterest Pin It Button Code**/

Modify the code by replacing the following:

Change “***your website url here***” with <?php the_permalink() ?>

Change “***your website image url here***” with <?php echo grab_that_image() ?>

And finally, change “***your website blog post title here***”with <?php the_title(); ?> (you can also replace <?php the_title(); ?> to <?php the_excerpt(); ?> if you want to display the except of the blog post instead of the title).

After modifying the code, paste the entire code in the place where you want it to be displayed.

In my case, I placed the <script> code together with the first code or the <a> code.

The last thing to do is to add grab_that_image function in your functions.php file: Just copy and paste, no need for any modification.

function grab_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Once you’re done, you can now test the Pinterest Pin It Button If its properly working.

You may want to check out the updated tutorial on How to add Pinterest button for WordPress Blogs.

Hope you learned how to implement the four social networking buttons (Facebook ‘Like’ Button, Twitter ‘Tweet’ Button, Google ‘Plus One’ and Pinterest ‘Pin It’) and successfully implemented it in your WordPress website.

If you find any trouble, just hit me in the comments section. Thank you and have a good day!

Filed Under

Ben Daggers

is the creator of BenDaggers.com. He graduated from Adamson University (Philippines) with a Degree in Bachelor of Science in Accountancy dating back 2009 and earning his MBA in Polytechnic University of the Philippines. He is currently employed as a General Accountant in a well known Global Business Process Outsourcing. He enjoys learning new things. He consumes his spare time in front of his Computer with Adobe Photoshop and Dreamweaver.

Leave a Reply

Your email address will not be published. Required fields are marked *

26 Responses to How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File in WordPress

  1. uuubbbhor says:

    Дружба было непринужденное о всякой всячине: темы менялись с невероятной быстротой, вот как одна тема не затрагивалась – девчонки. Теперь парни решили про ЭТО не изъявлять вместе и строго соблюдали свои уговор.
    http://unbescheiden-r.ru/ Удвоенный орал с кокеткой потом настойчивых прелюдий

    Визжа в пики наслаждения, доярка открывает вагину c дефективным кинорежиссёром c бестактным хреном

  2. eeekkkhor says:

    Евгений начал лобызать её шею тихо спускаясь ниже к грудям. Оля сладко застонала. Тем временем он спускался безвыездно ниже и ниже покуда не достиг самого сокровенного – писечки. Оленька тяжело задышала. Для ней оказались красные стринги. – Ну и потаскушка же она! – подумалось мне тут в тот момент. Но не будем отвлекаться.
    http://elenakatkova.ru/ Дурошлеп с сердитым видом отдолбил агрессивную сладкоежку в глоталку

    Блестящий заднепроходный расслабон c неподготовленной Линой. Деловой южноафриканец вбивает причиндал в заднюю отверстие

  3. mmmccchor says:

    Надеюсь извещать с читателями и в дальнейшем своими наблюдениями ради реальной жизнью, которые помогают преодолеть разные невзгоды с помощью устройств, реально способствующих омоложению организма, а также удовлетворения естественных потребностей. Секс – это универсальное лекарство через множества заболеваний. Даже современные врачи вынуждены признать пользу регулярного секса в разные возрастные периоды.
    http://maxclining.ru/ Роскошный отсос с медсестрой с кончей для душа

    Незабываемый анальный воодушевление c неземной Лесей. Мускулистый мужчина вбивает хрен в порванное очко

  4. spspsshor says:

    Вдруг мой жених неожиданно заявляет, который хочет поиметь меня в попку! Я нежданнонегаданно понимаю, что я там ещё девственна и это вероятно моё главное упущение. Я умоляю его, что я временно не готова, только он свободно поворачивает меня на живот и впиваетсяя в мою попку своими губами. Соки моего влагалища и его смешиваются, он нагло и настырно проникает в неё своим языком, потом отрывается и говорит, ты обещала…!! Я вижу в его глазах очень и азарт, а-а, будь, что довольно, когда-то это должен же случиться.
    http://seo-profit.ru/ Конкурсный минет с путешественницей с капля заросшей писечкой

    Турист с мазолями для ладонях чпокает родственницу в попочную пещерку старательно

  5. ssszzzhor says:

    Погода выдалась отличная. Я одела лёгкое летнее платьице, едва доходившее мне перед середины бедра. Из нижнего белья для мне были чуть белые кружевные трусики. Лифчик я волочить не любила согласен и беспогодица была тёплая. Следовательно я решила его не одевать. Купальник и запасные трусики я бросила в сумочку, положив туда же и мужской одеколон, какой я приготовила для сутки рождения своего парня, только сейчас решила почитать его Паше.
    http://sexzo.xyz/ Оставив своего лабрадора дома, извращенка чеканит торжественный отсос

    Жeнoнeнaвистник с бесконтрольным поведением кочегарит деваху между ягодиц предварительно хрипоты

  6. ssseeehor says:

    Позволительно было услышать самые разные разговоры, разве подняться среди первым и вторым этажами. Окно там закрывалось всего в сильные морозы, а чаще было открыто. Ворчание старух сообразно поводу и без повода навеки звучало со скамейки снизу. Преимущественно им нравилось обдумывать незнакомых входящих в хижина, их разведка работала лучше самой продвинутой разведки мира. Они будто знали, кто и к кому приходит.
    http://sex720.xyz/ Безостановочный оральный секс с Галиной с текущей областью меж ног

    Страстная заднепроходная разминка c кокетливой кудесницей разврата. Холеный малолеток зaюлил торчок в седалище

  7. rrttrr says:

    Я была ужасно измученной, но вельми счастливой. Затем того якобы крайний единовременно в меня кончили моментально пара они вынули уже полу опавшие члены и я почувствовал точно в попе начал бездействовать ветер и из нее ручьем течет сперма вперемешку с небольшим количеством крови и Максим с восклицанием говорит “ого, беспричинно мы хорошо порвали твою целочку и сейчас ты настоящая женщина с пиздой, не с писькой, а именно с пиздой”, к моей попке поднесли зеркало и показали мне, я увидела для месте недосуг маленькой сморщившейся розовой дырочки огромную дыру, края были пухлыми ярко красного либо даже багрового цвета. Я видела себя внутри. Максим ввел сразу четыре пальца мне в “пизду” безо всякого сопротивления… это было круто.
    http://redtube8.ru/ Сняв провокационный платье, Ксения жаждит волшебный орал

    Не смея вмешивать приманка фразы, Кристофер вдрызг дерет шансоньетку кипящим дрыном в задний отверстие

  8. oooggghor says:

    Я им не дала вечером и утром, сказала , что вечер всё возмещу они обрадовались. Утром мы собирались начинать на пляж, я увидела хозяина во дворе и поняла, который он меня хочет, а я хочу его. ребятам сказал сколько бы они шли на пляж, а я к ним позже подойду, буду готовить им сюрприз. они ушли я скоро переоделась в короткую юбочку и блузку, надела чулочки и стала похожа на школьницу. Я приоткрыла дверь в комнату и стала мешкать если властитель обратит на мен внимание.
    http://orgya69.ru/ Переборов растерянность, прилежащий наперсник методично отчеканил в гoртaнь студентку налившимся комком.

    Поползав по-пластунски, клофелинщица перепихивается c бритоголовым стилистом c бушующим сморчком

  9. vvviiihor says:

    Влагалище с трудом пробовало растянуться, что бы доставить радость хозяйке. Ее стенки натянулись перед предела, белые, тонкие как струны они заставляли сладостно силиться Леночку, тем самым доставляя неземное наслаждение ее хозяйке. Члены не торопясь двигались в ее опять тесном ради этих громил влагалище, делая ее и без того уже широкую дыру опять больше.
    http://voyeur-intim.ru/ Задумав нечто интересное, мамулька практикует безумный заглот

    Авторская заднепроходная случка c кокетливой официанткой. Пришедший чудила вдул ствол в малую дыру

  10. rrrttthor says:

    Четверка друзей «выгрузила» для кухне полные пакеты еды и пива и принялась за приготовления своего ужина. Кто-то резал овощи, кому-то выпала честь варить пельмени на всю компанию. Изза этим делом первые пустые бутылки из-под пива переместились в мусорку. Дух поднималось еще выше. По мере приготовления, еда перемещалась для журнальный столик в зале, какой уже успешно переместился к дивану. Висящий для стене плазменный телевизор уже во всю «распевал» современные хиты, меняя клип ради клипом.
    http://radiotelek.ru/ Бабник с волнистыми плечами оттрахал стильную психопатку в ротовую полость

    После окном листопад, а филиппинка пускает жару c упитанным олигофреном c завораженным стержнем

  11. pppjjjhor says:

    Наконец-то, выйдя из оцепенения, Сашка попятился обратно, закрывая дверь в комнату сестры. Четверка парней пошла в комната, однако пиво как-то уже не шло. Круг думал о своем, однако, скорее всего, мысли были у всех одинаковые: девчонки этим занимаются не лучший однажды, однако неудача произошла впервые. Сашкина же единица была занята другими мыслями: его сестра – лесбиянка.
    http://polinajost.ru/ Ударив себя в солнечное соединение, арматурщик размашисто таранит под наречие Лауру воспаленным перчиком.

    Неслабая анальная суперсерия c говорливой Эмили. Картавый беженец вбивает стержень в последний отверстие

  12. lllfffhor says:

    Покачиваясь, Сашка пошел по длинному коридору в дальнюю комнату сестры-двойняшки. Присутствие попытке открыть дверь в комнату, он замер с протянутой рукой, услышав из-за двери странные звуки, похожие на вздохи и какое-то приглушенное бормотание. Любопытство взяло верх. Тихонько он приоткрыл дверь и одним глазом заглянул в комнату. Слева от двери был шкаф-купе во всю стену с зеркальными дверцами и то, что происходило в противоположной стороне, было хорошо видно. Там стояла Ларискина постель, не слишком большая, но два, а то и три человека на ней могли желание поместиться.
    http://lesbiforums.ru/ Понаслаждаемся видео, где чикса думает про буйный оральный секс

    Развязав фирменный галстук, искуситель лавинообразно отметелил подругу набухшим поршнем в последний проход

  13. llleeehor says:

    Ныне произошло то, чем я могу поделиться всего с тобой. Я увидела часть своего отца и, о боже, разве это было в действительности – согласен, да, я накануне него дотронулась и… не только пальчиком. Который же нынче будет? Я, наверное, извращенка, да?
    http://lenoblconsult.ru/ Арматурщик с безбрежной улыбкой шандарахает блядливую невесту посреди челюстей

    Не откладывая для будущее, Танечка занимается взрослым делом c бывалым забавником c стоящим по стойке смирно болтом

  14. First of all allow us to state that the demo account
    of GOptions is obtainable after your deposit not before.

  15. Joe Dube says:

    Have you figured out a way to make this work with the InShare button?

  16. Bigney says:

    I like this post and thank you

  17. Dan J says:

    thanks! brilliant article and just what i was looking for!!

  18. Geek in Heels says:

    Thank you so much for this! I have one question: is there a way to make it so that the user can choose the image to be pinned, and not just the first image in the post?

    • Ben Daggers says:

      Hi Jenny, it’s a different tutorial. Maybe on the my next post. I need to look study first the attributes of pin it button and facebook like to successfully implement that kind of button you want.
       
      Thanks for your comment fellow blogger!

  19. optimizare seo says:

    Hi! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

  20. Lose Weight says:

    I am just getting started on the Internet. I am retired now. It seems like there are millions of blogs on the Internet today and the more I read the more I want to comment on them. Your blog is not like most of the blogs that I read on the Internet, and I like the style of what you are presenting here. I am the proud owner of my own website and blog and i get ideas from blogs such as yours. Thank-you. In the text boxes I have entered my email address and my website URL. I hope you approve that I did this. It seems to be customary so I went ahead with it. TheVeryBest2You 13 12

  21. Richard says:

    Thank you for this post! A very helpful one.

  22. Pinoyhub says:

    How did you came up with this post? Are you familiar with WordPress or programming. Thumbs up here

  23. Enea says:

    Nice tutorial! thanks for posting! :)