How do I put the "like" and "share" button for each blog post?

Asked

Viewed 4,089 times

2

I added a button to my blog Enjoy and share in the basements of posts of my Blog, so that the reader has the option to choose Like or not, only that post. But when clicking Like, I noticed that the button did not share the post, but the blog.

Could someone help me solve this problem? I would like to know how to put a button Enjoy and share that allows the reader to enjoy only that post you’re reading?

The platform used is Blogger. I have some static pages and for these, yes, I would like to see the Like these pages.
I used the code generated from Facebook Developers, in Social Pluggins:

 <!-- Insere "curtir" e "compartilhar" do facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Código HTML:
<!-- insere o botão "curtir" e o "compartilhar" do facebook -->
<div class="fb-like" data-href="http://enchendoacaixa.blogspot.com.br/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

From now on, thank you very much!

html facebook blogger
  • 1

    Is this a Wordpress blog? Blogger? other? If this is a static HTML page, you are creating the button code curtir, compartilhar and pointing out the share links for each post? What is your sharing code structure for social networks?

  • I’m using Blogger. The code I’m using is the one available on the Facebook Developers page. I’ll edit my question and put the code for you to see.

2 answers

3


This is because you are setting the link to your blog homepage as the link to be liked/shared in the code that generates that button:

data-href="http://enchendoacaixa.blogspot.com.br/"

In order for it to work as a share button for each post, you will need to modify this code and change it to:

expr:href='data:post.url'

which is the tracking code that picks up the Urls of every Blogger post that Google releases for these and other purposes.

However, in order for it to work and take each correct link of each post, the code needs to be inserted within the loop of each item/post, that is, it must be inserted within the structure/container that generates each item/single post within your theme. That will be within a code similar to this one below:

<b:includable id='post' var='post'>
    ....
</b:includable>

After you find this code you already know that you are inside the code that generates each item/post.
Within this same snippet of code looks for the best place where you want to implement button code Like and glue it inside the post in the best place you think it will be. Everything together the code will look something like:

<!-- Insere "curtir" e "compartilhar" do facebook -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

<!-- insere o botão "curtir" e o "compartilhar" do facebook -->
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='true' expr:href='data:post.url'/>

Note: Don’t forget to always change the quotes " " for ' ', I’ve already made this change in the code that generates the buttons.

  • Thank you! it worked! I just wanted to know, and I don’t know if I need to open another question here: When I share the post appears only the title, but not the post image, there is some way to configure this?

  • For the post image to appear, you need to upload an image to your blog (i.e., the image you want to be the highlight image for a certain post) and add it at the beginning of the post using the HTML editor in the post you are editing, as follows: <img style="display:none;" src="http://i.stack.imgur.com/gL1sB.jpg" /> adds the style="display:none;" if you don’t want this og:image is presented in the post when published, so it will only serve as date to the og:image.

  • You can also check these two questions to find out more about this: Facebook description and thumbnail is small and also: Facebook Open Graph meta tags for Blogger. If you still have doubts just say.

  • It didn’t work... I added my images to the web picasa and used the link, as you suggested, but it didn’t work... One thing I noticed is the first image link of the page that I posted and then changed and didn’t update until now... I wanted to change it because the size is much bigger and it’s almost impossible to see, I even edited the image to have a size of 355x355px, and switched the link, but it hasn’t changed yet... https://goo.gl/Rz8n27 Would you like to tell me if this really takes time or if there’s some way to fix it?

  • If you copied the meta tags from the second link question, do it this change in the meta tag code. I inspected the source code of your blog and saw that the image is there, only it is detecting a thumbnail image too small with the size of 42px why it hasn’t changed yet. After updating debug the link from the page you updated here on Object Debugger

  • But when I inspect my code here, the image appears with 165x165

  • Let’s go continue this discussion in chat.

Show 2 more comments

2

For the share button, go to your blog’s Edit HTML and look for

<div class='post-header-line-1'/>

Underneath that, put this:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

I hope you make it. Hugs. Doubts? Comment on my answer.

I forgot to tell you. After the changes are made, go to Design > Page Elements

Look for the square referring to "Blog Posts" and click edit. Then tick the share boxes and save.

Browser other questions tagged html facebook blogger

You are not signed in. Login or sign up in order to post.