Facebook Debugger

https://developers.facebook.com/tools/debug


Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.

Quelle: http://www.liquid-artwork.de/liquidblog/2011/10/08/facebook-webseite-bzw-link-mit-eigenem-miniaturbild-einstellen/

 

Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.

Wer seine eigene Webseite in Facebook posten möchte, hat oft das Problem kein passendes Miniaturbild von Facebook angeboten zu bekommen. Ein eigenes Miniaturbild für Facebook zu wählen ist nicht so ohne weiteres möglich. Wer in Google sucht wird schnell fündig und bekommt den Link:

<link rel=”image_src” href=”PfadzumBild” />

für den Header seiner Seite empfohlen. Leider funktioniert diese Methode nicht mehr.

Die neue Lösung: Mit Meta-Tags im Open Graph Protocol zu arbeiten. Facebook unterstützt diese Meta-Tags und zieht seine Informationen daraus.

<meta property=”og:title” content=”Titelzeile”/>
<meta property=”og:type” content=”movie”/>
<meta property=”og:url” content=”http://www.website.de”/>
<meta property=”og:locale” content=”de_DE”/>
<meta property=”og:image” content=”http://pfad/bild.jpg”/>

Ein von Facebook akzeptierter vollständiger Baustein siehst so aus wie oben aufgeführt. Eine Liste und Beschreibung der og:type findet man hier:https://developers.facebook.com/docs/opengraph/#types oderhier…

Facebook Link eigenes Miniaturbild einfügenWenn man bereits versucht hat seinen Link zu posten, kann es sein das Facebook diese Daten bereits im Cache hat. Nach dem einfügen der neuen Meta-Tags sieht man dann immernoch kein Ergebnis. In diesem Fall sollte man den Facebook-Debugger nutzen und dort seine Domain abfragen:https://developers.facebook.com/tools/debug
Der Facebook-Cache wird hierdurch geleert und man kann den Link erneut, mit Erfolg laden. Nach jeder Änderung der Meta-Angaben sollte man den Debugger einsetzten.

Für das Miniaturbild eignet sich ein Bild in der Originalgröße 90 x 90 Pixel. Dann ist die Darstellung optimal.

(Korrektur nach Kommentar): Für das Miniaturbild eignet sich ein Bild in der Originalgröße 100 x 100 Pixel. Dann ist die Darstellung optimal.

Tags: bild, Facebook, image, image_src, Link, meta, Miniaturbild,pfad, posten, Webseite

Der Beitrag wurde am Samstag, den 08. Oktober 2011 um 14:23 Uhr veröffentlicht und wurde unter Tools, Tutorials | abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

24 Antworten zu “Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.”
  1. meinName Sagt:
    18. Dezember 2011 at 17:45

    Meiner Meinung nach sollte 100×100 Pixel verwendet werden. 90×90 sieht verschwommen aus und wird auf 100×100 Pixel skaliert.

    Gibt es die Möglichkeit mehrere Bilder zu nutzen? Denn mit der o.g. Methode stehen die restlichen Bilder des Links nicht mehr zur Auswahl bereit.

  2. admin Sagt:
    18. Dezember 2011 at 20:43

    Danke für den Tipp. In der Tat ist eine Auflösung von 100 x 100 Pixel besser geeignet. Der Eintrag wurde entsprechend angepasst. Eine Methode um die restlichen Bilder zusätzlich und autmatisch wieder zur Verfügung zu stellen ist mir nicht bekannt. Es ist aber möglich durch weitere meta property=”og:image” Einträge weitere Bilder bereitzustellen. Ich würde diese Option aber nicht zu exzesiv einsetzen, da für eine relative kleinen Nutzen (nur Facvebook) recht viel zusätzlicher Code sonst in die Seite “gepumpt” wird. Das Content-Verhältnis und damit auch die SEO leidet darunter schnell.

  3. Geistronaut Sagt:
    28. März 2012 at 14:25

    FB will 200*200 als mindest Auflösung.

  4. admin Sagt:
    16. Mai 2012 at 14:45

    Nicht für die Miniaturbilder, hier sind es 100 x 100 Pixel.

  5. Michaela Sagt:
    11. Juni 2012 at 13:11

    Hmm..Ich hätte das auch gerne gemacht, aber bei jimdo.com kenne ich mich gar nicht aus:/ wüsste nicht mal wo ich mein gewünschtes Bild hochladen kann bei jimdo, um den Pfad zu bestimmen. Wenn jemand auf gefällt mir drückt bei der Startseite ist das Miniaturbild ein Teil vom Header, gefällt mir gar nicht,…

  6. admin Sagt:
    11. Juni 2012 at 13:58

    Jimodo ist soviel ich weiß ein Homepage-Baukasten. Dort sind die Einstellungen und Zugriffe leider entsprechend eingeschränkt. Ich vermute daher, dass die gewünschte Einstellung nicht möglich sein wird.

  7. Holger Lübeck Sagt:
    08. Juli 2012 at 18:13

    Der Tipp hat sehr gut geholfen! DANKE
    Leider wird bei mir, trotz debugger, immer noch die falsche Grafik angezeigt, wenn ich den Schalter in meinem Forum (WBB 3) benutze. Trage ich einen Link manuell bei FB ein, dann wird auch das richtige Logo und nicht irgendein Smilie geladen.

    Kann ich noch irgendwas falsch machen?

  8. Alexander Sagt:
    24. Juli 2012 at 12:14

    Wie leidet die SEO unter mehreren meta-Tags?

  9. admin Sagt:
    24. Juli 2012 at 14:40

    Nun dies ist wie die Frage nach dem Huhn und dem Ei. SEO ist kein verbindliches Naturgesetzt mit klaren Regeln. Was dem einen Lieb ist dem anderen Last… eine gezielte Präsentation in Facebook kann einer Seite mehr Schub geben, als ein paar optimierte Metas für eine geringfügige, kaum einsehbare Verbesserung in Google.

  10. Alexander Sagt:
    30. Juli 2012 at 11:49

    Genau. Also: Leidet nicht.

  11. Robert Sagt:
    13. September 2012 at 10:59

    Es ist wirklich so, dass Facebook 200×200 pixel große Bilder für die thumbnails möchte.
    Der Debugger meckert bei 100×100px Bildern.

  12. admin Sagt:
    13. September 2012 at 11:20

    Es stimmt, Facebook meckert im Debugger dass 200 x 200 Pixel verwendet werden sollen. Aber wen interessiert dies schon was Facebook so will? Fakt ist, das Thumbnail wird mit 100 x 100 Pixel in Facebook selbst abgebildet und dass hochladen einer größeren Datei erhöht die Datenmenge (man kämpft doch um jedes KB beim guten Webdesign) und macht eine Skalierung notwendig (mit den damit verbundenen Qualitätseinbußen). Facebook ist in Sachen Bildqualität ohnehin eine Katastophe, dasher rate ich 100 x 100 Pixel zu verwenden um klare und schön scharfe Thumbnails zu bekommen, trotz der Debugger-Anzeige. Wichtig ist, dass es funktioniert!

  13. Flo Sagt:
    14. September 2012 at 15:13

    Sehr geil, danke! Diese Seite hat mir einige Nerven erspart :)

  14. Christian Sagt:
    10. Januar 2013 at 18:54

    Hallo

    Kann mir jemand sagen warum bei mir im Quelltext dies so aussieht – es scheint als dass die ” umgewandelt werden:

    Gruss

    Christian

  15. Christian Sagt:
    12. Januar 2013 at 12:27

    Hallo

    Ich krieg es nicht hin dass auf facebook das gewünschte Bild angezeigt wird. Der Debugger zeigt das korrekte Bild.

    Er gibt aber auch noch eine Fehlermeldung aus welche sagt, dass die Canonical nicht mit der og:url übereinstimmt. Das ist korrekt. Bei der Canonical hänget er im html file automatisch nicht die index.html an. Die krieg ich nicht weg obwohl ich nur http://www.rosengala.ch eingeben habe.

    Aber auch wenn ich in der og:url die http://www.rosengala.ch/indext.hmleingebe, kommt auf facebook nicht das korrekte Bild. Er holt sich dann immer Sponsorenbilder von ganz unten auf der webseite.

    Vielleicht hat jemand eine Ahnung wie ich das hinbekomme. Vorallem sollte das Bild mit http://www.rosengala.ch erscheinen. Denn niemand gibt noch die index.html mit.

    Gruss

    Christian

  16. admin Sagt:
    12. Januar 2013 at 13:19

    Hallo Christian,

    das Bild, welches du über og:image einbindest ist ein Banner, welches das Format 200 x 200 Pixel nicht einhält (es ist viel größer). Zwar warnt der Debugger es nicht, aber ich würde einmal ein 200×200 oder ein 100×100 Pixel Bild nehmen und nochmals Debuggen. Ich vermute dann klappt es. Wenn man einen Link postet, möchte er eben ein kleines Bild zeigen.

    Das mit der URL kannst du ignorieren. Der Debugger gibt eben aus was er bemerkt, aber verpflichtend ist dies nicht.

    Gruß,
    Lars

  17. Christian Sagt:
    12. Januar 2013 at 13:45

    Hallo Lars

    Vielen Dank!

    Dies war das Problem. Funktioniert nun bestens.

    Gruss

    Christian

  18. Urs Sagt:
    09. April 2013 at 10:42

    Auf unserer Site ist gesetzt. Im Debugger erscheint auch unser Bild. Trotzdem schlägt Facebook beim Weiterempfehlen dann aber immer auch noch ein zweites Bild, das es auf unserer Site gefunden hat, vor (“Miniaturbild auswählen”). Habt ihr das schon mal gesehen?

    Zu sagen ist, dass wir vielleicht nicht mehr den allerneusten Like-Code verwenden, ist ein älteres JS-Snippet. Falls das eine Rolle spielen sollte: gibt es einen guten Code für “Weitersagen”, den man auf einem eigenen Link absetzen kann?

  19. Urs Sagt:
    09. April 2013 at 10:43

    oben ist das Metatag rausgefallen.

    Auf unserer Seite ist

    meta property=”og:image” content=”http://www.domain.com/unserbild.jpg

    gesetzt

  20. admin Sagt:
    09. April 2013 at 13:44

    Leider ist Facebook manchmal ein wenig “eigen”! Caches alle geleert? Ist das Bild in Ordnung und in der richtigen Größe? Stimmt der Pfad zum Bild auch? Evtl. mal ein png einbauen.
    Das die gepostete Domain nur ein Musterpfad ist, kann ich es nicht selbst prüfen.

  21. Urs Sagt:
    10. April 2013 at 10:07

    Hier ein Beispiel, vielen Dank!
    http://www.werliestwo.ch/detail?id=169
    Es geht nicht um das Like-iframe oben rechts, sondern um den “Weitersagen” Link unten links…

  22. admin Sagt:
    10. April 2013 at 10:21

    Ich verstehe. Dieses Verhalten kann man meines Wissens nach nicht beeinflussen. Facebook nimmt an Bildern was es finden kann. Man müsste auf alle anderen Bilddaten auf der Seite verzichten, was natürlich meist nicht möglich ist. Entscheidend ist aber, dass dein Bild zumindest als erstes geladen wird, also sollte es doch passen!

  23. Urs Sagt:
    10. April 2013 at 13:23

    Danke fürs reinschauen!
    Manchmal nimmt es halt auch das 2. Bild zuerst.

    Dass man mit sharer.php arbeitet, ist schon noch aktuell, oder?

  24. admin Sagt:
    10. April 2013 at 14:07

    Warum Facebook auch manchmal wechselt ist vielen ein Rätsel. Die Community hat das schön öfters diskutiert. Facebook macht es eben… Leider nicht so toll aber so ist Facebook halt. Ich habe es bisher auch akzeptieren müssen. Sorry, aber mehr fällt mir nicht ein dazu. Am Skript liegt es aber nicht, denn wenn ich deinen Link in meinem Statusfeld innerhalb von Facebook eintrage zeigt sich der Effekt auch.


Übersuggest

http://ubersuggest.org/

 

Übersuggest

Suggest on steroids

Get keyword ideas with Übersuggest the free keyword suggestion tool that makes good use of Google Suggest and other suggest services.

How it works?

  • Write a term in the box.
  • Choose a language and a source. Übersuggest can get suggestions either from regular Web search or from search verticals like Shopping, News or Video (more to come).
  • Übersuggest takes your base term, add a letter or a digit in front of it, and extracts suggestions for it.
  • Click on each word to get further suggestions based on that term.
  • Add each keyword to your basket clicking on the plus sign on its left.
  • Add all visible keywords to your basket clicking on the large grey button.

With this free keyword tool you can instantly get thousands of keyword ideas from real user queries! Use the keywords to get inspiration for your next blog post, or to optimize your PPC campaigns.


http://www.seo-united.de/backlink-checker/

http://www.seo-united.de/backlink-checker/

Guter Backlink Checker


Anke art

Anke Art

Fonts, Freebies etc. – very good!


Dramatic Text on Fire Effect in Photoshop

http://psd.tutsplus.com/tutorials/text-effects-tutorials/dramatic-text-on-fire-effect-in-photoshop/

 

Final Product What You’ll Be Creating

This entry is part 12 of 16 in the Photoshop Tutorials for Beginners Session – Show All
« PreviousNext »

Flames are particularly hard to render in Photoshop, but in this tutorial I’ll show you how to use a photograph of fire to set text to the match. We’ll render the look on a nice dark background with a gorgeous text effect to complete the image.

This is the second of our five-part series on Photoshop Typography. If you missed last week’s, go visitCreate a Spectacular Grass Text Effect.


Part 1— The Background

So create a new document in Photoshop at 1920px wide x 1200px high, and with the Gradient Tool (G), draw in a radial gradient of browns (#5c3d09 to #1f1409) so you get something like what is shown below.

Notice that the gradient is not centered vertically but sits toward the top. In this image we want the top of the text to be on fire, so the top part of the image should be a bit more lit up.



Step 2

As in the grass text tutorial, once again we’re going to have a textured background. But rather than starting from scratch, I just copied the background from the previous tutorial, merged all the layers and desaturated to get what you see below.

If you need to make this from scratch, first visit Bittbox to get the original paper textures and then follow the previous tutorial’s steps.



Step 3

Now we set the layer to Overlay and to blend the texture into the background and voila!



Step 4

Just to add a bit more texture though, let’s run the Texturizer filter. To do this, create a new layer and fill it with a brown/beige color—#66500f. Then go to Filter > Texture > Texturizer and use the Canvas texture with 80% Scaling and Relief set to 4.



Step 5

Once you have your texturized layer, set that to Overlay. This adds some extra fine detail to our texture which is good because we’re working on such a big canvas.



Step 6

Next we’re going to apply a layer to slightly desaturate the bottom half of the image. This is so that the top looks like it has a warmer glow where the flames are, while the bottom looks a little colder.

So create a new layer and fill it with the color #4b4f3b. Then add a layer mask with a gradient to mask out the top and fade down (so you get the effect shown).

Now set the layer to Color and 45% Opacity.



Part 2—Text + Glow = Awesomeness

OK, we now have a nice background! So let’s add some text. I’ve used the font Trajan because it’s a really dramatic looking font. Here I’ve placed the text in the color #cb9328, then set it to Linear Dodge (Add) with an Opacity of 8%.

What we’re going to be doing with our text is making it look like the top half of the text is coming out of the background and is red hot with flames flickering off. This means we’re going to run a lot of effects and apply layer masks to them so that only the top half shows while the bottom half reverts to faded out text like we have currently.



Step 8

So first create a new layer group to put all the text layers in—because there will be a lot of them.

Then duplicate the text layer and set the color of the duplicate text to #5e3f1c.



Step 9

Now set the newest text layer to Overlay and 70% Opacity. It should look kind of reddish (as shown below).



Step 10

Now duplicate the text again and set the latest duplicate to a yellowish color—#cb9328. Then set this to Linear Dodge (Add) and Opacity 30%.

Next we add a layer mask and draw a gradient so the latest text layer fades out as shown below, and beneath you can see the reddish colored combination of the bottom two text layers.




Step 11

Next we duplicate the text layer yet again, but put this layer right on the bottom. Set the color to black—#000000. Then go to Filter > Blur > Gaussian Blur and it will ask you to rasterize the text, click yes to that, and then set the Radius to about 4px.

Then Ctrl-click any of the other text layers and go back to the black layer and hit delete so you are just left with a sort of shadow. Then duplicate this layer and merge it with the first so the effect is heavier. You should have something that looks like the screenshot below.



Step 12

Once again, add a layer mask so the shadow quickly fades out as shown. This makes it look like the text is coming out of the page.



Step 13

Now duplicate our black layer again and using the Smudge Tool (R) and a largish soft brush you want to just smudge the shadow around so it looks like burn marks.



Step 14

Here’s how our text is looking now. I actually created two sets of „burn“ marks, and then four sets of the shadow layer each blurred a little more than the last and each faded back.



Step 15

Now it’s time to make the top part of our text glow. So first of all, duplicate the text layer again and place this layer at the very top and set it to a yellow color—#dc9a08.

Then run a Filter > Blur > Gaussian Blur over it with Radius of 8px. Then grab a large soft eraser brush and just erase away parts at the bottom so it’s kind of uneven.



Step 16

Set our first glow layer to Soft Light. You might want to repeat the process, erasing even more so the top part is even glowier.



Step 17

Now duplicate the text layer yet again and place this at the very top. This one should be again the same yellow (#dc9a08).

Then go to Layer > Rasterize > Type and turn the text into a flat graphic. Then Ctrl-click the layer and go to Select > Modify > Contract and use a value of 1px. Then press Delete to delete everything except that 1px outline.



Step 18

Now set the 1px layer to Overlay, and you should have something like the image below.



Step 19

Now to our 1px glow add a layer mask to fade it out down the bottom as we’ve been doing with the other layers.

Then duplicate the layer, and run a Filter > Blur > Gaussian Blur set to 1px. Then duplicate this layer again and blur it by 2px. Then duplicate the layer again and blur it by 4px.

Then Ctrl-click any of the text layers, press Ctrl+Shift+I to inverse the selection and go through each of the glow layers and press Delete to remove any of the blur that has strayed out of the boundary of the text.

The idea is that we want the edges of the text to look red-hot with it fading in to an overall hot glow on the text.



Step 20

Next we duplicate all four of the glow layers and merge them together. This should result in a layer on top which is the original bright yellow.

Grab the Smudge Tool and run over the text, smudging it up to look like heat waves coming off the text, as shown.


Step 21

Now set this latest layer to Overlay and you should have something looking like this!



Step 22

Now we’ve pretty much finished our text. I went through and duplicated some of the glow layers to make it look even more fiery. Feel free to experiment with getting a real red-hot glow look by doing so.



Step 23

Next, in keeping with the last wallpaper, I’ve gone and added a quote underneath my main text. This provides a nice embellishment to the page. Try to use colors that fit in with the background and text layer so it doesn’t stand out too much, because we really want this to be a secondary element to the main text. I’ve used Swiss Light Condensed as my font and laid it out just like in the previous Grass Text tutorial.



Part 3—The Flames

Finally, with all our preparation done, it’s time to add the actual flames! For this, we need some images of fire set against a plain black background. A good photo is hard to find, and try as I did, I couldn’t find a really great free photo. So in the end I used this photo from Fotolia which you can purchase using the link below. There was also an OK photo from Flickr which I’ve also linked to and which I ended up using later for the „E“. So you might want to grab that too.

AcheroN—Fotolia.com
Peasap—Flickr.com

Now the technique for copying the flames over is actually really simple. I actually only learned this technique recently when reading one of Nik Ainley‘s tutorials for DigitalArts magazine called Create Amazing Photomontages where he did it with water.

What you need to do is:

  1. Open up the flame image in Photoshop
  2. Go to the Channels tab and find the channel with the highest contrast, which for images of fire should be the Red Channel, and click on it
  3. This will make your image appear black and white, and because we’re on the highest contrast layer, it will seem really bright white. Now Ctrl-click this channel and it will select all the pixels in that channel.
  4. Click back to the RGB channel and copy the selected pixels
  5. You can now paste the flames into your main canvas!

This is actually a really, really useful technique for copying something translucent like fire off a flat background. And as you’ll see by visiting Nik’s tutorial, it’s also great for copying water!



Step 25

OK, so here we’ve pasted the flames on to our main canvas. (For clarity I’ve also temporarily switched off the text layers). As you can see, we’ve got the fire without the black background and it’s partially transparent, which means it’ll look super on top of our text.



Step 26

Now the next thing to do is to cut up our one bit of fire into a few pieces. Just duplicate the layer and switch off one as a backup first. Then using the Pen Tool, cut up the fire so you work with the contours of the flame so it looks natural. Here you can see I’ve produced four pieces of flame from the one image. You can also try flipping bits around to make them seem more random.

Set the layers to Screen mode so that any remaining black parts are totally gone, and it’s even more transparent.



Step 27

Now because my text is just four letters, I need four separate pieces of fire. For the fourth one (on top of theE) I actually grabbed that Flickr photo and repeated the same process as earlier to create another flame. Also the fire on the letter I has been squashed a little as well to make it look more random.



Step 28

Applying the fire is really as easy as moving the flames over the text. You want to try to match the flames to the shape of the letter so it looks like they are dancing off the letters.



Step 29

OK here I’ve placed all four bits of flame over the top. It’s not bad, but you can see that the I and the R have the same flame and also all the flames aren’t very tall.



Step 30

So here I’ve gone through each flame and using the Transform Tool stretched them vertically. Also I used a bit of judicious erasing to make the flame on the I look a little more unique.



Step 31

Now to make them look even more lit up, duplicate each flame layer, run a Filters > Blur > Gaussian Blur with a Radius of 3px and set the layer to 15% Opacity so it provides a bit of glow around the edges of the flames.



Step 32

So we’re pretty much there! This is how the composition looks.



Step 33

Finally we’ll add a last highlight. So create a new layer above all the others and draw in a white to black radial gradient as shown. Set this layer to Overlay and 40% Opacity.



Finished!

And there we have it, a text on fire effect! In the next tutorial in the series, we’ll be producing the Air image, however it’ll be in two weeks, not one—as I’m taking a few days off work!

If you’re interested in creating flames from scratch in Photoshop, you might also like to check out this classic tutorial that coincidentally uses the exact same typeface! It’s a Photoshop 6 tutorial, and I can still remember reading it like a half decade ago, but it’s still very relevant, even if the screenshots feature a super retro Mac interface.


Add Facebook Comments to Tumblr blogs (v3)

Add Facebook Comments to Tumblr blogs (v3)

Glad this has been helpful to some of you. And thanks to those that have been willing to reply to some of those having problems getting things setup in the comments. If this page helped and if you want to say thanks, I hope you’ll take a moment to visit my wife’s site – LifeWithBoys.com

Updated November 29, 2012.
(see previous version here and the original here)

I haven’t been a huge fan of Disqus for my Tumblr comments, so with the release of the new Facebook Social Plugins, I thought I would give it a try. So here is how I set it up…

Setup Facebook App

Sign up at the Facebook Developer site to obtain an App ID. Just sign up and Create New App.
https://developers.facebook.com/apps
Give the app an App Name and click Continue. (See Image 1.) Enter the Security Check (always a pain!) and click Submit. (See Image 2.)

Now you will be at the details form for your app. It looks overwhelming, but we only need to enter a few fields.

First is the Settings->Basic tab. Under Select how your app integrates with Facebook, click on Website. This should expand the Website section. Now for the fields to enter. Give your app an App Namespace – just a lowercase name for your app. Enter a Contact Email – probably has one of your email addresses already noted. Enter a Site URL(the full site for your blog) like http://blog.lifewithboys.com/. Also enter an App Domain where you will use your comments. If it is the same as your blog, you can enter that domain (blog.lifewithboys.com) or you can have it span your entire domain (lifewithboys.com). Click Save Changes. Now go ahead and write down that App ID you see on this page. We’ll need it later. (See Image 3.)

Go to the App Details tab (this was in the Settings->Advanced section when the screenshots were taken). You can enter a User Support email or web page. Click Save Changes. Don’t worry about the Privacy Policy URL error if it shows up. (See Image 4 and Image 5.)

Go to the Roles tab. Here you can add additional comment moderators. Under Administrators, click Add. Choose a Facebook user of your liking. Your moderators will need to confirm the request to be an administrator. (See Image 6.)

Your Facebook configuration is complete.

Modify Tumblr Theme

Now let’s edit our Tumblr Theme. Go to your Dashboard, and click Customize on the right sidebar. Go to the Theme tab and set the theme to Custom HTML (you may already use custom HTML). [It appears Tumblr moved the customization stuff around a bit. Now you will need to go into your Dashboard. Click the Settings (gear icon) button in the top navigation. Click your blog’s name on the left side. And click Customize in the Theme section.]

At the top of the code, you should see the <head> tag; add the following after this tag.

<meta property="fb:app_id" content="111111111"/>

Change 111111111 to the App ID you created.

Add the following just after the above line.

<meta name="if:Facebook Comments On" content="1" />

This will allow you to enable/disable the comment feature.

Now, sift through the code and find the <body> tag (it may be something like <body onLoad=”blah”> as well). Add the following after this tag.

{block:ifFacebookCommentsOn}<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>{/block:ifFacebookCommentsOn}

Where you display the Comment Count (comments, not Tumblr Notes) on your listing and detail pages, you will want to add the following.

{block:ifFacebookCommentsOn}
<span><em><a href="{Permalink}#facebook_thread"><fb:comments-count href="{Permalink}"></fb:comments-count> Comments</a></em></span>
{/block:ifFacebookCommentsOn}

You can change the Comments text to whatever you like. As it is, it will show 0 Comments or 230 Comments.

Where you want the Comments to appear, add the following.

{block:ifFacebookCommentsOn}
<a name="facebook_thread" id="facebook_thread"><!-- --></a>
{block:PermalinkPage}
<fb:comments href="{Permalink}" num_posts="20" width="476"></fb:comments>
{/block:PermalinkPage}
{/block:ifFacebookCommentsOn}

You can adjust the Number of Posts (num_posts) and the Width (width).

If you are using a default template, it may be easiest to just track down where the Disqus code is, and add the Facebook code above or below it. It is usually found near something like {block:IfDisqusShortname}

Tumblr Settings

Go to the Appearance tab, and remove any text from the Disqus Shortname if that exists. This will disable Disqus comments if you use those. And make sure Facebook Comments On is checked. – It appears Tumblr moved the customization stuff around a bit. Now you will need to go into your Dashboard. Click the Settings (gear icon) button in the top navigation. Click your blog’s name on the left side. And click Customize in the Theme section. This will bring up some options and a preview of your theme. On the left, you will see the Disqus Shortname and the Facebook Comments On checkbox.

Notifications Easy

Someone in the comments asked how you could receive notifications when you receive comments. Fair question. I’ll break this into two sections.

If you just want to be notified in Facebook, go to your moderation page: https://developers.facebook.com/tools/comments. Click on Settings on the right side. Add yourself as aModerator. Now when new posts are added, you should get a notice in your Facebook notifications section (the globe at the top of your Facebook page when you log in).

Most of you can consider yourself done at this point. If you want to enhance notifications, you can continue to the next section; but it is really not necessary for most!

Notifications Not So Easy

If you want email notification when new comments are added, it requires a bit more effort, including a web host that supports PHP. There are a few sites with notes on how to do this, but I will add a quick “how to” specific to our setup above. (and thanks to some folks like Juicy Scripter on stackoverflow for insight into this portion)

First, you need to get a copy of jQuery. You can download a copy and save to your host, or just use the Google hosted version. If you already load jQuery into your site for other purposes, you can skip this code snippet. We will assume you will use the Google version. So add this right before your closing head tag – </head>

{block:ifFacebookCommentsOn}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>{/block:ifFacebookCommentsOn}

Up above in our instructions, we added some code after the <body> tag. Here it is as a reminder:
{block:ifFacebookCommentsOn}<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>{/block:ifFacebookCommentsOn}
We need to replace that code with this:

{block:ifFacebookCommentsOn}<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '111111111',
status : true, cookie : true, xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>{/block:ifFacebookCommentsOn}

Change 111111111 to the App ID you created way up above.

Right before your closing </body> tag, you need to add this:

{block:ifFacebookCommentsOn}<script type="text/javascript">
$(window).bind("load", function() {
FB.Event.subscribe('comment.create',
function(response) {
$.post('http://mysite.com/folder/notify.php', {
"actionis": "comment was added", "urlis": response.href, "idis": response.commentID
});
}
);
});
</script>{/block:ifFacebookCommentsOn}

Change http://mysite.com/folder/notify.php to the URL of your notify script you make below.

Now create a PHP file on your web host. Name it whatever you noted above. It should contain the following script.

<?php
$admin_email = 'demo@gmail.com';
$actionwas = $_REQUEST['actionis'];
$commentID = $_REQUEST['idis'];
$page_href = $_REQUEST['urlis'];
$message = "A new {$actionwas} to your site. \n\n Web site: {$page_href} \n Comment ID: {$commentID}";
mail($admin_email, 'New Comment left on your site.', $message);
?>

Change demo@gmail.com to your email address.

These notifications instructions need to be tested a bit more, but seem to be working for us so far.

Good luck and Enjoy!


Folgen

Erhalte jeden neuen Beitrag in deinen Posteingang.